63

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

5 Answers 5

Reset to default
38

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
4
  • 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
  • 12
    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
  • 1
    I looked at stylish and it seems like if I make something, it's publically available and there's a whole community about styles? Is there something free from all the social crapola? I just want something that works in my browser like it was 1999 and only affects the site I want a custom style for.
    – Dennis
    Jul 16 at 8:09
20

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
  • 4
    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
  • 1
    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
  • 1
    Styler for Firefox is now (2023-02-06) gone, would you mind sharing why?
    – Daniel Serodio
    Feb 6 at 18:30
19

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
8
  • 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
3

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
1

After Stylish's data stealing scandal, using a closed source browser extensiosn has become too risky, unless it's from a widely known softwaare developer... which it's not the case for many of those extensions... so for things I can automate myself, like making changes to CSS as in your example, I went all the way with open-source javascript injection engines, and among all of them in 2023 it's hard to not recommend the superb Violent-Monkey. It features the nicest and most complete UI compared to the alternatives I've tried, and it's got a very well written documentation.

As other have said here, these injection engines are easily capable of altering the CSS... For example following is the code for a script which fixes the awful Instagram white splash-screen which flashes on each page reload:

// ==UserScript==
// @name        fix-instagram-white-splashscreen
// @namespace   Violentmonkey Scripts
// @match       https://www.instagram.com/*
// @grant       GM_addStyle
// @version     1.0
// @author      AUTHOR-NAME
// @description 8/13/2023, 12:35:17 PM
// ==/UserScript==

GM_addStyle (
  `
    #splash-screen {
      background-color: #333 !important;
    }

  `
);

That's it. Note that the header part is mostly autopopulated with Violent-Monkey and it can also be modified by the UI without needing to remember all the flags. It's really a powerful tool and I happy I am learning to use it because it can come handy in many different use cases... and for many of those there may be scripts written by other users alrady, as as for Grease Monkey and the others, but I recommend to only use them if you can read their code yourself, because you never know...

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .