The UserChrome / Stylish hack thread

[Starchild]

I figured I would make this for everybody to post their favorite CSS hacks from around userstyles.org and elsewhere. Don't make new threads about it people. As for examples, just look around in any of the code blocks on other forums here to have a better understanding of why this thread was made in the first place. Yes I understand I made a guide using a code block but it was used for a guide that had specific purpose. This thread is mainly a dumping ground that should become full of fun and useful CSS hacks to enhance your experience with Pale Moon.

Also, let's explain the difference between themes and styles, real quick;
A theme is a collection of code (and possibly additional Javascript) which affects the entire browser, in ways one user (the theme author) specified. Themes are more resource-friendly on the browser because a bunch of extra hacks aren't put on top of it to make it look a certain way.
A style is just a little bit of code that can be put on top of an existing browser theme or website which influences the target object how you want it. IN this case, we're talking about anything using cascading style sheet (CSS3+) code alone.

So if you have a favorite user style / Userchrome.css hack you want to share with the world, let's keep the forum clean and post them here instead. I'll make every effort to update this post with everybody's findings and list them in post order.

Acceptable use
* URIs coming from [url=http://www,userstyles.org]userstyles.org[/url] are acceptable only if you explain briefly what the content is. Please do not repost styles that are already installable at userstyles.org just to say you made it, that is plagiarism and it will not stand.
* Code blocks posted shouldn't come from userstyles.org (unless replying to somebody else about improvements to the code, but if doing that use something like pastebin or github gists instead) and blocks found around the internet elsewhere should be credited to the originator of the code. Somewhere in various articles there should be some form of accreditation for the author of the original code (and derivative code, if applicable).

[url=I figured I would make this for everybody to post their favorite CSS hacks from around userstyles.org and elsewhere. Don't make new threads about it people. As for examples, just look around in any of the code blocks on other forums here to have a better understanding of why this thread was made in the first place.

Also, let's explain the difference between themes and styles, real quick;
A theme is a collection of code (and possibly additional Javascript) which affects the entire browser, in ways one user (the theme author) specified. Themes are more resource-friendly on the browser because a bunch of extra hacks aren't put on top of it to make it look a certain way.
A style is just a little bit of code that can be put on top of an existing browser theme or website which influences the target object how you want it. IN this case, we're talking about anything using cascading style sheets (CSS3+) alone.

So if you have a favorite user style / Userchrome.css hack you want to share with the world, let's keep the forum clean and post them here instead. I'll make every effort to update this post with everybody's findings and list them in post order.

Acceptable use
* URIs coming from [url=http://www,userstyles.org]userstyles.org[/url] are acceptable only if you explain briefly what the content is. Please do not repost styles on userstyles.org just to say you made it, that is plagerism and it will not stand.
* Code blocks posted shouldn't come from userstyles.org (unless replying to somebody else about improvements to the code, but if doing that use something like pastebin instead) and blocks found around the internet elsewhere should be credited to the originator of the code. Somewhere in various articles there should be some form of accreditation for the author of the original code (and derivative code, if applicable).

The list:

about:blank system colors
Remove default toolbar styling
(Re-enable) Auto-hide forward button
"Classic" separators
Australis menu cleanup^A
Always show toolbars^F
Facebook - Disable messaging^S
Web of Trust Browser Interface Enhancements
URL bar background based on site security
Hide bookmarks button on non-bookmarked pages
Match address bar RSS icon to RSS button icon
Default back button gradient to match forward button
Hide dropmarkers

Off-topic:
F: Firefox =<28 only
A: Firefox =>29 / Australis only
S: Website style

[petrus]

The first on my list is the about:blank system colors userstyle...
http://userstyles.org/styles/71889/about-blank-system-colours-notice

It makes the background color of about:blank "native colored" instead of white:



To which i also add at the end:

Code: Select all

@-moz-document regexp("http://.*\\.jpg"), regexp("https://.*\\.jpg"), regexp("http://.*\\.png"), regexp("https://.*\\.png"), regexp("http://.*\\.gif"), regexp("https://.*\\.gif"), regexp("http://.*\\.jpeg"), regexp("https://.*\\.jpeg") {

body{background: -moz-dialog !important;}

To make the background color around open images also native, instead of black or whatever.
edit: in Pale Moon the same can be done by setting "browser.display.standalone_images.background_color" to "-moz-dialog"

edit 2: And same for open local files, like .txt:

Code: Select all

@-moz-document url-prefix("file:///") { * {background: -moz-dialog !important; color: -moz-dialogtext !important;}

[jumba]

I found these from the forums. They have been asked for few times and maybe it is good to include them here as well. Helps to find them and users can be directed to this thread.

Pale Moon forum • View topic - Remove toolbar button styling with CSS ?

Code: Select all

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* remove styling from buttons */
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-badge-container,
.toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* hover effect, adjust as-desired */
.toolbarbutton-1:not([disabled]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
.toolbarbutton-1:not([disabled]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
.toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
.toolbarbutton-1:not([disabled]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container {
  background-image: linear-gradient(hsla(0,0%,100%,.8), hsla(0,0%,100%,.5)) !important;
  border-color: hsla(210,54%,20%,.25) hsla(210,54%,20%,.3) hsla(210,54%,20%,.35) !important;
  box-shadow: 0 1px hsla(0,0%,100%,.3) inset,
              0 1px hsla(210,54%,20%,.03),
              0 0 2px hsla(210,54%,20%,.1) !important;
}

Pale Moon forum • View topic - [Solved] How to make Palemoon's foward button auto-hide?

Code: Select all

window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button"],#nav-bar:not([currentset])) > #unified-back-forward-button:not(:hover) > #forward-button[disabled] {
  opacity: 0 !important; 
} 

window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button"],#nav-bar:not([currentset])) > #unified-back-forward-button[forwarddisabled] + #urlbar-container > #urlbar {
  margin-left: -27px !important; 
}

window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button"],#nav-bar:not([currentset])) > #unified-back-forward-button[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar {
  margin-left: -27.01px !important; 
}

[petrus]

Firefox 2 like toolbar separator lines for a classic native look:

Code: Select all

toolbar {border-bottom: 2px groove threedhighlight !important;}

by SFJake from the How do you get a Firefox-style address bar? thread.

[Lootyhoof]

Not necessarily Pale Moon-specific, but I figured it was useful all the same (for Australis users, and as a plug for my work ):

http://userstyles.org/styles/101687/fir ... u-shrinker

It basically shrinks that stupidly gigantic menu you get in Australis with a traditional (mostly), standard menu, with most icons gone. Still fully customisable, of course.

[Starchild]

I don't see how you style affects anything Lootyhoof, nonetheless I will include it and mark it Fx29 only.

I'll toss a style of my own, or rather, posted as an installable userstyles.org style with credit. Dagger from Super User was as tired of the toolbars hiding in about:addons as I was, so he made some code to fix it. Find it here;
Always show toolbars

[Starchild]

Figured I would drop three more styles from my userstyles.org repo;

For users of Facebook's XMPP server, thus have no reason to see messages in Facebook: Facebook - Disable messaging
For users of Web of Trust (about:config; set browser.padlock.urlbar_background to 0): Web of Trust Browser Interface Enhancements
Another take on site security colors in URL bar (again, do the about:config thing): URL bar background based on site security

[Sowmoots]

Always show toolbars

This is unneeded as of Pale Moon 24.3.0. From the release notes:
Improvement of UI consistency
Removal of illogical selective hiding of the navigation bar and toolbars when in tabs-on-top mode (Add-ons manager, permissions manager, etc.). Browser chrome will now never be hidden.

Edit: Might as well contribute to the thread while I'm at it.
Hiding the location bar star button on non-bookmarked pages:

Code: Select all

#star-button:not([starred="true"]) {
    visibility: collapse !important;
}

Use the feed image from the toolbar button to skin the location bar feed button. The height and width rules are for consistency with the star button's size:

Code: Select all

#ub-feed-button {
    list-style-image: url("chrome://browser/skin/Toolbar.png") !important;
    -moz-image-region: rect(0px, 342px, 18px, 324px) !important;
    height: 22px !important;
    width: 22px !important;
}

The large forward button always looked whiter than other toolbar buttons for me, so I use this to maintain consistency:

Code: Select all

#forward-button > image {
    background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1)) !important;
    border-radius: 2.5px !important;
}

