Share your custom Firefox/Minefield 4 stylish scripts

[foxxyn8]

@ dert07 i made some modification to your style according to foxxyn8's suggestion

#addon-bar {
  position: fixed;
  bottom: -21px;
  right: 20px;
  border: 0 !important;
  -moz-appearance: none !important;
  -moz-transition: bottom .5s 1s ease-in;
  /*padding-top: 22px !important;*/
}

#browser-bottombox {
position: fixed;
}

#addon-bar:hover {
 bottom: 0;
 -moz-transition: bottom .5s .4s ease-out;
}

#main-window[sizemode="maximized"] #addon-bar {
  right: 20;
}

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 4px 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgb(207, 219, 236) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

with the above code addon bar does not hover when you scroll horizontal.

can you try this and tell if it works ?

It works BUT,

You should keep the #addon-bar padding. That's basically the hot area for the hover. Without it you have to go all the way to the bottom of the window to make the addon bar appear.

This:

#main-window[sizemode="maximized"] #addon-bar {
  right: 20;
}

should be :

#main-window[sizemode="maximized"] #addon-bar {
  right: 20px;
}

but you really don't need it at all since you've already set that exact same position here:

#addon-bar {
  position: fixed;
  bottom: -21px;
  right: 20px;
  border: 0 !important;
  -moz-appearance: none !important;
  -moz-transition: bottom .5s 1s ease-in;
  /*padding-top: 22px !important;*/
}

And here's some findbar styling (it's what I use feel free to modify it):

#FindToolbar .findbar-container {
  margin-bottom: -4px !important;
  border-radius: 0 4px 0 0;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgba(0,0,0,.8) !important;
  box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important; 
}

and the findbar textbox :

#FindToolbar  .findbar-textbox {
width:250px!important;  
-moz-appearance:none !important;
background:rgba(0,0,0,.9) !important; 
border:1px solid #444 !important;
-moz-border-radius: 4px !important; 
font-family:tahoma !important; 
font-weight:bold !important;
color:#eee !important; 
}

[mNiosu]

@foxxyn8

Thanks for that! This is kind of what I want to get:

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  border-radius: 4px 4px 0 0;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important; 
}

But how do I get rid of the original background?

[foxxyn8]

@foxxyn8

Thanks for that! This is kind of what I want to get:

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  border-radius: 4px 4px 0 0;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important; 
}

But how do I get rid of the original background?

#FindToolbar {
  -moz-appearance: none !important;
  margin-top:-25px !important;
}

if that doesn't do it then it's this

#browser-bottombox {
background: none !important; 
}

I'm pretty sure it's the second one. I use that first one for a different style.

Edited September 29, 2010 by foxxyn8

[mNiosu]

I still get that stupid border on top with any of the codes. Is driving me mad! :angry:

[foxxyn8]

I still get that stupid border on top with any of the codes. Is driving me mad! :angry:

try this:

#FindToolbar {
   border:none !important;
}

and you may need this:

.chromeclass-toolbar {
  border:none !important;
}

[mNiosu]

try this:

#FindToolbar {
   border:none !important;
}

and you may need this:

.chromeclass-toolbar {
  border:none !important;
}

Great, thanks! First one does the job, what does the second one suppose to do ?

[foxxyn8]

Great, thanks! First one does the job, what does the second one suppose to do ?

The second one will remove the border of any toolbar in that class. I use it in my main theme cause it's faster than declaring every toolbar.

And I hate borders. ;)

[mNiosu]

Can't seem to manage to reduce the right padding (reduce that blank space in the right of "mach case"). Tried editing margin and padding but doesn't seem to work...

[foxxyn8]

It's not empty. That's where the status icon is located. Just type some garbage into the findbox and you'll see what I'm talking about.

[foxxyn8]

Can't seem to manage to reduce the right padding (reduce that blank space in the right of "mach case"). Tried editing margin and padding but doesn't seem to work...

This will hide that empty space until there's something to show:

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {
display:none !important;
}

[mNiosu]

This will hide that empty space until there's something to show:

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {
display:none !important;
}

Great, thanks a lot! What is the identifier for the status text in the find-bar? I want to add some padding to the right.

[mNiosu]

Sorry for double post.

Do not mind my last request, it isn't that important...

Here is a version of the style I had in mind for the find-bar:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  border-radius: 4px 4px 0 0;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgb(207, 219, 236) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {
display:none !important;
}

They only work and use the color theme of a little modified version of SoapyHamHocks/dert07 style:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#addon-bar {
  position: fixed;
  bottom: -22px;
  right: 1px;
  margin-right: 20px !important;
  border: 0 !important;
  -moz-appearance: none !important;
  -moz-transition: bottom .7s 2s ease-in;
  padding-top: 22px !important;
}

