Share your custom Firefox/Minefield 4 stylish scripts

[+Heartripper Subscriber¹]

Damn... The dark color of Nightly is totally awesome... And the blue of Aurora of course. Actually, personally I think everything is better than the default orange color :p

Just the border radius needed to change to 2px so it fits better.

Which are the little changes you're talking about ( from the original that you took from bugzilla ) ?

i took the original patch, just added the #main-window[titlemodifier= * ] to select the channel. In the original patch there is also a javascript piece that sets an attribute to #appbutton containing the channel

[NeoRev]

You guys probably don't do styling for Mac OS X, huh? Oh well...... didn't hurt to ask (owen wilson voice) :/

[nub]

You guys probably don't do styling for Mac OS X, huh? Oh well...... didn't hurt to ask (owen wilson voice) :/

These should work just fine on macs (or at least I would assume macs would use the same method of styling)

[Varemenos]

Im trying to make a stylish script for images but i think im using the wrong selection script.

what i got so far:

@namespace url(http://www.w3.org/1999/xhtml);

#main-window[stylish-domain*=".img"] body{
background-color: #000;
}

for now it only has .jpg, but i wanna do the same for .gif and .png too

So any ideas?

[dnast]

Not sure what you're trying to do exactly. My best guess is that you want to have a black background when there's only an image loaded in the browser (i.e. not in a web page).

If so, it would be something more like:

#main-window[stylish-url$=".jpg"] body,
#main-window[stylish-url$=".gif"] body,
#main-window[stylish-url$=".png"] body {
  background-color: #000 !important;
}

I'm not on my PC right now so I can't check, but it should be pretty close. Keep in mind that not every image file on the web has a file extension or at least the expected one though (like images directly served from a PHP script), so it wouldn't cover many cases.

Simply changing the default background color in Options > Content would probably do the trick, as well. You'd probably get better results, too. ;)

[Varemenos]

Actually i pasted wrong code, what i was trying to copy/paste was:

@namespace url(http://www.w3.org/1999/xhtml);
body[stylish-domain*=".img"]{
  background-color: #000;
}

The background-color is just a sample attribute i added just to have something inside the bracket xD

edit: even though i think what you gave me was correct, it didnt work

[vasa1]

I need a little more help, please!

I have this:

::-moz-selection {background: #377 !important; color: #000 !important}

which I use together with a black background and text colored #666622.

So when I highlight text mostly to copy elsewhere, the text background turns sort of teal and the font color changes to black.

The problem comes when I open a new application such as WordPad to paste the copied material keeping the now inactive browser window and the highlighted text still visible. The stuff promptly changes color: the background becomes a light grey and the font color changes to white.

Is there a way to control that, make things a little darker?

[vasa1]

I need a little more help, please!

I have this:

::-moz-selection {background: #377 !important; color: #000 !important}

which I use together with a black background and text colored #666622.

So when I highlight text mostly to copy elsewhere, the text background turns sort of teal and the font color changes to black.

The problem comes when I open a new application such as WordPad to paste the copied material keeping the now inactive browser window and the highlighted text still visible. The stuff promptly changes color: the background becomes a light grey and the font color changes to white.

Is there a way to control that, make things a little darker?

I tried this:

::-moz-selection:-moz-window-inactive  {background: #555 !important; color: black !important}

but I got this error:

"Found trailing token after pseudo-element which must be the last part of a selector:':'. Ruleset ignored due to bad selector."

[foxxyn8]

I tried this:

::-moz-selection:-moz-window-inactive  {background: #555 !important; color: black !important}

but I got this error:

"Found trailing token after pseudo-element which must be the last part of a selector:':'. Ruleset ignored due to bad selector."

you can't style it specially for window inactive in Firefox.

see here: http://css-tricks.com/window-inactive-styling/

[vasa1]

you can't style it specially for window inactive in Firefox.

see here: http://css-tricks.com/window-inactive-styling/

Looks like you've been there, done that!

Thanks a lot for clearing that up, even though it's a no-go!

[therat]

How do I change the colour of the App button from Orange to the blue of the Nightly build. This is what I have at the moment for the app button, all I need is the colour change.

#appmenu-button .button-text { 
   display:none !important;
}

#appmenu-button .button-menu-dropmarker::before { 
   content: "Creaky's PC"; 
   margin-left: -4px;
}

#appmenu-button .dropmarker-icon {
   display: none !important;
}

[+Heartripper Subscriber¹]

How do I change the colour of the App button from Orange to the blue of the Nightly build. This is what I have at the moment for the app button, all I need is the colour change.

if you are on the nightly, you can use this:

http://userstyles.org/styles/47549/firefox-channel-based-appbutton-color

otherwise:

#appmenu-button{
  -moz-border-left-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9) !important;
  -moz-border-bottom-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9) !important;
  -moz-border-right-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9) !important;
  background-image: -moz-linear-gradient(hsl(211,33%,32%), hsl(209,53%,10%) 95%) !important;
  border-color: hsla(210,59%,13%,.9) !important;
  box-shadow: 0 1px 0 hsla(210,48%,90%,.15) inset,
              0 0 2px 1px hsla(211,65%,85%,.15) inset !important;
}

