Share your custom Firefox/Minefield 4 stylish scripts

[vasa1]

At the bottom of most pages in this forum, immediately below the last post, is a section that has this:

Currently viewing all posts. Change threshold?

Hide posts below etc...

I want to style the arrow next to the drop-down list but I just can't figure out how because I can't find any mention of it using DOMi.

This is the code I have currently:

button, input, option, select, textarea { -moz-appearance: none !important; border: 2px solid #555 !important; -moz-border-radius: 4px !important; padding: 0 !important}

Removing that code brings it back to standard Windows XP3 which is quite visible but not what I want.

I also noticed that the "width" of that arrow is influenced by the width I set my scrollbar to. I wish they were not connected.

scrollbar[orient="vertical"] { width: 16px !important}

[foxxyn8]

At the bottom of most pages in this forum, immediately below the last post, is a section that has this:

Currently viewing all posts. Change threshold?

Hide posts below etc...

I want to style the arrow next to the drop-down list but I just can't figure out how because I can't find any mention of it using DOMi.

This is the code I have currently:

button, input, option, select, textarea { -moz-appearance: none !important; border: 2px solid #555 !important; -moz-border-radius: 4px !important; padding: 0 !important}

Removing that code brings it back to standard Windows XP3 which is quite visible but not what I want.

I also noticed that the "width" of that arrow is influenced by the width I set my scrollbar to. I wish they were not connected.

scrollbar[orient="vertical"] { width: 16px !important}

you can't override the default that's defined in forms.css:

select > input[type="button"] {
  width: 12px;
  height: 12px;
  white-space: nowrap;
  position: static !important;
  background-image: url("arrow.gif") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  -moz-appearance: menulist-button;

Notice the !important rules which is what prevents you styling it. I hide scrollbars on content so I don't see those dropdown buttons at all. My own workaround was to use the background properties to add a dropdown arrow to the select box itself. Of course using that method I lose the hover effect, but for me it was a compromise.

[vasa1]

you can't override the default that's defined in forms.css:

...

Notice the !important rules which is what prevents you styling it. I hide scrollbars on content so I don't see those dropdown buttons at all. My own workaround was to use the background properties to add a dropdown arrow to the select box itself. Of course using that method I lose the hover effect, but for me it was a compromise.

Okay, thanks! I should have asked first rather than trying to figure it out :D

I had got as far as forms.css (resource://gre-resources/forms.css) but the !important; did not register in my mind :(

[vasa1]

.... I hide scrollbars on content ...

How do you selectively hide it on content and not "internally"? For example, Alt, Tools, Options, Contents, Fonts and Colors. Here a scrollbar may be helpful (though the arrow keys are actually enough).

If I use:

scrollbar { display: none !important}

I won't be seeing them anywhere, in chrome (= UI ? ) or content. Isn't that correct?

[vasa1]

.... I hide scrollbars on content ...

This is what seems to be working for me as a separate Stylish sheet:

@namespace html url(http://www.w3.org/1999/xhtml);
scrollbar {display: none!important}

I still see scrollbars in chrome but not in content. And, as foxxyn8 described, the unmodifiable down arrow is gone on content.

[foxxyn8]

Okay, thanks! I should have asked first rather than trying to figure it out :D

I have a tendency to try and figure these things out for myself, too. I get more satisfaction that way ;)

[Deo Domuique]

Foxxyn, I use custom Windows theme and you know Fx became white...

Do you have saved somewhere the native code for the 2-pane Firefox Menu? It is somewhere here but the thread is too long to search it.

If not, I'll search it but just asking before I do it.

[foxxyn8]

Foxxyn, I use custom Windows theme and you know Fx became white...

Do you have saved somewhere the native code for the 2-pane Firefox Menu? It is somewhere here but the thread is too long to search it.

If not, I'll search it but just asking before I do it.

  #appmenu-popup {
    -moz-appearance: none;
    background: white;
    border: 1px solid ThreeDShadow;
  }
  #appmenuPrimaryPane {
    background-color: rgba(255,255,255,0.5);
    padding: 2px;
    -moz-border-end: none;
  }
  #appmenuSecondaryPane {
    background-color: #f1f5fb;
    box-shadow: 1px 0 2px rgb(204,214,234) inset;
    -moz-padding-start: 3px;
    -moz-padding-end: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    font-family: "Segoe UI Semibold", "Segoe UI", sans-serif;
  }
  #appmenuSecondaryPane:-moz-locale-dir(rtl) {
    box-shadow: -1px 0 2px rgb(204,214,234) inset;
  }

  #appmenuPrimaryPane menupopup {
    -moz-appearance: none;
    background-image: -moz-linear-gradient(left, white 26px, ThreeDLightShadow 26px,
                                           ThreeDLightShadow 27px, ThreeDHighlight 27px,
                                           ThreeDHighlight 28px, white 28px);
    border: 3px solid;
    -moz-border-top-colors: ThreeDShadow white;
    -moz-border-bottom-colors: ThreeDShadow white;
    -moz-border-left-colors: ThreeDShadow white;
    -moz-border-right-colors: ThreeDShadow white;
  }

  #appmenuSecondaryPane menupopup {
    -moz-appearance: none;
    background-image: -moz-linear-gradient(left, #f1f5fb 26px, ThreeDLightShadow 26px,
                                           ThreeDLightShadow 27px, ThreeDHighlight 27px,
                                           ThreeDHighlight 28px, #f1f5fb 28px);
    border: 3px solid;
    -moz-border-top-colors: ThreeDShadow #f1f5fb;
    -moz-border-bottom-colors: ThreeDShadow #f1f5fb;
    -moz-border-left-colors: ThreeDShadow #f1f5fb;
    -moz-border-right-colors: ThreeDShadow #f1f5fb;
  }

