Share your custom Firefox/Minefield 4 stylish scripts

[+Gary7 Subscriber²]

I found this code

#urlbar hbox[anonid="textbox-input-box"]
{
   -moz-box-ordinal-group: 2;
}

#urlbar hbox[anonid="textbox-input-box"] + hbox
{
   margin-left: 3px;
}

#urlbar-icons
{
   padding: 0px !important;
}

To put the Bookmark Star on the left of the address bar but there's one problem, when I hover over a link, the star dissapears, anyway to fix this?

I believe that is normal behavior. Mine does that as well.

[Excelsis]

I realize that but I'd like the star to always be there.

I found a work around for now, using Status-4-Evar to disable the hover over link in the address bar but thats a pretty lame way of getting around this problem I think.

[vajlent]

Does anyone know what background/wallpaper that have been used on these screenshots?

Thanx ;)

[foxxyn8]

Status-4-Eva has added a progress bar for the urlbar preemptive of Bug 602964. I've modified my Fission style progress bar to work with it.

Firefox 4 S4E URL Progress Bar Fission Style

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#urlbar {
position: relative !important;
z-index: 2 !important;
}

#urlbar-progress-alt {
position: relative !important;
z-index: -1 !important;
height: 20px !important;
margin: -21px 0 1px 2px !important;
background: none !important;
}

#urlbar-progress-alt .progress-bar {
background: rgba(0,61,245,0.5) -moz-linear-gradient(0% 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.4) 90%, rgba(255, 255, 255, 0.8)) repeat scroll 0% 0% !important;
border-radius: 3px 0 0 3px !important;
}

}

:D

[+Gary7 Subscriber²]

@foxxyn8. Could or would you please write a style that will work independent of Status-4-Eva.?

[foxxyn8]

@foxxyn8. Could or would you please write a style that will work independent of Status-4-Eva.?

I can't. There's nothing to style. The progress bar has been removed. You have to use an extension to get it back.

[+Gary7 Subscriber²]

I can't. There's nothing to style. The progress bar has been removed. You have to use an extension to get it back.

OK thanks :)

[mNiosu]

@foxxyn8

What about the progress remainder , can't it be removed (I mean the 2 small grey lines you get with the style...) on this add-on?

BTW thanks 4 the heads up about the add-on. Loosing the progress bar was kind of sad ... :D

[mNiosu]

Sorry 4 double post: updated my style too (thanks foxxyn8 for the inspiration :) ). Here it is: LINK

[foxxyn8]

@foxxyn8

What about the progress remainder , can't it be removed (I mean the 2 small grey lines you get with the style...) on this add-on?

BTW thanks 4 the heads up about the add-on. Loosing the progress bar was kind of sad ... :D

Good eye! I missed that lol.

Just add:

#urlbar-progress-alt .progress-bar,
#urlbar-progress-alt .progress-remainder {
border: 0 !important;
}

[mNiosu]

Good eye! I missed that lol.

Just add:

#urlbar-progress-alt .progress-bar,
#urlbar-progress-alt .progress-remainder {
border: 0 !important;
}

Great, thanks!

[d.N.]

hey,

with my code i have this white stripe in panorama view.

@-moz-document url("chrome://browser/content/browser.xul");


/*#appmenu-button
	{
	background: none !important;
	background-color: rgba(255, 255, 255, .2) !important;
    box-shadow: none !important;
	}*/


#appmenu-button
	{
	background: none !important;
	background-image: -moz-linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .1)),
                      -moz-linear-gradient(rgba(255, 255, 255, .15), rgba(255, 255, 255, .0) 30%),
                      -moz-linear-gradient(RGBA(255, 255, 255, 0), RGBA(255, 255, 255, 0)) !important;
	box-shadow: none !important;
	}


#appmenu-button:hover:not(:active):not([open])
	{
	background: none !important;
	background-image: -moz-linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .2)),
                      -moz-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .0) 30%),
                      -moz-linear-gradient(RGBA(255, 255, 255, 0), RGBA(255, 255, 255, 0)) !important;
	box-shadow: none !important;
	}


#appmenu-button:hover:active, #appmenu-button[open]
	{
	background: none !important;
	background-image: -moz-linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .2)),
                      -moz-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .0) 30%),
                      -moz-linear-gradient(RGBA(255, 255, 255, 0), RGBA(255, 255, 255, 0)) !important;
	box-shadow: none !important;
	}


#appmenu-button .button-text /*removes "Firefox"*/
	{
	display:none !important; 
	}


#appmenu-button dropmarker:before
	{
	content: "Firefox 4.0b8pre " !important; 
	}


#main-window[tabsontop="true"] #navigator-toolbox > *:not(#TabsToolbar):not(#toolbar-menubar),
#main-window:not([tabsontop="true"]) #navigator-toolbox > *:not(#nav-bar):not(#toolbar-menubar),
#sidebar-header
	{
	background-color: RGBA(255, 255, 255, 0) !important; 
	}