#browser-bottombox {
  position: fixed;
  bottom: 0px;
}

#addon-bar:hover {
 bottom: 0;
 -moz-transition: bottom .7s 1s ease-out;
}

#main-window[sizemode="maximized"] #addon-bar {
  right: 0;
}

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 4px 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  background-color: rgb(207, 219, 236) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgb(207,220,236)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5) inset;
}

Feel free to edit the background color and borders/margins to your liking ... Thanks everybody for their ideas !

[foxxyn8]

Great, thanks a lot! What is the identifier for the status text in the find-bar? I want to add some padding to the right.

The class for the status labels is .findbar-find-status You can use it to change its font properties, but it you can't add padding to it. If you want to add padding to the right, add it to #FindToolbar .findbar-container

[mNiosu]

I knew about the second think you said but it also adds padding to the find-bar when no status is shown and I want to keep it as short as possible. Is not such a big deal anyway... Thanks for the help!

[dert07]

Ok, I put all tweaks together into Soapy's and my style and adjusted it a bit to fit our initial look. Special thanks goes to mNiosu and foxxyn8 for their great work. We would like to publish the style on our blog if you are ok with that.

I added a transition for the opacity so the addonbar fades in and out while sliding which gives it an even better effect imo. Feel free to edit and tweak it to your liking.

The style is on my Dropbox since it's a bit longer now and I don't want to spam the forum: https://dl.dropbox.com/u/4681041/Firefox%204%20Better%20Addonbar.txt

I also created a style from all my ministyles I've been using for the last weeks, in which I tried to fix many of the bugs the UX Team posted in their Theme Timeline. It includes a thinner titlebar, rounded top corners for the nav-bar, a border around the whole content area and Panorama, removed back/forward dropmarker, mockup styled dropmarkers for toolbarbuttons and the "list all tabs" button, the new Addonbar with the Findbar fix and the tabs switch to the titlebar when Firefox is maximized, as in Google Chrome. The last one isn't in the Timeline but on one of the UX Team's blogs they said it is at least considered to work this way.

What's still missing is the new style for the dropmarker in the urlbar and the bookmarkstar icon. If you find other things that need to be fixed just tell me. I'll try to update the style with coming nightlies: https://dl.dropbox.com/u/4681041/Firefox%204.0%20Theme%20bugfixes.txt

[mNiosu]

I have a new problem:

For some reason the "smart bookmarks bar" add-on doesn't seem to work when installed on a fresh profile so I thought I should be able to obtain the effect thing with css codes. So I created this simple code in order hide bookmark icons labels and reduce the space between icons:

#PersonalToolbar label {display: none !important;}

#PersonalToolbar toolbarbutton image {margin: 0 !important;}

The problem is that in order to obtain the exact effects of the add-on I want to make the label to show up sliding to the right for an icon when I'm hovering that particular icon not just disable it for good, but have no idea how to do that. Anyone can help ?

[foxxyn8]

I knew about the second think you said but it also adds padding to the find-bar when no status is shown and I want to keep it as short as possible. Is not such a big deal anyway... Thanks for the help!

...then this is what you want

#FindToolbar .find-status-icon[status="notfound"] + .findbar-find-status,
#FindToolbar .find-status-icon[status="wrapped"] + .findbar-find-status {
  padding-right:5px !important;
}

#FindToolbar .find-status-icon[status="notfound"],
#FindToolbar .find-status-icon[status="wrapped"] {
  margin-left: -1px !important;
}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) + .findbar-find-status {
  display:none !important;
}

[mNiosu]

@foxxyn8

Hey, that really wasn't such a big problem, you shouldn't have bothered that much for me. But now that you did, thanks a lot, that's exactly what I wanted! You're the best! :)

@dert07

That looks really good. I wanted to upload my find-bar style on userstyles and link it to your/Soapy's add-on bar style since they only work well together but had second thoughts first because most of the credits go to foxxyn8 and second because I thought I might still be able to improve it.

If you you want I think you and SoapyHamHocks should combine the 2 styles and update your style both on user-styles and on your blog, is fine by me ...

[dert07]

@mNiosu

Thanks for letting us post it. We'll use the my latest style which already combines the two. What do you think of the bugfixes style?

For your prolem with the #PersonalToolbar:

#PersonalToolbar .bookmark-item {
 max-width: 22px !important;
}

#PersonalToolbar .bookmark-item:hover {
 max-width: none !important;
}

Maybe you have to adjust the padding or margin but at least it works.

[mNiosu]

@mNiosu

Thanks for letting us post it. We'll use the my latest style which already combines the two. What do you think of the bugfixes style?

For your prolem with the #PersonalToolbar:

