61

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.

Zistoloen
  • 721
  • 1
  • 5
  • 8

5 Answers5

36

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.

Su'
  • 523
  • 4
  • 9
  • Thanks Su'! But unfortunately it doesn't work in private browsing mode. – Zistoloen Mar 04 '13 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 '17 at 09: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. https://en.wikipedia.org/wiki/Stylish – RobJacobson Jul 29 '21 at 19:09
  • 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 '23 at 08: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).

peterh
  • 2,553
  • 10
  • 31
  • 49
Luke
  • 309
  • 2
  • 3
16

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

guerda
  • 1,513
  • 2
  • 15
  • 27
Eric Kigathi
  • 474
  • 6
  • 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 08 '22 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: https://developer.chrome.com/blog/new-in-devtools-65/#overrides – Joel Mellon Apr 24 '22 at 04: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 05 '22 at 00: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 05 '22 at 06: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 06 '22 at 08:08
  • @EricKigathi Standalone CSS files don't work for me. If I modify some existing styles, navigate to the folder Chrome created and place some arbitrary CSS file in there instead, it doesn't get loaded. So it is what it is: an override. – EvgenKo423 Jun 12 '23 at 08:22
  • Some time ago I was testing the override functionality and IIRC to make it work I had to rename the local CSS file (added to the overriding dir) to the same name of the remote CSS file I was trying to override. – Redoman Aug 13 '23 at 10:25
3

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

Prasad Ajinkya
  • 131
  • 2
  • 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 04 '13 at 10:21
0

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

Redoman
  • 208
  • 3
  • 12