Share your custom Firefox/Minefield 4 stylish scripts

[Samurizer]

Trying to do a bit of my own styling, but I need some help on how the syntax goes.

I need to apply a style to all elements in a field except to a few excluded ones. Just as an example, I'd like to remove box-shadow from all toolbar buttons except, say, the reload/stop button. The code to remove box-shadow is:

#nav-bar .toolbarbutton-1 {
  box-shadow: none !important;
}

Would appreciate advice on how to change the code snippet above so that the stop/reload button is excluded.

Also, how do I specify various styles to only take effect when the toolbar icon size is set to small, tabs-on-top is true, window is maximized, etc? Thanks.

[crankyim]

try this:

#tabbrowser-tabs .tabbrowser-tab[image^="https://www.neowin.net"] {
  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.5) 50%),
                    -moz-linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)) !important;
  color: white !important;
  font-weight: bold !important;
  text-shadow: 1px 1px 2px black !important;
}

you can't use the #main-window stylish attributes to style an inactive tab in this case because those values are determined by the active tab.

Thank you very much.

[foxxyn8]

Trying to do a bit of my own styling, but I need some help on how the syntax goes.

I need to apply a style to all elements in a field except to a few excluded ones. Just as an example, I'd like to remove box-shadow from all toolbar buttons except, say, the reload/stop button. The code to remove box-shadow is:

#nav-bar .toolbarbutton-1 {
  box-shadow: none !important;
}

Would appreciate advice on how to change the code snippet above so that the stop/reload button is excluded.

#nav-bar .toolbarbutton-1:not(#reload-button):not(#stop-button) {
  box-shadow: none !important;
}

Also, how do I specify various styles to only take effect when the toolbar icon size is set to small, tabs-on-top is true, window is maximized, etc? Thanks.

#nav-bar[iconsize="small"]

#main-window[tabsontop="true"]

#main-window[tabsontop="false"]

#main-window[sizemode="maximized"]

#main-window[sizemode="normal"]

really, you jusat need to learn to use DOMi

[Samurizer]

really, you jusat need to learn to use DOMi

Thanks! I was looking in vain for documentation from Mozilla, guess I was looking at the wrong place.

[foxxyn8]

Thanks! I was looking in vain for documentation from Mozilla, guess I was looking at the wrong place.

you may find this useful as well:

https://developer.mozilla.org/en/CSS_Reference

[Sjoerd de Bruin]

Hello everyone,

Is it possible to change this firefox icon to the config icon from IE9, and is it also possible to move the tabbar to the right of the awesomebar?

Thanks in advance,

Sjoerd

[vasa1]

Hello everyone,

Is it possible to change this firefox icon to the config icon from IE9, and is it also possible to move the tabbar to the right of the awesomebar?

Thanks in advance,

Sjoerd

You should be able to do the second thing using the "customize palette" found by Alt > View > Toolbars > Customize.

[Sjoerd de Bruin]

You should be able to do the second thing using the "customize palette" found by Alt > View > Toolbars > Customize.

No, it's not possible to move the tabbar.

[em3]

No, it's not possible to move the tabbar.

You can move the back/forward buttons and URL bar to the tab bar though.

[Sjoerd de Bruin]

Yes, but that changes the size of the back and forward buttons.

[vasa1]

Fx6 has the about:permissions page. To make it dark and boring I'm using

/*** about:permissions ***/
#permissions-page,
#permissions-page #permissions-box,
#permissions-page #sites-box,
#permissions-page #sites-list,
#permissions-page .site,
#permissions-page .box-inherit.scrollbox-innerbox {
    color: #85854a !important;
    background: black !important;
}

I want to know if there's a way to avoid repeating use of "#permissions-page" above without losing specificity.

In the code below,

#permissions-page .site-favicon, .pref-icon {
  display:none!important
}

Does the use of #permission-page just once mean that both .site-favicon and .pref-icon are specific to #permissions-page or can it be that .pref-icon, if it appears on any other page, will also be hidden?

[SoapyHamHocks Member]

Does the use of #permission-page just once mean that both .site-favicon and .pref-icon are specific to #permissions-page or can it be that .pref-icon, if it appears on any other page, will also be hidden?

Use :-moz-any

