Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Collaborator

DudeBro

Posted
Posted

Try this one. It will hide every trace of those menu items and hide every menu separator.

menuitem[label="Unsorted Bookmarks"] { display: none !important; }
[label="Unsorted Bookmarks"] { display: none !important; }

menuitem[label="Bookmarks Toolbar"] { display: none !important; }
[label="Bookmarks Toolbar"] { display: none !important; }

menuitem + menuseparator { display: none; }
menu + menuseparator { display: none !important; }

Link to comment
Share on other sites
Apprentice

NeoRev

Posted
Posted

Darnit to heck, lol, nothing seems to work on the stupid menubar in OS X!

Edit: I realize I didn't specify that I'm looking to edit the menubar not the icon drop down within firefox navbar.

Link to comment
Share on other sites
Collaborator

DudeBro

Posted
Posted

Hey NeoRev, maybe give this fairly new addon a try UI Eraser. Seems to be able to hide just about everything in the firefox ui. If anything, it can show you the css selector name you need to hide the thing you want. DOM Inspector can do that but I could never figure that out.

But i'm not exactly sure the menubar you're talking about on OS X is even part of firefox browser chrome/skin. So I don't think you can hide it with a css script.

Link to comment
Share on other sites
Experienced

mancode20

Posted
Posted

Is there a code for changing the color of the scroll bar? I would like it to be more visible. Possibly a light blue or navy blue. Even just black would work. I don't mean the entire bar. I just mean the bar marker that scrolls up and down.

Link to comment
Share on other sites
Community Regular

foxxyn8

Posted
Posted

Is there a code for changing the color of the scroll bar? I would like it to be more visible. Possibly a light blue or navy blue. Even just black would work. I don't mean the entire bar. I just mean the bar marker that scrolls up and down.

try this:

scrollbar thumb {
 -moz-appearance: none !important; 
  background: blue !important;
 }

Link to comment
Share on other sites
Experienced

mancode20

Posted
Posted

just replace "blue" with "skyblue".

Should've known it would be that easy. Thanks!! It's a bit greener than I would like. It's more turquoise than a sky blue. Are there any other blue colors? I want it to be like the sky blue from Win7's theme. Like a baby blue or light blue. I'm gonna try one of those and see if they work. I think lightblue is the best I can get it, which is pretty decent.
Link to comment
Share on other sites
Community Regular

foxxyn8

Posted
Posted

Should've known it would be that easy. Thanks!! It's a bit greener than I would like. It's more turquoise than a sky blue. Are there any other blue colors? I want it to be like the sky blue from Win7's theme. Like a baby blue or light blue. I'm gonna try one of those and see if they work. I think lightblue is the best I can get it, which is pretty decent.

Here's a table with the "named" colors:

http://msdn.microsoft.com/en-us/library/aa358800(v=vs.85).aspx

Link to comment
Share on other sites
Grand Master

remixedcat

Posted
Posted

BetaNews Fileforum has a harsh orange BG so I fixed it to a grey one:

Please note:work in progress. if anyone wants to help make it better please let me know!

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("betanews.com") {
body {
background:#333!important;
}

}

if you see little orange things everywhere you can just use ABP to block them for now till I make my own custom images for it to over ride the orange tinted ones.

Link to comment
Share on other sites
Grand Master

remixedcat

Posted
Posted

BetaNews Fileforum has a harsh orange BG so I fixed it to a grey one:

Please note:work in progress. if anyone wants to help make it better please let me know!

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("betanews.com") {
body {
background:#333!important;
}

}

if you see little orange things everywhere you can just use ABP to block them for now till I make my own custom images for it to over ride the orange tinted ones.

now for the header graphic it's got orange around it and here's what I've been trying to do (copied off the site's CSS for that particular logo:

#header {
  background: url("http://i.imgur.com/nY4fD.png") 0 0 no-repeat;
}

but it won't change......

any help on this and it would be most appreciated.

Link to comment
Share on other sites
Community Regular

foxxyn8

Posted
Posted

BetaNews Fileforum has a harsh orange BG so I fixed it to a grey one:

Please note:work in progress. if anyone wants to help make it better please let me know!

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("betanews.com") {
body {
background:#333!important;
}

}

if you see little orange things everywhere you can just use ABP to block them for now till I make my own custom images for it to over ride the orange tinted ones.

now for the header graphic it's got orange around it and here's what I've been trying to do (copied off the site's CSS for that particular logo:

#header {
  background: url("http://i.imgur.com/nY4fD.png") 0 0 no-repeat;
}

but it won't change......

any help on this and it would be most appreciated.

you forgot "!important" to overide the sites default:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("betanews.com") {

body {
background:#333!important;
}

#header {
background: url("http://i.imgur.com/nY4fD.png") 0 0 no-repeat !important;
}

}

Link to comment
Share on other sites
Grand Master

remixedcat

Posted
Posted

Thank you so much!!!!

Now that site is looking better!

I'm in the process of taking care of the rest of the graphics.

Link to comment
Share on other sites
Grand Master

remixedcat

Posted
Posted

corrections released with replaced images:

Looks good so far!!!! way better then the harsh orange!

thanks to foxxyn8 for the little !important; tip!!!

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("betanews.com") {

body {
background:#333!important;
}

#header {
background: url("http://i.imgur.com/nY4fD.png") 0 0 no-repeat !important;
}

#userbox {
  background: url("http://i.imgur.com/LeSiy.png") no-repeat !important;
}

.navbar_topleft {
    background: url("http://i.imgur.com/yTatj.png") 0 0 no-repeat !important;
}

#header_search {
  background: url("http://i.imgur.com/G6L2A.png") 100% 0px no-repeat !important;
}

}

released on : http://userstyles.org/styles/53680/betanews-fileforum-grey?r=1316210589

Link to comment
Share on other sites
Neowinian

Hung Nguyen

Posted
Posted

Hey, I've update my Curve tab style, link: http://userstyles.org/styles/50806/firefox-4-curve-tabs

This style use *.svg image to build the curve boder of tab, like Strata 40 and Strata 50 tab style in Spewboy's Stratiform.

But there are some minor problem which I don't know how to fix, can anyone help me?

Link: http://userstyles.org/styles/50806/firefox-4-curve-tabs

Preview:

post-402198-0-19117500-1316271414.png

Link to comment
Share on other sites
  • 2 weeks later...
Neowinian

coffeejunky

Posted
Posted

Hi all,

First off, a very inspiring thread!

I'm trying to replicate the forward button behaviour in the UX builds of Nightly, which I really like.

After messing around with soapy's Australis theme as well as the UX omni.jar, I have the following in my userchrome.css:


#nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button{
border-radius: 0 !important;
margin-right: 0 !important;
}#nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #urlbar{
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin-left: 0 !important;
border-left: 0 !important;
}
#identity-box {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* unified back/forward button */
#back-button {
  -moz-image-region: rect(0, 18px, 18px, 0);
}
#forward-button {
  -moz-image-region: rect(0, 36px, 18px, 18px);
}#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
  -moz-image-region: rect(18px, 20px, 38px, 0);
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl),
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-text {
  -moz-transform: scaleX(-1);
}#nav-bar #back-button {
  -moz-margin-end: 0 !important;
}
#nav-bar #forward-button {
  border-left-style: none;
  margin-left: 0 !important;
}#nav-bar #back-button:-moz-locale-dir(ltr) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#nav-bar #back-button:-moz-locale-dir(rtl),
#nav-bar #forward-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button #forward-button {
  border-radius: 0;
}
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button[disabled="true"],
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button:not([disabled]):after {
  visibility: collapse;
}
#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button:after {
  content: "";
  display: -moz-box;
  mask: url(chrome://browser/skin/keyhole-forward-mask.svg#mask);
  background-color: rgba(255,255,255,.9);
  background-clip: padding-box;
  margin: 1px 0;
  -moz-margin-start: -6px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  border-top: 1px solid rgba(23,50,77,.25);
  border-bottom: 1px solid rgba(23,50,77,.25);
  box-shadow: 0 1px rgba(255,255,255,.10),
			  0 1px rgba(0,0,0,.02) inset;
}#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button[focused]:after {
  background-color: white;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button"],
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar:not([currentset]) {
  padding-top: 3px;
  padding-bottom: 5px;
}#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] > #nav-bar[currentset*="unified-back-forward-button"],
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] > #nav-bar:not([currentset]) {
  padding: 7px 2px 8px;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button {
  mask: url(keyhole-forward-mask.svg#mask);
  margin-left: -6px !important;
  -moz-padding-start: 9px;
  -moz-padding-end: 3px;
}
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button:not(:-moz-any(:hover,:active,[open])) {
  border-color: rgba(23,50,77,.25);
}
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button {
  -moz-transition: margin-left 150ms linear 0s,
				   opacity 100ms ease-in 50ms;
}#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button[disabled="true"] {
  opacity: 0;
  margin-left: -30px !important;
  -moz-transition: margin-left 100ms ease-out,
				   opacity 100ms ease-out,
				   visibility 1ms ease-out 100ms;
}