[Deo Domuique]

Really thank you, you saved from searching countless pages.

[Deo Domuique]

Also, do you know how I can get back all shadows of menus? For example "right click" or bookmarks drop down menus or even the shadow of 2-pane main menu...

Is there any way?

In IE9 the shadows workin pretty good. Only in Fx lost 'em.

[foxxyn8]

Also, do you know how I can get back all shadows of menus? For example "right click" or bookmarks drop down menus or even the shadow of 2-pane main menu...

Is there any way?

In IE9 the shadows workin pretty good. Only in Fx lost 'em.

I have no idea, Deo. I get the shadow on the appmenu and the tabs context menu, but nowhere else. Could maybe be a bug?

[apathy]

Also, do you know how I can get back all shadows of menus? For example "right click" or bookmarks drop down menus or even the shadow of 2-pane main menu...

Is there any way?

In IE9 the shadows workin pretty good. Only in Fx lost 'em.

It's a bug with 3rd party visual styles. You lose menu shadows and the font rendering is screwed up.

[Deo Domuique]

The font rendering not with every theme been screwed up. I know very well what you mean...

For example with Soapy's "Windows 7 Native" theme, yes, the fonts become bad. But with another, random theme... not.

Seems to me something specific triggers this bug while in some themes included ( the unknown factor ) and in some others, not.

Anyway...

Foxxyn, long time ago you gave me this simple code

#urlbar,
.searchbar-textbox {
  border-radius: 0 !important;
}

But I get a small bug... The backgrounds of identity box and stop/reload aren't squared. How can I make 'em? Can you please fill those corners?

[foxxyn8]

The font rendering not with every theme been screwed up. I know very well what you mean...

For example with Soapy's "Windows 7 Native" theme, yes, the fonts become bad. But with another, random theme... not.

Seems to me something specific triggers this bug while in some themes included ( the unknown factor ) and in some others, not.

Anyway...

Foxxyn, long time ago you gave me this simple code

#urlbar,
.searchbar-textbox {
  border-radius: 0 !important;
}

But I get a small bug... The backgrounds of identity box and stop/reload aren't squared. How can I make 'em? Can you please fill those corners?