Maybe you have to adjust the padding or margin but at least it works.

Hey thanks for the code, that is a really simple and smart solution for my desired effect (and I was using an add-on for that :laugh: )... You should also add the new code foxxyn8 posted above, it makes the find-bar perfect in my opinion.

About your "bugfixes style": I've been following this two threads for some months now (since beta1) so I have my own list of styles (15 or so I use now and much more collected) so I haven't looked on your list. It's a problem of taste and personal style here, so if you really want to create a "bugfixes list" you should make a detailed one for each style and with print-screens so people can choose what they want...

LE: This is kind of the code I was looking for:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#PersonalToolbar .bookmark-item {
 max-width: 22px !important;
}

#PersonalToolbar .bookmark-item:hover {
 max-width: none !important;
}

#PersonalToolbar {
margin: -4px 0 -2px 2px !important;

#PersonalToolbar image {margin: 0 !important;}
}

Having one problem thought (a problem that the add-on had too): My personal-bar is almost full of icons and when I hover one and the label slides it forces that far right icons out of the window and they don't come back until I minimize/maximize. Do you think I can fix this effect somehow?

[dert07]

@mNiosu

Ok, I added foxxyn8's fixes, Soapy will update the style on the blog later.

Hmm I'm more a fan of one single style but I understand that it isn't that useful for everyone. I'll see if I can put some of the elements in seperate styles so everyone can pick what they need.

[foxxyn8]

Ok, I put all tweaks together into Soapy's and my style and adjusted it a bit to fit our initial look. Special thanks goes to mNiosu and foxxyn8 for their great work. We would like to publish the style on our blog if you are ok with that.

I added a transition for the opacity so the addonbar fades in and out while sliding which gives it an even better effect imo. Feel free to edit and tweak it to your liking.

The style is on my Dropbox since it's a bit longer now and I don't want to spam the forum: https://dl.dropbox.com/u/4681041/Firefox%204%20Better%20Addonbar.txt

I also created a style from all my ministyles I've been using for the last weeks, in which I tried to fix many of the bugs the UX Team posted in their Theme Timeline. It includes a thinner titlebar, rounded top corners for the nav-bar, a border around the whole content area and Panorama, removed back/forward dropmarker, mockup styled dropmarkers for toolbarbuttons and the "list all tabs" button, the new Addonbar with the Findbar fix and the tabs switch to the titlebar when Firefox is maximized, as in Google Chrome. The last one isn't in the Timeline but on one of the UX Team's blogs they said it is at least considered to work this way.

What's still missing is the new style for the dropmarker in the urlbar and the bookmarkstar icon. If you find other things that need to be fixed just tell me. I'll try to update the style with coming nightlies: https://dl.dropbox.com/u/4681041/Firefox%204.0%20Theme%20bugfixes.txt

That's cool with me. :punk:

[panoc]

can anyone tell me how to get rid of this border ? (see pics)

this the code

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {display:none !important;}

#addon-bar > #status-bar {
background: none !important; 
}

[mNiosu]

@dert07

Have a look at the problem I wrote in my previous post. And I add another one (not a problem for me but I was thinking to upload the style on user-styles and it might be a problem for others): how can I force labels to always show for folders in the personal-bar ?

BTW is it ok with you if I upload this style on user-styles or it is already there (or maybe you should do it...) ? :D I mean there are a lot of people using that add-on for this style and I just don't see the point of doing it any more and this might help them...

LE: solved my second problem on my own. :)

Here is the new code:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#PersonalToolbar .bookmark-item:not([container="true"]) {max-width: 22px !important;}

#PersonalToolbar .bookmark-item:hover {max-width: none !important;}

#PersonalToolbar {margin: -4px 0 -2px 2px !important;}

#PersonalToolbar  image {margin: 0 !important;}

The problem with the far right icons not coming back is still there thought...

[foxxyn8]

can anyone tell me how to get rid of this border ? (see pics)

this the code

#FindToolbar .findbar-container {
  margin-bottom: -1px !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
}

#browser-bottombox {background: none !important;}

#FindToolbar {border:none !important;}

#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) {display:none !important;}

#addon-bar > #status-bar {
background: none !important; 
}

probably this :

#addon-bar .toolbar-primary.chromeclass-toolbar {
border:none !important;
}

@mNiosu

Added :not() selectors to keep it from affecting the dropdown menu menuitems

#PersonalToolbar .bookmark-item:not(.menu-iconic):not(menuitem) {
 max-width: 22px !important;
}

#PersonalToolbar .bookmark-item:hover:not(.menu-iconic):not(menuitem) {
 max-width: none !important;
}

#PersonalToolbar {
margin: -4px 0 -2px 2px !important;
}

#PersonalToolbar image {margin: 0 !important;}