Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Collaborator

vajlent

Posted
Posted

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.

post-49492-12855401344606.png

http://userstyles.org/styles/37366

Great!!!

Enthusiast

mNiosu

Posted
Posted

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

Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

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

post-49492-12855401344606.png

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.

Collaborator

vajlent

Posted
Posted 

#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?

Mentor

Kyang

Posted
Posted

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.

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

Well I have a totally different problem..

This happens:

post-2-12855982554273.png

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

Apprentice

panoc

Posted
Posted

Well I have a totally different problem..

This happens:

post-2-12855982554273.png

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;

}

Grand Master

Steven P. Administrators

Posted
  • Author
  • Administrators
Posted

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

Apprentice

panoc

Posted
Posted

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;

}

Enthusiast

mNiosu

Posted
Posted

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?

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

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.

Community Regular

foxxyn8

Posted
Posted

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

Enthusiast

mNiosu

Posted
Posted

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

Apprentice

panoc

Posted
Posted

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

Explorer

dert07

Posted
Posted

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

Enthusiast

mNiosu

Posted
Posted

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 ?

Enthusiast

mNiosu

Posted
Posted

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

Apprentice

panoc

Posted
Posted

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.

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • AMD 9070XT

      By cooky560 · Posted

      It's nearly time to replace my aging Founders Edition 3080, it doesn't OC as nicely as it used to and it's running around 10c warmer than it did when I first bought it.  I don't have budget for much more than what I spent on the 3080 and locally, that means the best GPU I can manage is a 9070XT. On this basis I have a few questions: 1. At present I don't use ray tracing, if this was to change, would this GPU be an issue? 2. How does it compare on a performance basis? 3. Are the drivers worse or better than those for nVidia? 4. Linux support, is it there? 5. Anything else I should be aware of if I were to make this change? 6. Is it a good idea or shall I try and keep the 3080 a little longer.
    • Neowin's 2026 Desktop Thread

      By cooky560 · Posted

      What OS is that? It looks a bit like Mac OS but the command line suggests it isn't, either way I like it!
    • Windows Live Mail : If someone was malicious

      By cooky560 · Posted

      Outlook classic is inherently better than new outlook, for a number of reasons. That said, if the only reason people need office is to read email, they should just use thunderbird.
    • Windows 11 in 2026: Are you fully on board, or still holding back?

      By cooky560 · Posted

      Windows 11 is a big thumbs down from me. I used for a period of a few days while it was in insider and windows 10 was the main OS, and realised it wasn't for me. I am still waiting for Windows to be tolerable again, a shame as at one point I was very pro Microsoft.  
    • Classic Outlook vs New Outlook — Which one do you prefer and why?

      By cooky560 · Posted

      Classic outlook, not only does it have a much fuller feature set, it doesn't include Microsoft attempting to sync my emails from my servers to theirs. If classic outlook is ever removed from office, and the version I paid for in 2021 stops working for some reason, I'll use Thunderbird.

  • Recent Achievements

    • Week One Done
      Windows Guy earned a badge
      Week One Done
    • Dedicated
      Mark Spruce earned a badge
      Dedicated
    • Collaborator
      conkir earned a badge
      Collaborator
    • Rising Star
      olavinto went up a rank
      Rising Star
    • One Month Later
      lamborghiniv10 earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      479
    2. 2
      PsYcHoKiLLa
      250
    3. 3
      Steven P.
      74
    4. 4
      FloatingFatMan
      69
    5. 5
      +Edouard
      69
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!