#appmenu-button:hover:not(:active):not([open]) {
  background-image: -moz-radial-gradient(center bottom, farthest-side, hsla(210,48%,90%,.5) 10%, hsla(210,48%,90%,0) 70%),
                    -moz-radial-gradient(center bottom, farthest-side, hsla(211,70%,83%,.5), hsla(211,70%,83%,0)),
                    -moz-linear-gradient(hsl(211,33%,32%), hsl(209,53%,10%) 95%) !important;
  border-color: hsla(210,59%,13%,.9) !important;
  box-shadow: 0 1px 0 hsla(210,48%,90%,.15) inset,
              0 0 2px 1px hsla(210,48%,90%,.4) inset,
              0 -1px 0 hsla(210,48%,90%,.2) inset !important;
}

#appmenu-button:hover:active,
#appmenu-button[open] {
  background-image: -moz-linear-gradient(hsl(211,33%,26%), hsl(209,53%,6%) 95%) !important;
  box-shadow: 0 2px 3px rgba(0,0,0,.4) inset,
              0 1px 1px rgba(0,0,0,.2) inset !important;
}

[foxxyn8]

if you are on the nightly, you can use this:

http://userstyles.org/styles/47549/firefox-channel-based-appbutton-color

otherwise:

You may want to keep the color change of the appmenu button when in private browsing mode. If so, try this (it's Heartripper's code, just amended to exclude private browsing mode):

#main-window:not([privatebrowsingmode]) #appmenu-button{
  -moz-border-left-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9) !important;
  -moz-border-bottom-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9) !important;
  -moz-border-right-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9) !important;
  background-image: -moz-linear-gradient(hsl(211,33%,32%), hsl(209,53%,10%) 95%) !important;
  border-color: hsla(210,59%,13%,.9) !important;
  box-shadow: 0 1px 0 hsla(210,48%,90%,.15) inset,
              0 0 2px 1px hsla(211,65%,85%,.15) inset !important;
}

#main-window:not([privatebrowsingmode]) #appmenu-button:hover:not(:active):not([open]) {
  background-image: -moz-radial-gradient(center bottom, farthest-side, hsla(210,48%,90%,.5) 10%, hsla(210,48%,90%,0) 70%),
                    -moz-radial-gradient(center bottom, farthest-side, hsla(211,70%,83%,.5), hsla(211,70%,83%,0)),
                    -moz-linear-gradient(hsl(211,33%,32%), hsl(209,53%,10%) 95%) !important;
  border-color: hsla(210,59%,13%,.9) !important;
  box-shadow: 0 1px 0 hsla(210,48%,90%,.15) inset,
              0 0 2px 1px hsla(210,48%,90%,.4) inset,
              0 -1px 0 hsla(210,48%,90%,.2) inset !important;
}

#main-window:not([privatebrowsingmode]) #appmenu-button:hover:active,
#main-window:not([privatebrowsingmode]) #appmenu-button[open] {
  background-image: -moz-linear-gradient(hsl(211,33%,26%), hsl(209,53%,6%) 95%) !important;
  box-shadow: 0 2px 3px rgba(0,0,0,.4) inset,
              0 1px 1px rgba(0,0,0,.2) inset !important;
}

[therat]

Works perfectly, thanks.

[vasa1]

I have a problem in that I don't want to see the two white vertical lines at the inner left and inner right of my tab scroll arrows. I did my best with DOMi but couldn't manage to work out what they are or where they come from. They come only after the scroll bar buttons (up or down) appear and not when I have fewer tabs.

This is the picture:

[foxxyn8]

I have a problem in that I don't want to see the two white vertical lines at the inner left and inner right of my tab scroll arrows. I did my best with DOMi but couldn't manage to work out what they are or where they come from. They come only after the scroll bar buttons (up or down) appear and not when I have fewer tabs.

This is the picture:

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
      -moz-border-image: none !important;
}

[vasa1]

.tabbrowser-arrowscrollbox > .scrollbutton-up,
.tabbrowser-arrowscrollbox > .scrollbutton-down {
      -moz-border-image: none !important;
}

