Share your custom Firefox/Minefield 4 stylish scripts

27,724 · October 12, 2010

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.

October 12, 2010

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.

October 12, 2010

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

Thanx ;)

October 12, 2010

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

27,724 · October 12, 2010

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

October 12, 2010

@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.

27,724 · October 12, 2010

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 :)

October 12, 2010

@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

October 12, 2010

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

October 12, 2010

@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;
}

October 12, 2010

Good eye! I missed that lol.

Just add:

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

Great, thanks!

October 12, 2010

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 &gt; *:not(#TabsToolbar):not(#toolbar-menubar),
#main-window:not([tabsontop="true"]) #navigator-toolbox &gt; *: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 &gt; *, .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 &gt; *, #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.

October 13, 2010

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

October 13, 2010

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

October 13, 2010

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.

October 14, 2010

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...

October 15, 2010

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;
}

}

October 15, 2010

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

October 15, 2010

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

October 16, 2010

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!...

October 16, 2010

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

October 16, 2010

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

October 17, 2010

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

2,348 · October 17, 2010

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

27,724 · October 17, 2010

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;
}

Sign In

Share your custom Firefox/Minefield 4 stylish scripts

Recommended Posts

+Gary7 Subscriber²

Link to comment

Share on other sites

Excelsis

Link to comment

Share on other sites

vajlent

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

+Gary7 Subscriber²

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

+Gary7 Subscriber²

Link to comment

Share on other sites

mNiosu

Link to comment

Share on other sites

mNiosu

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

mNiosu

Link to comment

Share on other sites

d.N.

Link to comment

Share on other sites

mNiosu

Link to comment

Share on other sites

mNiosu

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

mNiosu

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

vajlent

Link to comment

Share on other sites

Drifus

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

Quazzi

Link to comment

Share on other sites

Duke D

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Boeing 787

Link to comment

Share on other sites

+Gary7 Subscriber²

Link to comment

Share on other sites

Recently Browsing 0 members