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.