Share your custom Firefox/Minefield 4 stylish scripts

[Darrian]

Should have been posted above, guess I missed one.

Change menu button text (from Minefield to Firefox or whatever you want to edit it to say)

#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Firefox" !important; }

[Steven P. Administrators]

Thanks

[Darrian]

NP. Also, I took the liberty of cleaning up your toolbar code, too, since it's not using the aqua elements anymore; I was toying around with a red one. (This is with the blue gradient, though)

#main-window #navigator-toolbox #PersonalToolbar
{
border-top: 0 none !important;
-moz-appearance: none !important;
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
padding: 0px 0px 0px 0px !important;
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton
{
padding: 0 5px !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton > label
{
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu > label
{
color: white !important;
}

[SoapyHamHocks Member]

NP. Also, I took the liberty of cleaning up your toolbar code, too, since it's not using the aqua elements anymore; I was toying around with a red one. (This is with the blue gradient, though)

Here even cleaner ;)

#PersonalToolbar {
  border-top: 0 !important;
  -moz-appearance: none !important;
  background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
  padding: 0 !important;
}

#PersonalToolbar .bookmark-item:not(menuitem){
  color: white !important;
  padding: 0 5px !important;
}

[Steven P. Administrators]

Here even cleaner ;)

#PersonalToolbar {
  border-top: 0 !important;
  -moz-appearance: none !important;
  background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
  padding: 0 !important;
}

#PersonalToolbar .bookmark-item:not(menuitem){
  color: white !important;
  padding: 0 5px !important;
}

Ohh thanks, I'm a bit of a n00b with stylish :p

[Darrian]

Me too! :D I just picked out the parts that didn't make sense and previewed after each change to make sure it didn't break anything.

@Soapy: Thx! Now... how bout that new split menu my Jedi powers reveal you're secretly working on?

[SoapyHamHocks Member]

Me too! :D I just picked out the parts that didn't make sense and previewed after each change to make sure it didn't break anything.

@Soapy: Thx! Now... how bout that new split menu my Jedi powers reveal you're secretly working on?

Seeing as how they scrapped the idea of the dual pane Idea I was going to take the menu I built for StrataBuddy and port that over. It will have to come in the form of an addon because it contains xul and javascript. Once I make some real progress I'll update you.

[Darrian]

Sounds great. About the only thing I use the current menu for is closing Firefox (if my mouse is closer to the menu than the close button).

[bogas04]

http://userstyles.or...27?r=1279537990

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 4px !important;
padding-top:7px !important;
padding-right:110px !important;
padding-left: 50px !important;
}

.tabbrowser-tab[fadein]
{
min-width: 175px !important;
max-width: 210px !important;
}

#main-window[sizemode="maximized"][tabsontop="true"] #appmenu-button-container 
{ 
 	position: fixed !important; 
 	margin: 6px 0px 4px 4px !important; 
}


#appmenu-button
{
	border: 1px solid rgba(90,30,0,0.8)!important;
	border-top:none!important;
	padding: 0px 5px px 5px !important;
	height: 22px !important;
	min-width: 43px !important;
	width: 43px !important;
	background-image: -moz-linear-gradient(rgba(255,220,150,0.8), rgba(255,220,150,0.5) 40%, rgba(255,220,150,0.2) 50%, rgba(255,255,255,0.05) 51%), -moz-radial-gradient(12.5px, circle cover, rgba(248, 233, 164, 0.85) 28%, rgba(248, 233, 164, 0.45) 34%, rgba(248, 233, 164, 0) 50%) !important;
	-moz-box-shadow: 0 0 3px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;
}


#appmenu-button:hover:active, #appmenu-button[open]
{
	background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
	-moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset !important;
}