[V Tora Bisu V]

Hide Dropmakers (Triangles on Adblock, Url, Menu button)

Code: Select all

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

toolbarbutton:not([class*="tabs-alltabs-button"]) dropmarker {display: none !important;}
toolbarbutton:not([type="menu"]):hover dropmarker {display: -moz-box !important;}
toolbarbutton[type="menu"]:not([class*="bookmark-item"]) image {margin: 0px !important;}

[Lootyhoof]

Reviving this thread for one I think a few people may like: Auto-hide the bookmarks bar!

Code: Select all

#main-window #nav-bar:hover ~ #PersonalToolbar,
#PersonalToolbar:hover {
  visibility: visible !important;
}

#PersonalToolbar {
  visibility: collapse !important;
}

Simply move your mouse cursor over the navigation bar to bring back the bookmarks bar. Move the cursor off again to hide.

[cidrepivoine]

Hello,

I just downloaded Pale Moon and I am super new with all these scripts.
So sorry for this simple (or dumb) question: where do I paste the code mentioned below to auto hide the bookmarks bar?

many thanks

Cidre

Reviving this thread for one I think a few people may like: Auto-hide the bookmarks bar!

Code: Select all

#main-window #nav-bar:hover ~ #PersonalToolbar,
#PersonalToolbar:hover {
  visibility: visible !important;
}

#PersonalToolbar {
  visibility: collapse !important;
}

Simply move your mouse cursor over the navigation bar to bring back the bookmarks bar. Move the cursor off again to hide.

[Lootyhoof]

Hello,

I just downloaded Pale Moon and I am super new with all these scripts.
So sorry for this simple (or dumb) question: where do I paste the code mentioned below to auto hide the bookmarks bar?

many thanks

Cidre

Reviving this thread for one I think a few people may like: Auto-hide the bookmarks bar!

Code: Select all

#main-window #nav-bar:hover ~ #PersonalToolbar,
#PersonalToolbar:hover {
  visibility: visible !important;
}

#PersonalToolbar {
  visibility: collapse !important;
}

Simply move your mouse cursor over the navigation bar to bring back the bookmarks bar. Move the cursor off again to hide.

You can either add it to Stylish (go to Add-Ons Manager - User Styles - click New Style and paste there), or add it to userChrome.css.

[Lootyhoof]

Here's one for you Windows 10 users out there using a theme that hasn't been updated for Windows 10: Firefox/Pale Moon for Windows 10. As the name suggests, it also works on Firefox!

[LimboSlam]

Thanks Lootyhoof for the auto-hide bookmarks bar hack. Without it I've been using Bookmark Autohider. I will now apply this to all Pale Moon!