Jump to content



Photo

Share your custom Firefox/Minefield 4 stylish scripts


  • Please log in to reply
2391 replies to this topic

#16 Inklin

Inklin

    Neowinian Senior

  • Joined: 11-April 08
  • Location: Kent, UK
  • OS: Windows 8.1 Pro

Posted 19 July 2010 - 04:28

Looks great, except the transparency doesn't work as well as I thought it would with the bookmarks toolbar. Text is a bit hard to read.

Not to go off topic, but is there an x-marks build that works with FF 4?

edit:

Darian's transparency works much better. Cheers for that one! :)


if you don't ikeitquite so glassy, you can oen the stylish script for the class nav/bookmarks bar I posted and change:
#navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,.3) !important;
}

to:
#navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,.8) !important;
}

still glassy but more opacity. :)
I made it more transparent as I am trying not to use the bookmarks toolbar now to make more screen space for browsing on this 17" 1280x1024 screen... I need to get a new one :p


#17 +Brando212

Brando212

    Neowinian Senior

  • Tech Issues Solved: 10
  • Joined: 15-April 10
  • Location: Omaha, NE
  • OS: OS X Mavricks, Windows 7/8.1 Pro
  • Phone: Sony Xperia ZL, Nokia Lumia 925

Posted 19 July 2010 - 04:32

thank you SoapyHamHocks, one more thing

i want to increase to space between the tabs and the menu button when not maximized, how would i do this?

bvfdPNG.PNG


#18 +SoapyHamHocks

SoapyHamHocks

    Neowinian Senior

  • Joined: 06-March 04

Posted 19 July 2010 - 04:50

thank you SoapyHamHocks, one more thing

i want to increase to space between the tabs and the menu button when not maximized, how would i do this?

bvfdPNG.PNG


Add this:
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
  padding-top: 1px !important;
}


#19 lordtinuviel

lordtinuviel

    Neowinian

  • Joined: 17-January 04
  • Location: Puerto Rico

Posted 19 July 2010 - 04:52



Menu Buttons (adjust margin-top to fit your Firefox version and/or Windows theme)
Red

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(251,89,65,1), rgba(189,40,25,1), rgba(157,6,0 ,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: -1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(251,89,65,1), rgba(251,55,65,1)) !important;
}

Green
#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(112,178,66,1), rgba(0,147,14,1), rgba(77,154,6,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: -1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(112,178,66,1), rgba(82,178,14,1)) !important;
}

Blue
#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: -1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}

Tabs in Titlebar
#appmenu-button-container{
position: fixed !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 82px !important;
padding-top:1px !important;
}

Toolbar transparency (may want to change padding-top to 2 or 3 pixels if using large buttons)
#navigator-toolbox:not([tabsontop=true]) #nav-bar
{
-moz-box-shadow: threedshadow 0 -1px inset !important;
padding-bottom: 7px !important;
}

#navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,1) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox:not([tabsontop=true]) toolbar:not(#nav-bar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

#navigator-toolbox:not([tabsontop=true]) #PersonalToolbar
{
background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)) !important;
}

#navigator-toolbox:not([tabsontop="true"]) #TabsToolbar
{
padding-top: 2px !important;
}

#navigator-toolbox[tabsontop=true]
{
border-bottom: 1px solid threedshadow !important;
}

#navigator-toolbox[tabsontop=true] #TabsToolbar
{
-moz-box-shadow: inset threedshadow 0px -1px !important;
}

#navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
background-color: rgba(223,233,245,.6) !important;
}

#main-window:not([sizemode="maximized"]) #navigator-toolbox[tabsontop=true] toolbar:not(#TabsToolbar):not(#toolbar-menubar)
{
border-left: 1px solid threedshadow !important;
border-right: 1px solid threedshadow !important;
}

#navigator-toolbox[tabsontop=true] #nav-bar
{
padding-top: 1px !important;
padding-bottom: 0px !important;
background: -moz-linear-gradient(top, rgba(242,246,251,1), rgba(255,255,255,.0)) !important;
}

.tabbrowser-tab[selected=true]
{
font-weight: bold !important;
}

Remove RSS from address bar
/* Remove live feed icon in Address url toolbar */

#feed-button 
{
 display: none !important;
}

Hide bookmarks "star" button from address bar
toolbar #star-button{
display:none !important;
}

Remove back button dropmarker
#back-forward-dropmarker { display: none !important; }

Hide favicons in bookmarks toolbar
/* Hide bookmark icons in the Personal Toolbar */
toolbarbutton.bookmark-item > .toolbarbutton-icon {
display: none; }

Or, alternatively, hide bookmark labels in bookmarks toolbar (probably shouldn't be used in conjunction with hiding favicons)
@-moz-document url-prefix('chrome://') {
toolbarbutton.bookmark-item > label[class="toolbarbutton-text"]:not([value="Linux"]),
toolbarbutton.bookmark-item .toolbarbutton-menu-dropmarker { display: none !important; }
}

Fix tab overlap when tabs on top
#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 105px !important;
}

#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 105px !important;
}

Combine stop/reload buttons
#stop-button[disabled="true"] { display:none; } 
#stop-button:not([disabled]) + #reload-button { display:none; }

Home button as app tab (if you're using nightlies, not recommended for beta 1)
#TabsToolbar > #home-button {
-moz-appearance: none !important;
background: transparent -moz-linear-gradient(left center , transparent, transparent 1px, rgba(128, 128, 128, 0.1) 1px, rgba(128, 128, 128, 0.1)) repeat scroll -6px 0 !important;
background-clip: border-box !important;
background-origin: padding-box !important;
background-size: 200% auto !important;
margin: 0 !important;
padding: 0 1px !important;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 3 5 3 6 / 3px 5px 3px 6px !important;
-moz-border-radius: 6px 4px 0 0 !important;
margin-left: 3px !important;
}