#appmenu-button .button-text
{ 
	color: transparent !important;
	text-shadow: none !important;
	margin-left: -27px !important;
	margin-right: -33px !important;
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADK0lEQVQ4jV2TTWxUZRSGn++7d+bey3SYMgMzdNLMTCu2VcE0CjG1qYqRSEhYKElTA66MooaNLozDwh8WjAs3JsSFSxeKRg0axSj+EApFYotAS0ctWmeEOpTS6fx0fu+9n4v+pPqsTk7yvuck57wCIGXIT4BUsu6OBbr2bO+p5J71OfWHxvzxMEuMA6eBLwu/nxxlDWLZQAGcDG09Ou/xDR3IXegE2F9zEMDg/rd59eky1z467575pfLdrrmLRw7dqJxjWXwgZUh1682gShlSra2Ha0qdK9nq63xDbXniLTUx8pz68Y1+9U5XuPrhwMZBACkEjwRDGgD7hoLE457V9c4GNF5u9XK1WGfw4B4efT1B594eHnvlHrNUku99/mRks9SkuL/jTk+jkrVxF6ps7/Ovmu0bChKXUEQnH9uCMrx8MNJK4sEIoZgVKN9sJqXHENFou+ZtVl18iaXp1UKEjbuf4dPj86hTC1y+eJuJM3/hojF5rUGhYNO9K8TiXG2nrhTrfa0SXQoqJUnLwB0A6J5JAGamcuQn05RmctiuzlhaYkmHSNxkMe/06PWaa2CD2SYZ/rZE8/tRZnIKgKOPv0vz/Y8RysGSLtWaIJKo0Lp+nnylQq1o69LwiHKpoEBAMKKxye/S1iYBOPzNi3zW9wOv7chQnJ2jUczzcHsW8vOUf72J1SIqugZX/sk2+/0bNLruNvl73GZbXOfeHSY+0+ZC5hacOI3d/jwxK8vB3jT1XIPrZ/Nowh3XbUcdnxpv3BcI6VY4ZtK+LYjdcBj7aZHMHw3gKknfU/Sv+40Xdt8mpNVZmFpg8mcNb2vwlEgZssXSGNaF6N055Mc0dBxHR5oa03kvc8Ua68QisXCTRMKgik56pMyfGau4ObapWwAcMeQDluQLS4rw1j6LSFRD1ySapjCkjeMIbMAMQSarmLhUr81NOwPJujsqVr4uZcheQ+MrBdFQi6Sz20sgKNAtwCOYvd4kc0OgqnYlN+v2J+vupdUwrXDMp3W4gpdcpfY6UiQce+k6piHYEJA1p6lOlBfU4UOLzvR/0vh/jvm0DuAuILrcmgHSa4Ur/AsXclHwqDchzQAAAABJRU5ErkJggg==") no-repeat 16px !important;
}


#appmenu-button dropmarker
{ 
	margin: 0 1px 0 0 !important; 
}
#appmenu-button-container
{
	position: fixed !important;
	top: 1px !important;
}

[Steven P. Administrators]

NP. Also, I took the liberty of cleaning up your toolbar code, too, since it's not using the aqua elements anymore; I was toying around with a red one. (This is with the blue gradient, though)

#main-window #navigator-toolbox #PersonalToolbar
{
border-top: 0 none !important;
-moz-appearance: none !important;
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
padding: 0px 0px 0px 0px !important;
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton
{
padding: 0 5px !important;
}

#main-window #navigator-toolbox #PersonalToolbar toolbarbutton > label
{
color: white !important;
}

#main-window #navigator-toolbox #PersonalToolbar > toolbaritem > menubar > menu > label
{
color: white !important;
}

Had to use this, because the one SoapyHamHocks did, although simple and cleaner, makes a lot of the dialog text white within options, bookmarks menu etc :p

[SoapyHamHocks Member]

Had to use this, because the one SoapyHamHocks did, although simple and cleaner, makes a lot of the dialog text white within options, bookmarks menu etc :p

Don't fear I have fixed it :whistle:

#PersonalToolbar {
  border-top: 0 !important;
  -moz-appearance: none !important;
  background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
  padding: 0 !important;
}

#PersonalToolbar .bookmark-item:not(menuitem):not(menu) {
  color: white !important;
  padding: 0 5px !important;
}

