Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Experienced

Samurizer

Posted
Posted

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.

Neowinian

crankyim

Posted
Posted

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.

Community Regular

foxxyn8

Posted
Posted

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

Collaborator

vasa1

Posted
Posted

Hello everyone,

firefox4.png

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.

Collaborator

vasa1

Posted
Posted

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?

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

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

Collaborator

vasa1

Posted
Posted

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

Grand Master

Semtex

Posted
Posted

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.

Grand Master

Solid Knight

Posted
Posted

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.

Community Regular

foxxyn8

Posted
Posted

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

Collaborator

Deo Domuique

Posted
Posted

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

post-350150-0-08013900-1306855896.png

Experienced

Mikeparkie

Posted
Posted

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

post-15394-0-51460000-1307389443.png

Experienced

Samurizer

Posted
Posted

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.

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.