#main-window[tabsontop="true"]  #nav-bar
	{
	background-clip: padding-box !important; 
    border-top: 1px solid transparent !important; 
    -moz-box-shadow: RGBa(255, 255, 255, 0) 0 0 0 -0PX inset,
    rgb(255, 255, 255) 0 0 0 -0PX inset !important; 
	}


#main-window[tabsontop="true"][lwtheme="true"]  #nav-bar
	{
	border-top: none !important; 
	}


#main-window[tabsontop="true"]  #navigator-toolbox
	{border-bottom: 1px solid transparent !important;
     -moz-box-shadow: RGBa(255, 255, 255, 0) 0 0 0 -0PX inset,
                      rgb(255, 255, 255) 0 0 0 -1px inset !important;
	}


.tabbrowser-tab[selected="true"]
	{
	background-image: -moz-linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .34)),
                      -moz-linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .0) 30%),
                      -moz-linear-gradient(RGBA(255, 255, 255, 0), RGBA(255, 255, 255, 0)) !important;
	}


.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button
	{
	-moz-box-shadow:  RGBa(68, 108, 207, .1) 0 0PX 0,
                      rgba(114, 114, 114, .25) 0 1px 0 !important;
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .39), rgba(255, 255, 255, .17)),
                      -moz-linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 30%),
					  -moz-linear-gradient(RGBA(255, 255, 255, 0), RGBA(255, 255, 255, 0)) !important;
	}		


.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover
	{
	background-image: -moz-linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .34)),
                      -moz-linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 30%),
                      -moz-linear-gradient(RGBA(255, 255, 255, 0), RGBA(255, 255, 255, 0)) !important;
	}


.tabbrowser-tab[pinned],
.tabbrowser-tab[pinned]:hover
	{
	-moz-box-shadow: none !important;
	}


.tabbrowser-tab[pinned][titlechanged="true"]
	{
	background-image: -moz-linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)) !important;
	}


#sidebar-header
	{
	-moz-appearance: none !important;
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)) !important;
    border-top: none !important;
	}	


#navigator-toolbox label:not([class^="menu-"]):not(.menubar-text):not(.tab-text):not([id^="identity-icon"]):not([class^="urlbar"]):not([class^="tab"]),
#main-window:not([tabsontop="true"]) .tabbrowser-tab:not([selected="true"]),
#sidebar-header
	{
	text-shadow: rgb(255, 255, 255) 0px 0px 6px, 
                 rgb(255, 255, 255) 0px 0px 6px, 
                 rgba(255, 255, 255, .4) 0px 1px 0px !important;
	}


.tabbrowser-tab[selected="true"]
	{
	text-shadow: rgba(255, 255, 255, .4) 0px 1px 0px !important; 
	}


.tabbrowser-tab:not([selected="true"]),
.menubar-text
	{
	text-shadow: rgb(255, 255, 255) 0px 0px 8.4px, 
                 rgba(255, 255, 255, .4) 0px 1px 0px !important; 
	}


#urlbar, #searchbar > *, .findbar-textbox, #search-box
	{
	-moz-appearance: none !important;
	background: rgba(255, 255, 255, .1) !important;
	-moz-border-radius: 6px !important;
	color: #000000 !important;
	text-shadow: rgb(255, 255, 255) 0px 0px 8.4px, rgba(255, 255, 255, .4) 0px 1px 0px !important;	
	}


#urlbar-icons
	{
	display: none !important;
	}


#urlbar:hover 
	{
	background: rgba(255,255,255,.15) !important;
	}


#searchbar:hover
	{
	background: rgba(255,255,255,.05) !important;
	}	


.findbar-textbox[status="notfound"], menupopup *, popup *, .ac-title-box *, .pilot-title, .tail-up .checkbox-label-box
	{
	color: #000000 !important;
	}


#TabsToolbar, #browser-bottombox, #status-bar, #status-bar > *, #nav-bar, #PersonalToolbar, #ybToolbar 
	{ 
	background: transparent !important;
	color: rgba(255, 255, 255, .1) !important;
	text-shadow: rgb(255, 255, 255) 0px 0px 8.4px, rgba(255, 255, 255, .4) 0px 1px 0px !important;	
    -moz-appearance: none !important;
	border-left: #000000 !important;
	border-right: #000000 !important;
	border-bottom: #000000 !important;
	color: #000000 !important;
	}


#status-bar
	{
	margin-top: 1px !important;
	}


.findbar-find-next, .findbar-find-previous, .findbar-highlight
	{
	color: #000000 !important;
	}


#identity-box 
	{
	background-color: rgba(255, 255, 255, .1) !important;
	}


@-moz-document url("chrome://browser/content/tabview.html");


#bg
	{
	display: none !important;
	}


#exit-button
	{
	opacity: 1 !important;
	background: -moz-linear-gradient(top,rgba(68,103,207,.1) 0%,rgba(68,103,207,.2) 100%) !important;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(255,255,255,.5) inset !important;
	margin-right: 4px;
	margin-top: 5px;
	background: none !important;
	border: none !important;
	}


#exit-button:hover
	{
	background: -moz-linear-gradient(top,rgba(68,103,207,.3) 0%,rgba(68,103,207,.4) 100%) !important;
	}