[/url]

Cleaned up the code a bit and fixed the menubar.

#main-window:not([sizemode="maximized"])[tabsontop="true"] #TabsToolbar{
  padding: 7px 110px 0 43px !important;
}

#main-window[sizemode="maximized"][tabsontop="true"] #TabsToolbar{
  padding: 0 110px 0 43px !important;
}

#appmenu-button-container {
  position: fixed !important;
  top: 1px !important;
}

#main-window[sizemode="maximized"][tabsontop="true"] #appmenu-button-container { 
  top: 8px !important;
}

#toolbar-menubar:not([inactive="true"]) {
  margin: 0 0 0 43px !important;
}

#appmenu-button {
  border: 1px solid rgba(90,30,0,0.8)!important;
  border-top:none!important;
  padding: 0px 5px 0px 5px !important;
  height: 22px !important;
  min-width: 43px !important;
  width: 43px !important;
  background-image: -moz-linear-gradient(rgba(255,220,150,0.8), rgba(255,220,150,0.5) 40%, rgba(255,220,150,0.2) 50%, rgba(255,255,255,0.05) 51%), -moz-radial-gradient(12.5px, circle cover, rgba(248, 233, 164, 0.85) 28%, rgba(248, 233, 164, 0.45) 34%, rgba(248, 233, 164, 0) 50%) !important;
  -moz-box-shadow: 0 0 3px rgba(255,255,255,.5) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,200,0.8) inset, 0 0 1px rgba(255,250,240,0.5) !important;
}

#appmenu-button:hover:active, 
#appmenu-button[open] {
  background-image: -moz-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1) 10%, transparent 60%), -moz-radial-gradient(14px, circle cover, rgba(248, 233, 164, 0.5) 29%, rgba(248, 233, 164, 0.2) 35%, rgba(248, 233, 164, 0) 50%) !important;
  -moz-box-shadow: 0 0 4px rgba(0,0,0,.4) inset !important;
}

#appmenu-button .button-text { 
  color: transparent !important;
  text-shadow: none !important;
  margin-left: -27px !important;
  margin-right: -33px !important;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADK0lEQVQ4jV2TTWxUZRSGn++7d+bey3SYMgMzdNLMTCu2VcE0CjG1qYqRSEhYKElTA66MooaNLozDwh8WjAs3JsSFSxeKRg0axSj+EApFYotAS0ctWmeEOpTS6fx0fu+9n4v+pPqsTk7yvuck57wCIGXIT4BUsu6OBbr2bO+p5J71OfWHxvzxMEuMA6eBLwu/nxxlDWLZQAGcDG09Ou/xDR3IXegE2F9zEMDg/rd59eky1z467575pfLdrrmLRw7dqJxjWXwgZUh1682gShlSra2Ha0qdK9nq63xDbXniLTUx8pz68Y1+9U5XuPrhwMZBACkEjwRDGgD7hoLE457V9c4GNF5u9XK1WGfw4B4efT1B594eHnvlHrNUku99/mRks9SkuL/jTk+jkrVxF6ps7/Ovmu0bChKXUEQnH9uCMrx8MNJK4sEIoZgVKN9sJqXHENFou+ZtVl18iaXp1UKEjbuf4dPj86hTC1y+eJuJM3/hojF5rUGhYNO9K8TiXG2nrhTrfa0SXQoqJUnLwB0A6J5JAGamcuQn05RmctiuzlhaYkmHSNxkMe/06PWaa2CD2SYZ/rZE8/tRZnIKgKOPv0vz/Y8RysGSLtWaIJKo0Lp+nnylQq1o69LwiHKpoEBAMKKxye/S1iYBOPzNi3zW9wOv7chQnJ2jUczzcHsW8vOUf72J1SIqugZX/sk2+/0bNLruNvl73GZbXOfeHSY+0+ZC5hacOI3d/jwxK8vB3jT1XIPrZ/Nowh3XbUcdnxpv3BcI6VY4ZtK+LYjdcBj7aZHMHw3gKknfU/Sv+40Xdt8mpNVZmFpg8mcNb2vwlEgZssXSGNaF6N055Mc0dBxHR5oa03kvc8Ua68QisXCTRMKgik56pMyfGau4ObapWwAcMeQDluQLS4rw1j6LSFRD1ySapjCkjeMIbMAMQSarmLhUr81NOwPJujsqVr4uZcheQ+MrBdFQi6Sz20sgKNAtwCOYvd4kc0OgqnYlN+v2J+vupdUwrXDMp3W4gpdcpfY6UiQce+k6piHYEJA1p6lOlBfU4UOLzvR/0vh/jvm0DuAuILrcmgHSa4Ur/AsXclHwqDchzQAAAABJRU5ErkJggg==") no-repeat 16px !important;
}

