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

    • This new cabinet design lets you run AMD, Intel, and Nvidia PCs inside one case

      By ChickyBoom · Posted

      Guess it's one of those things best used by devs to thoroughly test stuff.
    • Hi my name is Olivia and I am from Australia

      By WITHOUT-ME · Posted

      is it all upside down there? traffic lights reverted too?
    • I Can't Wrap My Head Around This Number - Google to buy computing from SpaceX at $920 million per month

      By WITHOUT-ME · Posted

      just 0.035% of their budget
    • Bluesky COO warns social media regulations could destroy competition from small startups

      By zikalify · Posted

      Bluesky COO warns social media regulations could destroy competition from small startups by Paul Hill Fears that increasing government control of social media risks regulatory capture by the biggest social media firms were raised again recently. Bluesky’s chief operating officer said in an interview that social media bans for children and tighter regulations for social media firms risk creating a world where there are only a few social media platforms run by companies with the deepest pockets. Regulations on social media firms have been very lax since they appeared for mainstream users in the 2000’s. This gave Meta, Snapchat, and Google time to build up their user bases and get entrenched, with Meta being the most successful. Now that Meta has succeeded, it has been attempting regulatory capture. By pushing for more regulations of social media, Meta hopes to make it more difficult for rivals to challenge it. For its part, it doesn’t need to worry about the cost of regulation because it has a lot of money to spend, whereas startups do not. Speaking to CNBC, Rose Wang, Bluesky’s chief operating officer, said: “I support the protection and the safety of youth, the question that we have then is at what cost, because essentially what I’m scared of is in the long term, we’re headed to a world where there’s about three to five platforms, and extreme heavy regulation of those platforms, and basically the whole compliance teams of these platforms are 10 times the size of our entire team. So, basically, we’re living in a world where it’s almost impossible for smaller entrants to come in and build healthier spaces. These platforms have led to a place where the bottom line is the thing that drives what they do... so I understand why governments have to step in and regulate, because the platforms have done nothing right.” She said that while she is not against regulation, there needs to be more channels between the small to mid-sized players and regulators to help protect them. She says that big tech players, on the other hand, “who we know are circumventing regulation,” need to be regulated. Essentially, the Bluesky position is one of nuance, rather than absolutes. While Bluesky’s proposal may preserve competition in the social media space, it still doesn’t address the massive privacy implications these age verification measures introduce, such as handing over sensitive identity documents to access age-gated content. Source: CNBC
    • Politically funny images of the World

      By Michael Scrip · Posted

  • Recent Achievements

    • One Month Later
      DJC50PLUS earned a badge
      One Month Later
    • Week One Done
      DJC50PLUS earned a badge
      Week One Done
    • 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

  • Popular Contributors

    1. 1
      +primortal
      493
    2. 2
      PsYcHoKiLLa
      249
    3. 3
      Steven P.
      71
    4. 4
      +Edouard
      70
    5. 5
      ATLien_0
      69
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!