#permissions-page :-moz-any(#permissions-box,#sites-box,#sites-list,.site,.box-inherit.scrollbox-innerbox) {
  color: #85854a !important;
  background: black !important;
}

[Deo Domuique]

Guys, how you dissapear/close the ~1px gap between tabs ( and the "+" )?

[Deo Domuique]

LoL I tried this by luck and seems it's working...

.tabbrowser-tab {
  margin-right: -1px !important;
}

If you think it's not the right way to accomplish the task, just tell me :)

[sopharine]

Is it possible to only show text on tab without favicons?

[vasa1]

Use :-moz-any

#permissions-page :-moz-any(#permissions-box,#sites-box,#sites-list,.site,.box-inherit.scrollbox-innerbox) {
  color: #85854a !important;
  background: black !important;
}

Thank you, Soapy!

This is what I have now:

/*** about:permissions ***/

#permissions-content {
border: 1px solid #333 !important;
}

#permissions-page,
#permissions-page :-moz-any(
                            #permissions-box,
                            #sites-box,
                            #sites-list,
                            .site,
                            .box-inherit.scrollbox-innerbox) {
  -moz-appearance: none !important;
  color: #85854a !important; 
  border: 1px solid #333 !important;
  background: black !important;
}

#permissions-page .site-favicon, .pref-icon { display: none !important; }

Is it possible to only show text on tab without favicons?

Would something like this help?

/* Show tab favicon only on pinned tab */
.tabbrowser-tab:not([pinned]) .tab-icon-image {
  display: none !important;
}

[Semtex]

Hi

I'm using this script to change my URL bar color, font family, radius etc. But since Aurora is 6.0a text in url bar is not aliased, I know that Mozilla change the way of displaying addresses in url bar, is there some modification to fix this problem?

#urlbar, #searchbar > *, .findbar-textbox{
  -moz-appearance: none !important;
  background: rgba(20,20,20,.45) !important;
  -moz-border-radius: 2px !important;
  font-size: 9pt !important;
  font-weight: bold !important;
  font-family: Segoe UI !important;
  color: #ffffff !important;

}

Other thing , is there some way to get identity box as it was in Fx 4.xx? also for default page, it was bit gray but not so white like now, also not covering whole space in box.

[Semtex]

I've fix identity box and domain highlight as well, so my problems are gone... ;)

[Solid Knight]

I'm attempting to style my tab-overflow buttons (.scrollbutton-up, .scrollbutton-down) to be styled the same as my tabs and new tab button; however, the tab-overflow buttons grey out when the button becomes disabled and I can't seem to find anything that stops this.

[foxxyn8]

I'm attempting to style my tab-overflow buttons (.scrollbutton-up, .scrollbutton-down) to be styled the same as my tabs and new tab button; however, the tab-overflow buttons grey out when the button becomes disabled and I can't seem to find anything that stops this.

#tabbrowser-tabs .scrollbutton-up[disabled],
#tabbrowser-tabs .scrollbutton-down[disabled] {
    opacity: 1 !important;
}

[Deo Domuique]

Foxxyn, do you know what's the hex-code of default Firefox blu-ish color?

[Deo Domuique]

Nevermind for the color... I managed to do that trick for custom-themes... Renamed it to "aero.msstyles" and Firefox recognized it. Not entirely perfectly, but it's ok. Got back colors and aero windows on some functions. Can't get back shadows on bookmarks-folder and right click context menu. Anyway.

Now I'd like something more important... How I move 2-3pixels ( bottom ) this ( not title bar- all other content and only when in normal mode, not maximized ):

[Excelsis]

#main-window[sizemode="normal"] #toolbar-menubar{
    margin-top: 3px !important;
}

Should work fine.

[Mikeparkie]

Hi there, I need some help with remove the divider from gmail. Currently I have the following script doing the majority, invite, chat etc but not sure what i need to add... Thanks in advance

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

/* HIDE CHAT AND INVITE BOXES */
.pS.s, .pS.pY {
  display: none !important;
}

[Samurizer]

Nevermind for the color... I managed to do that trick for custom-themes... Renamed it to "aero.msstyles" and Firefox recognized it. Not entirely perfectly, but it's ok.

I have the reverse problem; I'd like to get rid of that blue tint on Fx5. Anyone know how do I do that? Thanks.