#appmenu-button dropmarker { 
  margin: 0 1px 0 0 !important; 
}

.tabbrowser-tab[fadein] {
  min-width: 175px !important;
  max-width: 210px !important;
}

And yes I'm bored :p

[Steven P. Administrators]

Nah still broke in options, browser controls are fixed tho..

If you are bored, can you help me change home button & app tabs to the selected background color, because I don't like the transparent behavior.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#TabsToolbar > #home-button {
-moz-appearance: none !important;
background: transparent -moz-linear-gradient(left center , transparent, transparent 1px, rgba(128, 128, 128, 0.1) 1px, rgba(128, 128, 128, 0.1)) repeat scroll -6px 0 !important;
background-clip: border-box !important;
background-origin: padding-box !important;
background-size: 200% auto !important;
margin: 0 !important;
padding: 0 1px !important;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 3 5 3 6 / 3px 5px 3px 6px !important;
-moz-border-radius: 6px 4px 0 0 !important;
margin-left: 4px !important;
}

#TabsToolbar > #home-button:hover {
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(255,255,255,.4) 1px, rgba(255,255,255,.4)) !important;
}

#TabsToolbar > #home-button > .toolbarbutton-icon {
margin-top: -1px !important;
margin-bottom: -1px !important;
}

#appmenu-button-container{
position: fixed !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 82px !important;
padding-top:1px !important;
}
#main-window #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 110px !important;
}
#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-right: 110px !important;
}
tab:not([selected="true"]) 
{
color: white !important;
}

#appmenu-button-container{
margin: 0px 0px 4px 4px !important;
}

#appmenu-button{
padding: 2px 10px 2px 7px !important;
}

#appmenu-button dropmarker:before {
padding-right: 5px !important;
}

#appmenu-button{
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;
-moz-border-radius: 0px 0px 4px 4px !important;
border-top: 0px !important;
margin-top: 1px !important;
}

#appmenu-button:hover{
background: -moz-linear-gradient(top, rgba(78,147,229,1), rgba(0,78,213,1)) !important;
}
#appmenu-button .button-text { display:none !important; }
#appmenu-button dropmarker:before { content: "Firefox" !important; }

I think thats everywhere where home button and apptabs are mentioned.

Thanks! :D

[vajlent]

I wanna move the menu button more to the left side and make the active tabs in the same transparency

as the toolbar, how do I do that?

EDIT: nevermind the menu button, I fixed that one. ;)

I just need help with the tabs transparency.

[SoapyHamHocks Member]

Nah still broke in options, browser controls are fixed tho..

I think thats everywhere where home button and apptabs are mentioned.

Thanks! :D

This should do it:

#navigator-toolbox[tabsontop="true"] .tabbrowser-tab[pinned="true"] {
  background-image: -moz-radial-gradient(center top, white, rgba(255,255,255,0) 60%),
                    -moz-linear-gradient(left, transparent, transparent 1px,
                                               rgba(255,255,255,.5) 1px, rgba(255,255,255,.5)),
                    -moz-linear-gradient(left, transparent, transparent 1px,
                                               -moz-dialog 1px, -moz-dialog) !important;
}