#TabsToolbar > #home-button:hover {
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}

#TabsToolbar > #home-button > .toolbarbutton-icon {
margin-top: -1px !important;
margin-bottom: -1px !important;
}

Whew, I think I got all of them. Some of them are really old, but maybe people will find it convenient that I reposted them instead of making them search for them.

Much thanks to Unrealistic for posting the hide bookmarks button; I've been waiting forever for somebody to share that. I won't repost that script here since it's only a few posts back.



In "Hide favicons in bookmarks toolbar" how you made the line " | " to separate the boormarks

#20 Darrian

Darrian

    The Apathetic

  • Tech Issues Solved: 1
  • Joined: 22-October 01

Posted 19 July 2010 - 05:05

In "Hide favicons in bookmarks toolbar" how you made the line " | " to separate the boormarks

I added a separator between each bookmark item.

I "just" changed that, though, so that they're bullets, instead. To do that I made a new bookmark with the name of • (and a url of wherever, it doesn't even have to be a real address, but I put in my fast dial home page), copied it, and pasted it between each bookmark item. I think it looks slicker now. Either way, though, there's no css involved in that, it's easy.20100718bookmarks.PNG

#21 +Brando212

Brando212

    Neowinian Senior

  • Tech Issues Solved: 10
  • Joined: 15-April 10
  • Location: Omaha, NE
  • OS: OS X Mavricks, Windows 7/8.1 Pro
  • Phone: Sony Xperia ZL, Nokia Lumia 925

Posted 19 July 2010 - 05:05

Add this:

#navigator-toolbox[tabsontop="true"] #TabsToolbar {
  padding-top: 1px !important;
}


thank you

#22 Darrian

Darrian

    The Apathetic

  • Tech Issues Solved: 1
  • Joined: 22-October 01

Posted 19 July 2010 - 05:11

I was bored again, so I just made a pink menu button for any ladies daring enough to try a beta browser (or anyone who might have a preference for pink).
20100718pink.PNG
#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(255,177,214,1), rgba(255,165,206,1), rgba(247,124,179 ,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: -1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(256,192,220,1), rgba(255,140,195,1)) !important;
}


#23 OP Steven P.

Steven P.

    aka Neobond

  • Tech Issues Solved: 61
  • Joined: 09-July 01
  • Location: Neowin HQ

Posted 19 July 2010 - 08:24

I installed Minefield (nightly) so app tabs and the home button works again, but now the button says Minefield instead of Firefox, anyway to fix this?

I'm using Darrians blue button script:

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: 1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}

Among others :p

And how did you get the address bar and search combined? It's a shame Firefox doesn't support searching from the address bar :/

#24 Unrealistic

Unrealistic

    Laughter is all we have.

  • Tech Issues Solved: 1
  • Joined: 11-January 09

Posted 19 July 2010 - 08:33

Neobond: Get the Add-on "Omnibar" for the combined address bar. :)

#25 OP Steven P.

Steven P.

    aka Neobond

  • Tech Issues Solved: 61
  • Joined: 09-July 01
  • Location: Neowin HQ

Posted 19 July 2010 - 08:41

Neobond: Get the Add-on "Omnibar" for the combined address bar. :)

Cheers (Y)

#26 Darrian

Darrian

    The Apathetic

  • Tech Issues Solved: 1
  • Joined: 22-October 01

Posted 19 July 2010 - 08:53

Should have been posted above, guess I missed one.

Change menu button text (from Minefield to Firefox or whatever you want to edit it to say)
#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Firefox" !important; }


#27 OP Steven P.

Steven P.

    aka Neobond

  • Tech Issues Solved: 61
  • Joined: 09-July 01
  • Location: Neowin HQ

Posted 19 July 2010 - 09:11

Thanks

#28 Darrian

Darrian

    The Apathetic

  • Tech Issues Solved: 1
  • Joined: 22-October 01

Posted 19 July 2010 - 09:31

NP. Also, I took the liberty of cleaning up your toolbar code, too, since it's not using the aqua elements anymore; I was toying around with a red one. (This is with the blue gradient, though)
#main-window #navigator-toolbox #PersonalToolbar
{
border-top: 0 none !important;
-moz-appearance: none !important;
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
padding: 0px 0px 0px 0px !important;
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton
{
padding: 0 5px !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton > label
{
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu > label
{
color: white !important;
}


#29 +SoapyHamHocks

SoapyHamHocks

    Neowinian Senior

  • Joined: 06-March 04

Posted 19 July 2010 - 09:37

NP. Also, I took the liberty of cleaning up your toolbar code, too, since it's not using the aqua elements anymore; I was toying around with a red one. (This is with the blue gradient, though)


Here even cleaner ;)

#PersonalToolbar {
  border-top: 0 !important;
  -moz-appearance: none !important;
  background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
  padding: 0 !important;
}

#PersonalToolbar .bookmark-item:not(menuitem){
  color: white !important;
  padding: 0 5px !important;
}


#30 OP Steven P.

Steven P.

    aka Neobond

  • Tech Issues Solved: 61
  • Joined: 09-July 01
  • Location: Neowin HQ

Posted 19 July 2010 - 09:50

Here even cleaner ;)

#PersonalToolbar {
  border-top: 0 !important;
  -moz-appearance: none !important;
  background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
  padding: 0 !important;
}

#PersonalToolbar .bookmark-item:not(menuitem){
  color: white !important;
  padding: 0 5px !important;
}

Ohh thanks, I'm a bit of a n00b with stylish :p



Click here to login or here to register to remove this ad, it's free!