57

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.

Improve this question
0

4 Answers 4

Reset to default
35

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.

Improve this answer
3
  • Thanks Su'! But unfortunately it doesn't work in private browsing mode.
    – Zistoloen
    Mar 4, 2013 at 13:21
  • 3
    @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
    Aug 29, 2017 at 9:37
  • 10
    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
    – RobJacobson
    Jul 29, 2021 at 19:09
19

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

Improve this answer
5
  • Nice! It's not widely known. And it works seamlessly.
    – ADTC
    Aug 29, 2017 at 9:42
  • 3
    It says it's open source. I couldn't find a link. Is simov/styler the correct repo for this on GitHub?
    – absynce
    Sep 11, 2017 at 20:23
  • This is the actual source, posted under support
    – IlIIlllIIIlIIlllIlIllIIIlIlI
    Aug 27, 2020 at 4:47
  • It works well. Thanks.
    – pdwalker
    May 6, 2022 at 8:05
  • Styler for Firefox is now (2023-02-06) gone, would you mind sharing why?
    – Daniel Serodio
    Feb 6 at 18:30
14

Since 2018 in Chrome (65) the browser's integrated DevTools has a feature called Local Overrides. 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.

Developer Tools > Sources > Over

Improve this answer
5
  • 1
    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.
    – Petr Chloupek
    Feb 8, 2022 at 10:48
  • 3
    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
    – Joel Mellon
    Apr 24, 2022 at 4:28
  • 1
    @JoelMellon You don't have to save or work with the existing obfuscated/minified CSS. You can add your own, clean/simple, stand-alone .css file that will be parsed after the existing CSS is parsed.
    – Eric Kigathi
    May 5, 2022 at 0:16
  • 1
    Maybe, but from the documentation it's not clear how that would work. "When you make changes in DevTools, DevTools saves a copy of the modified file to your directory." Presumably, I'd have to navigate into a folder, then any *.css file is included in the source? Is it for that page, all pages on the domain, what? Hacking it really isn't worth my time. Tampermoney is a much better solution.
    – Joel Mellon
    May 5, 2022 at 6:02
  • 1
    For most users, this is a bit complicated. The styler extension mentioned above makes it easier to give to other people to implement.
    – pdwalker
    May 6, 2022 at 8:08
2

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

Improve this answer
1
  • 3
    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.
    – Su'
    Mar 4, 2013 at 10:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.