Share your custom Firefox/Minefield 4 stylish scripts

[ruiderson]

You could try this instead:

#main-window[sizemode="maximized"][tabsontop="true"][tabsintitlebar="true"] #TabsToolbar {
  margin-top: -1px;
}

Are you skinning the richlistitems? You could try border-style: solid if you don't already have that.

Yes, i'm skinning the richlistitems, but using boder-style: solid, doesn't work for me. The line around the selected item still there.

I'm using this script for richlistitem in Download Manager:

#downloadView > richlistitem[selected=true] {
  border: 1px solid hsla(218,38%,64%,.35) !important;
  border-radius: 5px !important;
  background-image: -moz-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.2)) !important;
  background-color: hsla(0,0%,100%,.35) !important;
  background-repeat: no-repeat !important;
  background-clip: padding-box !important;
  box-shadow: 0 0 3px hsla(213,44%,40%,.10) inset,
              0 1px 0 hsla(0,0%,100%,.5) !important;
  color: #252F3B !important;
  font-weight: bold !important;
}


#downloadView > richlistitem {
  margin-bottom: 3px !important;
  border: 1px solid hsla(218,38%,64%,.35) !important;
  border-radius: 5px !important;
  background-image: -moz-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,.2)) !important;
  background-repeat: no-repeat !important;
  background-clip: padding-box !important;
  box-shadow: 0 0 3px hsla(213,44%,40%,.10) inset,
              0 1px 0 hsla(0,0%,100%,.5) !important;
}

thanks

[SoapyHamHocks Member]

Yes, i'm skinning the richlistitems, but using boder-style: solid, doesn't work for me. The line around the selected item still there.

I'm using this script for richlistitem in Download Manager:

thanks

Add 'outline: none !important;'

[Deo Domuique]

Thank you Soapy! It worked perfectly! Gives me no more error when I press "customize" and I can change tabs pressing on top-edge.

[+Audioboxer Subscriber²]

Soapy, or anyone... What do you think it's going wrong?

Normal:

Pressing "Alt" - OK:

Pressing "Customize" - Not OK:

I've Tabs in Title Bar of course ( the native code, not custom ). I suspect the soapy's code given above for AppMenuButton creates the problem... eh?

P.S. By the way, what's the name of that Menu to remove the white background?

How did you get that firefox icon as the app button instead of text? Thanks

[ruiderson]

Add 'outline: none !important;'

Wow Soapy, it worked like a charm!!!! :laugh:

You're the guy! hahaha

Thank you so much!

[SoapyHamHocks Member]

How did you get that firefox icon as the app button instead of text? Thanks

Here you go http://userstyles.org/styles/42446

[ruiderson]

Hello guys!

I've made a custom download manager and about:config page, using some scripts found here.

I hope you enjoy.

Thanks to Soapy for some helps! :cool:

It was uploaded to userstyles.org

About:config:

http://userstyles.org/styles/42758?r=1295023929

Download Manager:

http://userstyles.org/styles/42759?r=1295024012

See you guys!

[Drifus]

I've got a bit of old Stylish code from this thread that seems to be misbehaving lately. Whenever I startup Firefox, or sometimes navigate to certain webpages, I see the add-on bar randomly at the bottom, with no buttons on it. Also, when I do view it normally, the bar looks really weird

GC, I'm using this code on my customizations, try it.

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

#browser-bottombox, #addon-bar > #status-bar {
	background: transparent !important;
	border: none !important;
}
#addon-bar {
	-moz-appearance: none !important;
	border: none !important;
/*	margin-bottom: -4px !important;*/
}
#addonbar-closebutton, #addonbar-spring {
	display:none !important;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox {
	position: fixed;
	bottom: 0;
	left: 0;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar {
	padding: 1px 10px 3px 10px;
	border-top: 20px solid transparent !important;
	border-left: 20px solid transparent !important;
	border-right: 20px solid transparent !important;
	border-radius: 22px 22px 0 0;
	margin-right: 20px !important;
	background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
	background-clip: padding-box;
	box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset;
	position: fixed;
	bottom: -24px;
	right: 20px;
	opacity: 0;
	-moz-transition: bottom 0.25s 0.5s ease-in, opacity 0.1s 0.65s ease-in, right 0.01s 0.75s;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar:hover {
	bottom: -2px;
	right: -2px;
	opacity: 1;
	-moz-transition: bottom .25s .25s ease-out, opacity 0.1s 0.25s ease-out;
}
#FindToolbar {
	border: none !important;
}
#FindToolbar .findbar-container {
	margin-bottom: -2px !important;
	margin-left: -2px !important;
	border-radius: 0 2px 0 0;
	background:	-moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
	box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset;
}
#FindToolbar .find-status-icon[status="notfound"] + .findbar-find-status, #FindToolbar .find-status-icon[status="wrapped"] + .findbar-find-status {
  	padding-right: 5px !important;
}
#FindToolbar .find-status-icon[status="notfound"], #FindToolbar .find-status-icon[status="wrapped"] {
      margin-left: -1px !important;
}
#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) + .findbar-find-status {
      display: none !important;
}