#identity-box,
#urlbar > toolbarbutton {
       border-radius: 0 !important;
}

[Deo Domuique]

That's it! :)

Anyone did these mockups?

http://stephenhorlander.com/pages/firefox-future-mockups/button-vs-nobutton-comparison.html

The "No Buttons" did it Spew or Soapy, one of them. The other with "Buttons" ?

[dysgenics]

That's it! :)

Anyone did these mockups?

http://stephenhorlander.com/pages/firefox-future-mockups/button-vs-nobutton-comparison.html

The "No Buttons" did it Spew or Soapy, one of them. The other with "Buttons" ?

http://spewboy.deviantart.com/journal/

he has a link to his stylish code for it there, not sure if it has the other 1

[SoapyHamHocks Member]

That's it! :)

Anyone did these mockups?

http://stephenhorlander.com/pages/firefox-future-mockups/button-vs-nobutton-comparison.html

The "No Buttons" did it Spew or Soapy, one of them. The other with "Buttons" ?

We are working on those for Stratiform. Along with the tab and icon style.

[crankyim]

I want a specific site, the tab (select/unselect) color is always different

for example

#main-window[stylish-url^="https://www.neowin.net"] tab[selected="true"] {
background: rgba(0,0,0, .5) !important;
color: white !important;
font-weight: bold !important;
text-shadow: 1px 1px 2px black !important
}

But this code only select tab works.How edit code unselect/select tab different color?

[SoapyHamHocks Member]

I want a specific site, the tab (select/unselect) color is always different

for example

#main-window[stylish-url^="https://www.neowin.net"] tab[selected="true"] {
background: rgba(0,0,0, .5) !important;
color: white !important;
font-weight: bold !important;
text-shadow: 1px 1px 2px black !important
}

But this code only select tab works.How edit code unselect/select tab different color?

Try something like this:

#main-window[stylish-url^="https://www.neowin.net"] .tabbrowser-tab[selected="true"] {
  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
}

[crankyim]

Sorry bad English but this code dont work

Specific site always same color (select/unselect)

as

tabbrowser-tab[selected=true] or tabbrowser-tab[unselected=true]

[SoapyHamHocks Member]

Sorry bad English but this code dont work

Specific site always same color (select/unselect)

as

tabbrowser-tab[selected=true] or tabbrowser-tab[unselected=true]

A tab that isn't selected would be 'tabbrowser-tab:not([selected=true])'.

[crankyim]

Sorry wrong expression

active/inactive tab always same color but only Specific site as ColorfulTabs

[foxxyn8]

Sorry wrong expression

active/inactive tab always same color but only Specific site as ColorfulTabs

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.

[vasa1]

I don't know if this is possible but I'll ask in any case ...

Quite often I open several tabs (in the background) from a source page. Since I sometimes have to use an unreliable net connection, what can happen is that while I'm busy opening the new tabs, I don't notice that I'm getting a 404 (or similar) error.

Is there some way to have the relevant tab (with the 404 message) styled so that it would catch my peripheral vision?

I'm going to try and figure it out for a day but would appreciate knowing if it can't be done at all!

[vasa1]

I don't know if this is possible but I'll ask in any case ...

Quite often I open several tabs (in the background) from a source page. Since I sometimes have to use an unreliable net connection, what can happen is that while I'm busy opening the new tabs, I don't notice that I'm getting a 404 (or similar) error.

Is there some way to have the relevant tab (with the 404 message) styled so that it would catch my peripheral vision?

I'm going to try and figure it out for a day but would appreciate knowing if it can't be done at all!

.tabbrowser-tab[label*="404 - No such Domain (Privoxy@localhost)"] {background: pink!important}

.tabbrowser-tab[label*="503 - Connect failed (Privoxy@localhost)"] {background: pink!important}

I got the "idea" here from the styling of the Add-on Manager tab: http://userstyles.org/styles/37044/firefox-4-about-addons-flat-dark. So yet another big thank you :)