Share your custom Firefox/Minefield 4 stylish scripts

[vajlent]

This will autohide the add-on bar

Firefox 4 Autohide Add-on Bar

Make it compatible with Soapy's "new" addonbar, if it's possible.?!

Here is a quick style I created to improve the look of the Addonbar.

http://userstyles.org/styles/37366

Great!!!

[mNiosu]

@ foxxyn8 & @SoapyHamHocks

Thank you both for your help!

[Steven P. Administrators]

@ foxxyn8 & @SoapyHamHocks

Thank you both for your help!

+1 from me too :D

[mNiosu]

Make it compatible with Soapy's "new" addonbar, if it's possible.?!

Yeah, it needs some work. A style to combine the 2 and fix the few issues the "better add-on bar" has (see the discussion there) would be really great. I'll try to look in to it myself when I'll have a little time ...

[+Gary7 Subscriber²]

Here is a quick style I created to improve the look of the Addonbar.

http://userstyles.org/styles/37366

#addon-bar > #status-bar {
{ -moz-appearance: -moz-win-glass !important; 
background: none !important;

  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 0 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;
  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;
}

{ -moz-appearance: -moz-win-glass !important;

background: none !important;

I hope you don't mind soapy but I added the above to make it glass.

[vajlent]

#addon-bar > #status-bar {
{ -moz-appearance: -moz-win-glass !important; 
background: none !important;

 margin: 0 !important;
 padding: 0 2px 0 2px;
 border-radius: 4px 0 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;
 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;
}

I hope you don't mind soapy but I added the above to make it glass.

It doesn't do anything?

[Kyang]

This is how Firefox should look like honestly. Get rid of extra space and the stupid menu button.

The menu button is one thing, but the extra space is needed to move the window around when the tab bar is full. It can just disappear when the window is maximized like in Chrome/Opera. Actually, the way Opera leaves the menu button on the side and just shifts the tabs over is how I have Firefox set to work too.

[+Gary7 Subscriber²]

It doesn't do anything?

It works for me as you can see.

[Steven P. Administrators]

Well I have a totally different problem..

This happens:

My Add-on bar code

#addon-bar{margin-top:-21px !important;} 

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

#addon-bar > #status-bar {
margin: 0 !important;
padding: 0 2px 0 2px;
border-radius: 4px 0 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;
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;
}

[panoc]

Well I have a totally different problem..

This happens:

My Add-on bar code

#addon-bar{margin-top:-21px !important;} 

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

#addon-bar > #status-bar {
margin: 0 !important;
padding: 0 2px 0 2px;
border-radius: 4px 0 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;
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;
}

use this code

#addon-bar {

position: fixed;

bottom: 1px;

right: 1px;

border: 0 !important;

-moz-appearance: none !important;

}

#main-window[sizemode=maximized] #addon-bar {

bottom: 0;

right: 0;

}

#addon-bar > #status-bar { -moz-appearance: -moz-win-glass !important;

background: none !important;

}

[Steven P. Administrators]

use this code

#addon-bar {

position: fixed;

bottom: 1px;

right: 1px;

border: 0 !important;

-moz-appearance: none !important;

}

#main-window[sizemode=maximized] #addon-bar {

bottom: 0;

right: 0;

}

#addon-bar > #status-bar { -moz-appearance: -moz-win-glass !important;

background: none !important;

}

Oh thanks, that works.. will let you know if I get that line again, although the mini version looks better (imo).

[panoc]

Oh thanks, that works.. will let you know if I get that line again, although the mini version looks better (imo).

this is for mini version and transparent

#addon-bar {

position: fixed;

bottom: 1px;

right: 1px;

border: 0 !important;

-moz-appearance: none !important;

}

#main-window[sizemode=maximized] #addon-bar {

bottom: 0;

right: 0;

}

#addon-bar > #status-bar {

-moz-appearance: -moz-win-glass !important;

background: none !important;

margin: 0 !important;

padding: 0 2px 0 2px;

border-radius: 4px 0 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;

}

[Steven P. Administrators]

What if I wanted a cool background? :p

[panoc]

like what ?

i assume you can add it :)

[Steven P. Administrators]

Well when I did I had a line lol

[mNiosu]

this is for mini version and transparent

#addon-bar {

position: fixed;

bottom: 1px;

right: 1px;

border: 0 !important;

-moz-appearance: none !important;

}