#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button[disabled] + #urlbar-container > #urlbar > .autocomplete-textbox-container.urlbar-textbox-container {
  -moz-margin-start: -13px;
  position: relative;
}
#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button + #urlbar-container > #urlbar {
  -moz-border-start: 0;
  border-radius: 0 2px 2px 0;
}#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button[disabled] + #urlbar-container > #urlbar {
  -moz-margin-start: 0;
}
#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button:not([disabled]) + #urlbar-container > #urlbar {
  -moz-margin-start: -3px;
}#urlbar[leftsidestar="true"] {
  -moz-padding-start: 1px;
}

[/CODE]

Its not pretty but it kinda works for now :p

This is how it looks with the forward button disabled -

ux3.png

This is how I want it to look -

ux1.png

As you can see the identity-box part of the urlbar does not sit flush up to the rounded back button. Does anyone have any ideas how I can get the identity box to look like that? I've been trying various things for hours with no joy :(

When the forward button is activated it looks perfect -

ux4.png

Heres how it looks in the 'real' UX build.

ux2.png

Any help would be much appreciated :)

Link to comment
Share on other sites
Neowinian

Hung Nguyen

Posted
Posted

Hi all,

First off, a very inspiring thread!

I'm trying to replicate the forward button behaviour in the UX builds of Nightly, which I really like.

After messing around with soapy's Australis theme as well as the UX omni.jar, I have the following in my userchrome.css:



[/CODE]

Its not pretty but it kinda works for now :p

This is how it looks with the forward button disabled -

This is how I want it to look -

As you can see the identity-box part of the urlbar does not sit flush up to the rounded back button. Does anyone have any ideas how I can get the identity box to look like that? I've been trying various things for hours with no joy :(

When the forward button is activated it looks perfect -

Heres how it looks in the 'real' UX build.

Any help would be much appreciated :)

Actually, I'm also working on this, here's an incomplete style: http://userstyles.org/styles/54258/firefox-9-conditional-forward-button-icplt

There are some bug that I've not figured out a solution yet, hope you guys could help me

Link to comment
Share on other sites
Neowinian

coffeejunky

Posted
Posted

I worked it out by myself in the end, mostly from the code in Soapy's Australis theme. It requires three files to work, so I zipped it up, if anyone is interested in using it, feel free, you can download all you need here -

http://dl.dropbox.co...ward-urlbar.zip

Heres the userchrome for people to browse, should they not want to download the zip -


#back-button {-moz-appearance: none !important;
-moz-transition: all 0.7s ease; }
#back-button[disabled="true"] {-moz-appearance: none !important;
-moz-transition:  0.7s ease-out !important;  }#nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button{
border-radius: 0 !important;
margin-right: 0 !important;
}#nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #urlbar{
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin-left: 0 !important;
border-left: 0 !important;
}
#identity-box {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* unified back/forward button */
#back-button {
  -moz-image-region: rect(0, 18px, 18px, 0);
