2390 replies to this topic 12 votes

[Inklin]

Unrealistic, on 19 July 2010 - 03:42, said:

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

[+Brando212]

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?

[+SoapyHamHocks]

Brando212, on 19 July 2010 - 04:32, said:

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;
}

[lordtinuviel]

Darrian, on 19 July 2010 - 03:38, said:

20100728minefield.png

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

[Darrian]

lordtinuviel, on 19 July 2010 - 04:52, said:

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.

[+Brando212]

SoapyHamHocks, on 19 July 2010 - 04:50, said:

Add this:

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

thank you

[Darrian]

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).

#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;
}

[Neobond]

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:

Quote

#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

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

[Unrealistic]

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

[Neobond]

Unrealistic, on 19 July 2010 - 08:33, said:

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

Cheers

[Darrian]

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; }

[Neobond]

Thanks

[Darrian]

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;
}

[+SoapyHamHocks]

Darrian, on 19 July 2010 - 09:31, said:

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;
}

[Neobond]

SoapyHamHocks, on 19 July 2010 - 09:37, said:

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