#main-window[sizemode=maximized] #addon-bar {

bottom: 0;

right: 0;

}

#addon-bar > #status-bar {

-moz-appearance: -moz-win-glass !important;

background: none !important;

margin: 0 !important;

padding: 0 2px 0 2px;

border-radius: 4px 0 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;

}

That "position: fixed;" line brakes the add-on's icons (the icons don't change when they should)! Any other way to do it or some way to fix it?

[SoapyHamHocks Member]

That "position: fixed;" line brakes the add-on's icons (the icons don't change when they should)! Any other way to do it or some way to fix it?

They do change if you unmaximize/remaximize the window, a bit odd I know. I'll see if I can come up with a fix.

[foxxyn8]

That "position: fixed;" line brakes the add-on's icons (the icons don't change when they should)! Any other way to do it or some way to fix it?

streetwolf posted a fix for it on the USO forum: http://forum.userstyles.org/comments.php?DiscussionID=22315

#addon-bar{margin-top:-23px !important;} /* 23px works for me. Might need to be changed for others. /*

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

#addon-bar > #status-bar {
margin: 0 !important;
padding: 0 2px 0 2px;
border-radius: 4px 0 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;
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;
} 

[mNiosu]

@foxxyn8

I actually tried it but it looked very bad for me. I was at work at hat time and didn't have tome to look into it. Seems the problem was that "23" value (as he said it might be). Changed it to 24 and seems to work and look good know! :) Thanks for reminding me of tha

LE: Seems it doesn't look that good, I have that line that Neobond had ...

LE2: Nevermind, seems to go away after restarted Firefox...

[panoc]

streetwolf posted a fix for it on the USO forum: http://forum.userstyles.org/comments.php?DiscussionID=22315

#addon-bar{margin-top:-23px !important;} /* 23px works for me. Might need to be changed for others. /*


#addon-bar > #status-bar {
margin: 0 !important;
padding: 0 2px 0 2px;
border-radius: 4px 0 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;
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;
} 

it helped me too with the transparent theme

#addon-bar{margin-top:-23px !important;
bottom: 1px;
margin-right: 20px !important;
border: 0 !important;
-moz-appearance: none !important;}

#addon-bar > #status-bar {
-moz-appearance: -moz-win-glass !important;
background: none !important;
margin: 0 !important;
padding: 0 2px 0 2px;
border-radius: 4px 0 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;
}

the bar moved 20px to the left in order to have access in the scroll arrow

[dert07]

I added a transition to the addon-bar so that it slides in from the bottom once you hover an area the height of the bar itself in the lower right corner.

It is based on SoapyHamHock's code so the icons don't update instantly but once the bar hides and slides up again they change, so it might be something

of a good solution to combine the auto-hide and the new styling.

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

#addon-bar:hover {
 bottom: 1px;
}

#main-window[sizemode="maximized"] #addon-bar {
  bottom: -22px;
  right: 0;
  -moz-transition: bottom .5s;
}

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

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 0 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;
  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;
}

[mNiosu]

I added a transition to the addon-bar so that it slides in from the bottom once you hover an area the height of the bar itself in the lower right corner.

It is based on SoapyHamHock's code so the icons don't update instantly but once the bar hides and slides up again they change, so it might be something

of a good solution to combine the auto-hide and the new styling.

Wow! That is really nice! Good job!

I have only one suggestion: we should be able to make it show under the scroll bar and add padding-right to "#addon-bar > #status-bar" so scroll bar doesn't cover any icons (foxxyn8 should know what I'm talking about :) ). This way the bottom are of the the scroll bar will be always accessible. But what is the identifier for the right scroll bar? Also is there a way to add delay to the add-on bar sliding up ?

[panoc]

try with

right: 20px;

[mNiosu]

try with

right: 20px;

I know how to add padding but I need the identifier for the scroll-bar to try to bring it on top, otherwise the padding is useless... And also adding delay would be a nice touch. For now my current solution for making the down arrow accessible is editing "padding-top: 22px !important;" to 3px so has a smaller reaction area ...

[panoc]

I know how to add padding but I need the identifier for the scroll-bar to try to bring it on top, otherwise the padding is useless... And also adding delay would be a nice touch. For now my current solution for making the down arrow accessible is editing "padding-top: 22px !important;" to 3px so has a smaller reaction area ...

well with right: 17px;

it moves left to the scroll bar without interfering with it.