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

    • Ninja Theory's new Hellblade game is action-focused and set in Purgatory

      By LoneWolfSL · Posted

      Ninja Theory's new Hellblade game is action-focused and set in Purgatory by Pulasthi Ariyasinghe Ninja Thery has been building its award-winning Hellblade series since 2017, delivering Senua's Sacrifice and Senua's Saga since then. Today at the 2026 Xbox Games Showcase, the studio had a brand-new installment announcement featuring Senua again, but this time, she is in a version of purgatory, and the focus is on the action. Simply named Senua, this new entry is described as a "full-on action-adventure" experience, delivering an expanded focus on combat, puzzle-solving, and freedom of exploration. The developer says that it is keeping the same high production values and storytelling features of the previous games while giving what players have been asking for in the gameplay department. The entirety of Ninja Theory is now working on Senua, giving the project much more manpower than ever before, while also letting the team draw on its action roots from Devil May Cry and prior titles. However, the studio also confirmed that its previously announced Project Mara horror experience is no longer in development. Alongside snappier traversal moves, Senua will be able to take stealth and direct combat routes. She has access to her own sword, plus any enemy weapons as well, with dual wielding also being an option for most dropped melee swords, axes, and other weapons. Outside of melee combat, Senua will be able to use special abilities that let her alter the reality around her. The world is said to be about twice the size of Hellblade 2. While this won't be an open-world experience, the linear story will let players explore their surroundings further than before. The story of Senua will be set after the events of previous Hellblade titles, with our protagonist being stuck in her own version of Purgatory. The series' well-explored psychosis themes will return as well. "She’s trapped between life and death on a quest to reach the afterlife and be reunited with the ones that she’s loved and lost," adds the studio. "Her belief is that by healing the wounds of her life, she can find the peace that is the key that unlocks the gate to the afterlife." Senua is releasing on Xbox Series X|S, PC, and PlayStation 5 sometime in 2027.
    • Windows 11 gets big performance upgrade, shared audio support, and more in new update

      By mrp04 · Posted

      Windows has had it, it's called camera frame server. I recall when it was first introduced in an early Windows 10 release it caused issues and there was a registry entry to disable it. Seems like they disabled it by default at some point. Windows 11 brought that toggle to the settings app (not just registry) a while ago.
    • 25th anniversary Xbox Series X unveiled with classic translucent green design

      By excalpius · Posted

      Is the hardware updated at all?!
    • Mafia: The Old Country expansion Man of Honor announced, brings back Salieri from original

      By _-Psycho-_ · Posted

      You didn't like Mafia The Definite Edition? As a fan of the first when it came out, I liked that remake.
    • This Corsair Vengeance DDR5-6000 32GB RAM with RGB is a great deal for limited time

      By S.MULLA · Posted

      Brought 96gb kit for that much in early 2025.

  • Recent Achievements

    • Proficient
      Eric Biran went up a rank
      Proficient
    • Dedicated
      Conjor earned a badge
      Dedicated
    • Week One Done
      Windows Guy earned a badge
      Week One Done
    • Dedicated
      Mark Spruce earned a badge
      Dedicated
    • Collaborator
      conkir earned a badge
      Collaborator

  • Popular Contributors

    1. 1
      +primortal
      479
    2. 2
      PsYcHoKiLLa
      243
    3. 3
      Steven P.
      72
    4. 4
      +Edouard
      66
    5. 5
      neufuse
      66
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!