How can I force my css styles when I visit a website?

Question

Imagine I want to visit webmaster.stackexchange.com (or an other website) everyday but I want to change the blue color of header (change it to red for instance).

Is it possible to force personal css styles when I visit a website? If so, how can I do it? Maybe a web browser tip or a plugin? (I use Chrome)

I would like an automatic solution, change css with web browser console (F12 on Chrome) for each page I visit is not interesting.

Solution 1

The general concept you're after is "user stylesheets."
Stylish (Chrome / Firefox) gives you an easy way to manage per-site styles and toggle them on/off as needed.

Solution 2

In 2017 Stylish became very heavy and full of bloat features so I decided to move away from it.

I have created an alternative - Styler extension - it's lightweight and has minimal style but powerful. You can add custom CSS and JavaScript/jQuery code.

Styler Extension for Google Chrome

Styler Extension for Firefox

Source code

Why I love it and use it on daily basis - mostly because of autosaving and auto-syncing between all Google Chrome browsers (on Mac, Win and Linux).

Solution 3

Since 2018 in Chrome (65) the browser's integrated DevTools has a feature called Local Overrides 1. As such, there is no need for an add-on or extension like StyleBot, Stylish or Greasemonkey.

Local Overrides allow rewrites of CSS, JS and DOM on any live site. Changes are saved in a local folder and they override the contents of the live environment.

This can be accessed under Developer Tools > Sources >> Overrides

This allows you to select a custom local folder that will contain CSS and JS that will override the current website's own CSS and JS.

Solution 4

Greasemonkey ... a google search pointed me to Tampermonkey (https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=en)

View more solutions

Comments

[Su']

While technically you can modify the styling of documents with Grease/Tampermonkey, it's not really what they're intended for, at least not in isolation. Userscripts are more suited to messing with the actual function (and sometimes structure) of pages.

[Zistoloen]

Thanks Su'! But unfortunately it doesn't work in private browsing mode.

[ADTC]

@Zistoloen have you enabled the extension to work in private browsing? Extensions are disabled by default for private browsing (incognito), but they can be enabled to work there (at your risk).

[ADTC]

Nice! It's not widely known. And it works seamlessly.

[absynce]

It says it's open source. I couldn't find a link. Is simov/styler the correct repo for this on GitHub?

[IlIIlllIIIlIIlllIlIllIIIlIlI]

This is the actual source, posted under support

[RobJacobson]

A warning from 2021: Most users today are using Stylus (a community fork of Stylish) after Stylish engaged in some questionable privacy policies. en.wikipedia.org/wiki/Stylish

[Petr Chloupek]

It took me a minute to figure out how it works, but...it works! No plugins. Great! ...Especially when you work in some kind of a secured environment or maybe your company controls what you can install - this works everywhere.

[Joel Mellon]

Thanks for the answer. This is such a tragic feature though. You have to edit CSS in the sources panel files directly. If the CSS is a mess, i.e. all on one line or obfuscated, it could be impossible to make changes. Also, it saves the entire CSS file in your local directories, so if it changes on the site, you override all kinds of other stuff too. Anyone that's interested though, here's the documentation: developer.chrome.com/blog/new-in-devtools-65/#overrides

[Admin]

It works well. Thanks.