-margin-left: -3;
}
#forward-button {
  -moz-image-region: rect(0, 36px, 18px, 18px);
}#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
  -moz-image-region: rect(18px, 20px, 38px, 0);
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#forward-button:-moz-locale-dir(rtl),
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-text {
  -moz-transform: scaleX(-1);
}#nav-bar #back-button {
  -moz-margin-end: 0 !important;
}
#nav-bar #forward-button {
  border-left-style: none;
  margin-left: 0 !important;
}#nav-bar #back-button:-moz-locale-dir(ltr) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#nav-bar #back-button:-moz-locale-dir(rtl),
#nav-bar #forward-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button #forward-button {
  border-radius: 0;
}
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button[disabled="true"],
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button:not([disabled]):after {
  visibility: collapse;
}
#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button:after {
  content: "";
  display: -moz-box;
  mask: url(chrome://browser/skin/keyhole-forward-mask.svg#mask);
  background-image: url("ident.png") !important;
  background-clip: padding-box;
  margin: 1px 0;
  -moz-margin-start: -4px;
  width: 20px;
  max-width: 20px;
  min-width: 20px;
  border-top: 1px solid rgba(23,50,77,.4);
  border-bottom: 1px solid rgba(23,50,77,.4);
  box-shadow: 0 1px rgba(255,255,255,.10),
						  0 1px rgba(0,0,0,.02) inset;
}
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button[focused]:after {
  background-color: white;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar[currentset*="unified-back-forward-button"],
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar:not([currentset]) {
  padding-top: 3px;
  padding-bottom: 5px;
}#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] > #nav-bar[currentset*="unified-back-forward-button"],
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] > #nav-bar:not([currentset]) {
  padding: 7px 2px 8px;
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button {
  mask: url(keyhole-forward-mask.svg#mask);
  margin-left: -6px !important;
  -moz-padding-start: 9px;
  -moz-padding-end: 3px;
}
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button:not(:-moz-any(:hover,:active,[open])) {
  border-color: rgba(23,50,77,.25);
}
#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button {
  -moz-transition: margin-left 150ms linear 0s,
								   opacity 100ms ease-in 100ms;
}#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #forward-button[disabled="true"] {
  opacity: 0;
  margin-left: -30px !important;
  -moz-transition: margin-left 100ms ease-out,
								   opacity 50ms ease-out,
								   visibility 100ms ease-out 100ms;
}
#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button[disabled] + #urlbar-container > #urlbar > .autocomplete-textbox-container.urlbar-textbox-container {
  -moz-margin-start: -13px;
  position: relative;
}
#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button + #urlbar-container > #urlbar {
  -moz-border-start: 0;
  border-radius: 0 2px 2px 0;
}#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button[disabled] + #urlbar-container > #urlbar {
  -moz-margin-start: 0;
}
#main-window[chromehidden=""] #navigator-toolbox[tabsontop="true"][iconsize="large"][mode="icons"]:not([customizing]) #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button:not([disabled]) + #urlbar-container > #urlbar {
  -moz-margin-start: -3px;
}#urlbar[leftsidestar="true"] {
  -moz-padding-start: 1px;
}#navigator-toolbox[iconsize="large"][mode="icons"][tabsontop="true"] #nav-bar[currentset*="unified-back-forward-button,urlbar-container"] #unified-back-forward-button {
  -moz-binding: url(globalBindings.xml#conditionalForward);
}
#navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #identity-box{
  margin-left: -2px !important;
padding-left: 1px !important;
}
[/CODE]

And here is how it looks -

ux6.png

It all seems to work perfectly, there is one minor annoyance in that https or gmail pages the identity-box colouring does not wrap round the button like on all other sites. As you can see, I can totally live with this but if anyone has any ideas how I can fix this let me know -

ux5.png

EDIT: Just worked out how to do away with ident.png, in userchrome replace -

[CODE]
url("ident.png") !important;
[/CODE]

with -

[CODE]
-moz-linear-gradient(hsl(0,0%,98%), hsl(0,0%,92%));
box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset;
[/CODE]

Link to comment
Share on other sites
Neowinian

2late

Posted
Posted

I've been using Nightly and my old theme seems to have some issues. Actualy, it's just one. My back button still has stroke/shadow to it even though the rest of the buttons don't (and the falt look is what I want).

clipboard01qy.jpg

I'd appreciate some help.

Link to comment
Share on other sites
  • 3 weeks later...