#actions 
	{
	opacity: 1 !important;
	background: -moz-linear-gradient(top,rgba(68,103,207,.1) 0%,rgba(68,103,207,.2) 100%) !important;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(255,255,255,.5) inset !important;
	margin-top: -64px;
	margin-right: 4px;
	}

#actions:hover
	{
	background: -moz-linear-gradient(top,rgba(68,103,207,.3) 0%,rgba(68,103,207,.4) 100%) !important;
	}


#searchbox
	{
	background: rgba(255,255,255,.8) !important;
	color: #000 !important;
	}


#actions #searchbutton
	{
	opacity: 1 !important;
	}

any ideas? it looks weird. :/ ff 4.0b8pre.

[mNiosu]

What's with the new big identity box? It looks like crap! :|

[mNiosu]

Hmm, never mind, it's a status-4-eva bug ... Waiting 4 the fix ... :whistle:

[foxxyn8]

Hmm, never mind, it's a status-4-eva bug ... Waiting 4 the fix ... :whistle:

Not really a bug, it's by design. http://forums.mozillazine.org/viewtopic.php?f=23&t=2001965&sid=01de76b1fde81b2c59c6dc69379cf1ab&start=135.

This will return the identity box to its original look:

#urlbar .urlbar-frontcap
{
   margin: 0px !important;
}

#identity-box
{
   padding: 0px !important;
}

On a side note, S4E now includes the option to have the PL in the location bar, so no additional styling just for that purpose is needed.

[mNiosu]

Not really a bug, it's by design. http://forums.mozillazine.org/viewtopic.php?f=23&t=2001965&sid=01de76b1fde81b2c59c6dc69379cf1ab&start=135.

This will return the identity box to its original look:

#urlbar .urlbar-frontcap
{
   margin: 0px !important;
}

#identity-box
{
   padding: 0px !important;
}

On a side note, S4E now includes the option to have the PL in the location bar, so no additional styling just for that purpose is needed.

Yes but if I add 2px to margin in #urlbar .urlbar-frontcap to make it look like used to the progress starts at the right of the identity box and if I add negative padding to the left of progress-bar it covers the identity box again. So how do I get the old look back? And why a hell didn't he made an option for that stupid identity-box resizing in add-on. I think I'll keep the old version of the add-on installed 4 now...

[foxxyn8]

Yes but if I add 2px to margin in #urlbar .urlbar-frontcap to make it look like used to the progress starts at the right of the identity box and if I add negative padding to the left of progress-bar it covers the identity box again. So how do I get the old look back? And why a hell didn't he made an option for that stupid identity-box resizing in add-on. I think I'll keep the old version of the add-on installed 4 now...

Try this. Set the progress bar to "fill" in S4E options. I modified your code - adjust the margins/padding/height as desired.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#urlbar[pmpack="center"] #urlbar-progress-alt{
height: 22px !important;
margin: 0 2px 0 -25px !important;
background: transparent !important;
}

#urlbar-progress-alt .progress-bar {
-moz-appearance: progresschunk !important;
background-color: transparent !important;
opacity: .5 !important;
}

#urlbar-progress-alt .progress-bar,
#urlbar-progress-alt .progress-remainder {
border: 0 !important;
}

#urlbar .urlbar-frontcap {
position: relative !important;
z-index: 2 !important;
margin: 0px !important;
}

#identity-box {
padding: 0px !important;
}

}

[vajlent]

Is it possible to make a content shadow script, or a more "shadow-like" look of the border?

[Drifus]

Styles updated.

Changelog:

- oct.15.2010

* fixed Firefox button (arrow) position on maximized window

* removed background of the combined go/reload/stop button in location bar

* removed some margins and paddings of the navbar and search bar

* add-on Bar more slim - if you don't use Autohide add-on Bar style

* removed progress lines style

• The original idea
• An alternative with back/forward buttons detached from nav bar

[Deo Domuique]

Guys, please, can you give me a code that will make the "New Tab Button" like all the other? I mean I'd like to see only the cross like "panorama" or "home page" buttons on Tab Bar...

If possible of course!...

[Quazzi]

Guys, please, can you give me a code that will make the "New Tab Button" like all the other? I mean I'd like to see only the cross like "panorama" or "home page" buttons on Tab Bar...

If possible of course!...

.tabs-newtab-button {
	background: transparent !important;
	border: #000000 !important;
}

From drifus' code

[Duke D]

Does anyone have the stylish code to remove the new little circle-progress indicators in tabs?

[foxxyn8]

Does anyone have the stylish code to remove the new little circle-progress indicators in tabs?

.tab-throbber {
display:none !important;
}

or

.tab-throbber  {
list-style-image: none !important;
}

use the second one if you don't want to see the text "jump" when the favicon is loaded

[Boeing 787]

I don't like the throbber. Anybody know a stylish script to add the progress bar back to the individual tabs?

[+Gary7 Subscriber²]

I don't like the throbber. Anybody know a stylish script to add the progress bar back to the individual tabs?

Tab Mix Plus

Status-4-Evar

Read the thread.

.tab-throbber  {
list-style-image: none !important;
}