Perfect. As usual! But I would love to know how you figured this out. I scratched my head raw trying to figure it out with DOMi. I know it's difficult to describe in words, but if you could post a screenie of the relevant section, that would be most appreciated :)

[foxxyn8]

Perfect. As usual! But I would love to know how you figured this out. I scratched my head raw trying to figure it out with DOMi. I know it's difficult to describe in words, but if you could post a screenie of the relevant section, that would be most appreciated :)

here ya go:

[vasa1]

here ya go:

...

Thanks, yet again! But isn't it quite a bit of knowing where to look in the first place? Mr. Clueless will digest this overnight and hope something is assimilated.

Also, couldn't help noticing you've styled the DOMi screen as well :D ! Is the style available for stealing/borrowing?

(It does look like quite a few people like dark styles. Now if only page designers would realize that ...)

[foxxyn8]

Thanks, yet again! But isn't it quite a bit of knowing where to look in the first place? Mr. Clueless will digest this overnight and hope something is assimilated.

Also, couldn't help noticing you've styled the DOMi screen as well :D ! Is the style available for stealing/borrowing?

(It does look like quite a few people like dark styles. Now if only page designers would realize that ...)

Extensions help: https://addons.mozilla.org/en-US/firefox/addon/inspect-context/

I can give you the code for styling the domi window if you want, but I haven't done any code cleanup on it so it's kinda messy - http://pastebin.com/NL1vM1wj#

[vasa1]

Extensions help: https://addons.mozilla.org/en-US/firefox/addon/inspect-context/

I can give you the code for styling the domi window if you want, but I haven't done any code cleanup on it so it's kinda messy - http://pastebin.com/NL1vM1wj#

@foxxyn8, thanks for the nth time :)

I don't want to do too much with the DOMi window, just darken it without losing contrast between text and background; messy code may not be an issue for me.

[vasa1]

I've modified the Add-ons page using this code:

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

@-moz-document url(chrome://mozapps/content/extensions/extensions.xul), url(about:addons) {
#back-btn { display: none !important}
#forward-btn { display: none !important}
.icon { display: none !important}
.category-icon { display: none !important}
.description { display: none !important}
.warning-icon { display: none !important}
#addons-page { background-image: none !important}
.addon-view { background-image: none !important}
.view-header  { background-image: none !important}
.button-link { display: none !important} /*hides "more" button*/
.warning { display: none !important}
.name { font-size: 15px !important; background: none !important; border: none !important}
.version { font-size: 15px !important; background: none !important; border: none !important}
.preferences *, .enable *, .disable *, .remove * { background: none !important; border: none !important }

}

I want help to make the add-on name and version number to appear on the same row as the buttons to the right of each add-on but which are one row below. Is it possible? I don't know how to proceed.

[foxxyn8]

I've modified the Add-ons page using this code:

I want help to make the add-on name and version number to appear on the same row as the buttons to the right of each add-on but which are one row below. Is it possible? I don't know how to proceed.

.addon .content-inner-container {-moz-box-orient: horizontal !important;}

[vasa1]

.addon .content-inner-container {-moz-box-orient: horizontal !important;}

Perfect. Thank You!

But now there's a blank line which I suppose can also be removed. Don't tell me. I'll try and figure it out and if I can't get it, I'll ask! :D

[vasa1]

Perfect. Thank You!

But now there's a blank line which I suppose can also be removed. Don't tell me. I'll try and figure it out and if I can't get it, I'll ask! :D

Got it. That plus some more fiddling gives this:

@-moz-document url(chrome://mozapps/content/extensions/extensions.xul), url(about:addons) {
#back-btn { display: none !important}
#forward-btn { display: none !important}
.icon { display: none !important}
.category { height: 40px !important; padding-top: 3px !important}
.category-icon { display: none !important}
.category-name { font-size: 15px !important; font-weight: normal !important}
.description { display: none !important}
.warning-icon { display: none !important}
#addons-page { background-image: none !important}
.addon-view { background-image: none !important}
.view-header  { background-image: none !important}
.button-link { display: none !important} /*hides "more" button*/
.warning { display: none !important}
.name { font-size: 15px !important; background: none !important; border: none !important}
.version { font-size: 15px !important; background: none !important; border: none !important}
.disabled-postfix { font-size: 15px !important; background: none !important; border: none !important}
.preferences *, .enable *, .disable *, .remove * { background: none !important; border: none !important }
.addon .content-inner-container {-moz-box-orient: horizontal !important}
.addon .content-container { height: 27px !important}
}