Grand Master

Syanide

Posted
Posted

I'm having a dumb sort of issue. I have only two bookmarks in my bookmarks toolbar: share on posterous and subscribe in google reader. I wanted to place those next to the search bar.

I've already used a custom style to remove the text so only icons would appear, but what's annoying is that I can't "resize" the bookmarks toolbar when placed there, it only shows one icon and the ">>" to reach the other one, plus it leaves the extra empty space beneath the row in which the address bar, search bar and bookmarks toolbar are.

Here's a screenshot:

fftoolbar.jpg

Help? Ultimately, I just want those icons in bookmarks toolbar to show without having to reach the ">>" and to remove the empty space beneath. Thanks.

EDIT:

I've fixed the problem partially: I now don't have the empty space below (by disabling the bookmarks toolbar in options, the icons still somehow stuck up there), and I have added a separator after the last icon so it now shows both on there.

fftoolbar2.jpg

The only problem is that I still have the "Show more bookmarks" thing (>>) there, even though it points to nothing. Ideas?

Link to comment
Share on other sites
Experienced

mancode20

Posted
Posted

Anyone have a stylish code for making the close button (x on tabs) bigger, or possibly even a different color like red or blue? As it is now, it's ridiculously small. Thanks if you can help!!

Link to comment
Share on other sites
Neowinian

miguel reizinho

Posted
Posted

I'm using this style for the navigation buttons, I think it's called Chrome Toolbar Buttons but I don't remember where I got it. :(

Is it possible to apply the same style to the personal/bookmarks toolbar?


@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.toolbarbutton-1{
  border: 1px solid transparent !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 4px !important;
  -moz-transition: none !important;
}
.toolbarbutton-1:not([disabled="true"]):hover{
  background: -moz-linear-gradient(rgba(255,255,255,.5),
								   rgba(255,255,255,.1)) padding-box !important;
  border: 1px solid rgba(0,0,0,.2) !important;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.3) inset,
			  0 1px 0 0 rgba(255,255,255,.3) !important;
}
.toolbarbutton-1[type="menu-button"] toolbarbutton:hover:active,
.toolbarbutton-1[type="menu-button"][open] dropmarker,
.toolbarbutton-1:not([disabled]):not([type="menu-button"]):hover:active,
.toolbarbutton-1:not([disabled]):not([type="menu-button"]):not(:active)[open] {
  border-color: rgba(0,0,0,.3) !important;
  background: rgba(0,0,0,.1) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
			  0 2px 0 rgba(0,0,0,.05) inset,
			  1px 0 0 rgba(0,0,0,.05) inset,
			  -1px 0 0 0 rgba(0,0,0,.05) inset !important;
}
.toolbarbutton-1[type="menu-button"]>*{
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  -moz-transition: none !important;
}
.toolbarbutton-1:not([disabled])[type="menu-button"]:not(:active)[open]{
  border-color: rgba(0,0,0,.3) !important;
}
.toolbarbutton-1[type="menu-button"] toolbarbutton{
  border-radius: 3px 0 0 3px !important;
}
.toolbarbutton-1[type="menu-button"] dropmarker{
  border-left: 1px solid transparent !important;
  border-radius: 0 3px 3px 0 !important;
}
#nav-bar .toolbarbutton-1[type="menu-button"]:hover dropmarker,
#nav-bar .toolbarbutton-1[type="menu-button"]:active dropmarker,
#nav-bar .toolbarbutton-1[type="menu-button"][open="true"] dropmarker{
  border-left: 1px solid rgba(0,0,0,.25) !important;
}
[/CODE]

Link to comment
Share on other sites
Experienced

mancode20

Posted
Posted

Anyone have a stylish code for making the close button (x on tabs) bigger, or possibly even a different color like red or blue? As it is now, it's ridiculously small. Thanks if you can help!!

I want something like this stylish, but I want the red x close tab buttons on every tab. I want it show up all the time, not just when I'm hovering over the active tab. Is it possible? If so, how? Can someone fix this code for me and upload the right one? Thanks if you can! Here's the original stylish. http://userstyles.org/styles/24065/red-close-tab-buttons

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.