Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

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

Contributor

Varemenos

Posted
Posted

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?

Grand Master

dnast

Posted
Posted

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. ;)

Contributor

Varemenos

Posted
Posted

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

Collaborator

vasa1

Posted
Posted

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?

Collaborator

vasa1

Posted
Posted

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."

Community Regular

foxxyn8

Posted
Posted

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/

Community Regular

therat

Posted
Posted

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

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

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

Community Regular

foxxyn8

Posted
Posted

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

Collaborator

vasa1

Posted
Posted

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:

post-369494-0-77096400-1305125254.png

Community Regular

foxxyn8

Posted
Posted

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

Collaborator

vasa1

Posted
Posted 

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

Community Regular

foxxyn8

Posted
Posted

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:

post-350326-0-50179800-1305131964.png

post-350326-0-03871400-1305131983.png

Collaborator

vasa1

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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#

Collaborator

vasa1

Posted
Posted

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.

Collaborator

vasa1

Posted
Posted

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.

post-369494-0-94988700-1305296683.png

Community Regular

foxxyn8

Posted
Posted

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.

post-369494-0-94988700-1305296683.png

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

Collaborator

vasa1

Posted
Posted

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

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

  • Recently Browsing   0 members

    • No registered users viewing this page.