[Deo Domuique]

Drifus, extremely nice design! Add this style too, together, maybe you'll find it better, like me!

http://userstyles.org/styles/38497

[Deo Domuique]

Ruiderson, the Download-Manager style is really perfect! The "about:config" gives me error, but, anyway.

[CGar]

GC, I'm using this code on my customizations, try it.

Most excellent, this is worthy of ditching the old one :D

Also, I found out that the weird bar at the bottom of my browser is not due to any of my styles, it seems to be some sort of bug with Tab Mix Plus. I'll be letting them know about it ASAP.

[V23]

A few questions I have:

1. Soapy, is there a slimmed down version of your Firefox 4 - Windows 7 style that removes the tabs in the titlebar sections? (as that is now default on Firefox Beta 9 onwards)

2. What should I alter in the Firefox 4 - Windows 7 style in order to move the buttons circled in red in the picture below, to the right?

3. Finally, does anyone have a style/script that would change the navbar colour from blueish to completely white? (refer to pictures below for a rough idea)

Thanks heaps guys.

[SoapyHamHocks Member]

A few questions I have:

1. Soapy, is there a slimmed down version of your Firefox 4 - Windows 7 style that removes the tabs in the titlebar sections? (as that is now default on Firefox Beta 9 onwards)

2. What should I alter in the Firefox 4 - Windows 7 style in order to move the buttons circled in red in the picture below, to the right?

3. Finally, does anyone have a style/script that would change the navbar colour from blueish to completely white? (refer to pictures below for a rough idea)

Thanks heaps guys.

1. Just updated my style.

2. You mean remove the tab styling from the buttons? Search for '/* Tabs */' and remove those two bits of code with '.toolbarbutton-1'.

3.

#navigator-toolbox[tabsontop=true] #nav-bar {
  background: -moz-linear-gradient(#FBFCFD, #E6F0FA 50%, #DCE6F4 50%, #DDE9F7) !important;
}

You can just mess around with the colors until you find something you like.

[V23]

1. Just updated my style.

2. You mean remove the tab styling from the buttons? Search for '/* Tabs */' and remove those two bits of code with '.toolbarbutton-1'.

3.

#navigator-toolbox[tabsontop=true] #nav-bar {
  background: -moz-linear-gradient(#FBFCFD, #E6F0FA 50%, #DCE6F4 50%, #DDE9F7) !important;
}

You can just mess around with the colors until you find something you like.

Wow, thanks for the quick reply. I updated to the newest version of your style and it automatically fixed problem number 2 so that's good. I'll play around with the colours a bit now.

Two things I've noticed:

1. The 'install this user style' button on userstyles.org doesn't work at all so you have to manually copy all the code and do it that way, which is annoying

2. In this latest beta if you are using private browsing mode and close firefox, the next time you start it up it remains in private browsing mode instead of resetting to normal mode.

[ruiderson]

Ruiderson, the Download-Manager style is really perfect! The "about:config" gives me error, but, anyway.

Thanks Deo Domuique!

But, what type of error you had in about:config?

Is not the default warning screen?

If possible, post a print screen about that. :cool:

Thanks

[Makmende]

ruiderson, really awesome styles :woot:.

I really like your download manager style, although i changed the margins and paddings to 10px, much better this way. Additionally you style looks even cooler when combined with the Download manager Tweak add-on (LiNK) With some more tweaking (buttons and maybe hiding the navigation toolbar) it could become amazing.

[Deo Domuique]

I disabled all my styles cause the mess is even bigger...

Take a look... I don't think it supposed to be like that:

The search-box extremely big and overall not painted correctly, I think. Seems it's working on you, dunno what is going on. Maybe it's my fault...

Or... I'm completely wrong and working normal?...

*Soappy, in your updated version, why didn't you add the code you gave me to change tabs pressing on top-edge? Just wondering...

[Deo Domuique]

Can someone tell me how to remove that border where the mouse-pointer is?

I have it only on NoScript-like buttons...

Well... The mouse-pointer not appeared but I meant on Add-on Bar that "Click&Clean" button...

[Drifus]

Also, I found out that the weird bar at the bottom of my browser is not due to any of my styles, it seems to be some sort of bug with Tab Mix Plus. I'll be letting them know about it ASAP.

What weird bar?

Screenshot?

Tab Mix Plus 0.3.8.5pre.110110a no issues here.

I take this opportunity to correct the style of my previous post about addon-bar:

Better alignment of the icons:

"padding: 4px 10px 0 10px;"