Also the code I posted earlier should not change anything in the options window at all. It has to do with the code you originally posted, you had:

tab:not([selected="true"]) {
color: white !important;
}

it should be

.tabbrowser-tab:not([selected="true"]) {
color: white !important;
}

[Steven P. Administrators]

Cheers :)

[SoapyHamHocks Member]

http://userstyles.org/styles/33745

#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border: 1px solid !important;
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) rgba(0,0,0,.15) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -5px !important;
  padding: 0 3px 0 3px !important;
}

#urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

Just a quick style, will add hover/pressed states eventually.

[Steven P. Administrators]

Neat! Added.

Edit: That breaks the stop/reload button tweak, here it is together:

#stop-button[disabled="true"] { display:none; } 
#stop-button:not([disabled]) + #reload-button { display:none; }
/* Hide bookmark star in addressbar */
toolbar #star-button{
display:none !important;
}
/* Remove live feed icon in Address url toolbar */
#feed-button 
{
 display: none !important;
}
#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border: 1px solid !important;
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) rgba(0,0,0,.15) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -5px !important;
  padding: 0 3px 0 3px !important;
}

#urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

duh I think I messed up.. it isn't broke ignore me lol

[SoapyHamHocks Member]

Neat! Added.

Edit: That breaks the stop/reload button tweak, here it is together:

You shouldn't need any more code. Just make sure its urlbar then reload and stop.

[Steven P. Administrators]

Yeah I figured it out, works properly now.

I have this in a "tweaks" stylish script

/* Hide bookmark star in addressbar */
toolbar #star-button{
display:none !important;
}
/* Remove live feed icon in Address url toolbar */
#feed-button 
{
 display: none !important;
}
#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border: 1px solid !important;
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) rgba(0,0,0,.15) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -5px !important;
  padding: 0 3px 0 3px !important;
}

#urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

[NotSoBad]

Does the "tabs in title bar" not work if using Windows XP?

I've checked top padding is 0, and have even tried -15px, but the tabs refuse to go into the title bar.

[SoapyHamHocks Member]

Updated with hover/pressed states.

http://userstyles.org/styles/33745

#urlbar {
  -moz-border-radius: 4px 0 0 4px !important;
  border-right: 0 !important;
}

#urlbar-container + #reload-button,
#urlbar-container + #reload-button + #stop-button{
  border: 1px solid !important;
  border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37) rgba(0,0,0,.15) !important;
  -moz-border-radius: 0 4px 4px 0!important;  
  -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
                   0 1px 0 rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.725) !important;
  margin-left: -3px !important;
  padding: 0 3px 0 3px !important;
}

#urlbar-container + #reload-button:not([disabled]):hover{
  background-image: -moz-linear-gradient(#9eccf1, #6fb1e1 49%,
                                   #5b9fd9 50%, #5198d2 60%,
                                   #3e8ac9) !important;
}

#urlbar-container + #reload-button + #stop-button{
  background-image: -moz-linear-gradient(#e6a18a, #d17764 49%,
                                   #c05d4e 50%, #b95546 60%,
                                   #c15a4a) !important;
}

#urlbar-container + #reload-button:hover:active,
#urlbar-container + #reload-button + #stop-button:hover:active {
  -moz-box-shadow: inset 0 0 3px rgba(0,0,0,.8) !important;
}

[Steven P. Administrators]

Hey thanks, I installed it, but wouldn't it be better to have the default hover state?

Default

Yours

Hmm would be difficult, maybe just make it lighter or something? I like how the stop button goes Red :)

[SoapyHamHocks Member]

Hey thanks, I installed it, but wouldn't it be better to have the default hover state?

Hmm would be difficult, maybe just make it lighter or something? I like how the stop button goes Red :)

I tried to copy the mockups for that one as seen here. I will end up tweaking it some more.

[Steven P. Administrators]

Ah right, that makes sense then :)

[CGar]

I wish someone could convince the awesome fellas at Mozilla to put the Go/Stop/Refresh button on the left side of the address bar... it makes so much more sense there :(