#browser-bottombox, #addon-bar > #status-bar {
	background: transparent !important;
	border: none !important;
}
#addon-bar {
	-moz-appearance: none !important;
	border: none !important;
}
#addonbar-closebutton, #addonbar-spring {
	display:none !important;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox {
	position: fixed;
	bottom: 0;
	left: 0;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar {
	padding: 4px 10px 0 10px !important;
	border-top: 20px solid transparent !important;
	border-left: 20px solid transparent !important;
	border-right: 20px solid transparent !important;
	border-radius: 22px 22px 0 0;
	margin-right: 20px !important;
	background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
	background-clip: padding-box;
	box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset;
	position: fixed;
	bottom: -24px;
	right: 20px;
	opacity: 0;
	-moz-transition: bottom 0.25s 0.5s ease-in, opacity 0.1s 0.65s ease-in, right 0.01s 0.75s;
}
#addon-bar .toolbarbutton-1 {
	padding-bottom: 4px !important;
}
#navigator-toolbox:not([customizing]) ~ #browser-bottombox #addon-bar:hover {
	bottom: -2px;
	right: -2px;
	opacity: 1;
	-moz-transition: bottom .25s .25s ease-out, opacity 0.1s 0.25s ease-out;
}
#FindToolbar {
	border: none !important;
}
#FindToolbar .findbar-container {
	margin-bottom: -2px !important;
	margin-left: -2px !important;
	border-radius: 0 2px 0 0;
	background:	-moz-linear-gradient(rgba(255,255,255,.8), rgba(200,200,200,.8)) !important;
	box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 0 2px rgba(255,255,255,.5) inset;
}
#FindToolbar .find-status-icon[status="notfound"] + .findbar-find-status, #FindToolbar .find-status-icon[status="wrapped"] + .findbar-find-status {
  	padding-right: 5px !important;
}
#FindToolbar .find-status-icon[status="notfound"], #FindToolbar .find-status-icon[status="wrapped"] {
 	 margin-left: -1px !important;
}
#FindToolbar .find-status-icon:not([status="notfound"]):not([status="wrapped"]) + .findbar-find-status {
 	 display: none !important;
}

[ruiderson]

ruiderson, really awesome styles :woot:.

I really like your download manager style, although i changed the margins and paddings to 10px, much better this way. Additionally you style looks even cooler when combined with the Download manager Tweak add-on (LiNK) With some more tweaking (buttons and maybe hiding the navigation toolbar) it could become amazing.

Yes, I forgot to sugest it! I'm Using this extension to put dowload manager as a tab and using this script to hide the toolbar, but keeping the top rounded corners (I dunno if this is the better script and have other way to do this, but it works for me). I hope it works for you! :laugh: :

#main-window[stylish-url="chrome://mozapps/content/downloads/downloads.xul"][tabsontop="true"] #navigator-toolbox > *:not([id="TabsToolbar"]):not([id="toolbar-menubar"]){
margin-bottom: -34px !important; 
}
#main-window[stylish-url="chrome://mozapps/content/downloads/downloads.xul"][tabsontop="true"] #unified-back-forward-button {
display: none !important;
}

I disabled all my styles cause the mess is even bigger...

Take a look... I don't think it supposed to be like that:

The search-box extremely big and overall not painted correctly, I think. Seems it's working on you, dunno what is going on. Maybe it's my fault...

Or... I'm completely wrong and working normal?..

Deo Domuique, I've updated the script. Please visit:

http://userstyles.org/styles/42758?r=1295023929

But this time, the search field is too short. When I resize the search field to a number more then 175px, I have this bug:

A blank space after the icon.

I've fixed the big size of search field whith this code:

#textbox.compact{
-moz-appearance:none !important;
background: white !important;
-moz-border-radius: 5px !important;
border: 1px solid #aab4c2!important;
position: fixed !important;
width: 173px !important;  
right: 4px !important;
top: 2px !important;
}

Someone can help us? hahaha

Sorry for the long post.

[Deo Domuique]

Actually I forgot that we're speaking about:config which has big search-box anyway... I was waiting by mistake one like Download Manager's...

[Auroka]

I keep seeing people with a "Firefox 4 styled" Stylish button instead of the default one.

Is there a script for that?

[Auroka]

I keep seeing people with a "Firefox 4 styled" Stylish button instead of the default one.

Is there a script for that?

(Sorry for the double post, can't edit the last one :/)

Just realized that "Stratiform" changes the Stylish button.

[CGar]

What weird bar?

Screenshot?

Tab Mix Plus 0.3.8.5pre.110110a no issues here.

I take this opportunity to correct the style of my previous post about addon-bar:

Better alignment of the icons:

"padding: 4px 10px 0 10px;"

code...

Ok cool, I updated the script, looks better!

I will take a screenshot of the weird bar TMP is giving me when I get home from work. onemen said he is not seeing the issue on XP, so I think he has dismissed it for now.

[Steven P. Administrators]

Can anyone help me edit my "Better App Tabs" stylish script to mimic the default colors and hover behavior.

I just need the App Tabs to do the same as the default Minefield tabs (color, hover color) as I find the app tabs too dark!

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

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
  -moz-appearance: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
}
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button)  {
  background-position: -5px -2px !important;
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.70),rgba(151,160,172,.70)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover {
  background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),rgba(151,160,172,.8)),
                    -moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}
.tabbrowser-tab:not([selected="true"]) {
  text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

Thanks in advance!