41

I would like to be able to change the default CSS used by chrome, such as removing the underlines for links, etc. However, I cannot find the default CSS file used by Chrome. Does anyone know where it is?

  • 3
    If you are a developer, I recommend not to do this since it changes the default value of css. – nXqd Jun 1 '12 at 14:38
  • For simple way to modify css using your own very simple extension see: stackoverflow.com/questions/21948850/… – User Mar 11 '18 at 3:06
31

(Update 2014) Since support of user stylesheets was recently removed from Google Chrome, the only option for this moment is to use extensions (like Stylus *1), but these will behave differently (see below).

The most relevant request for re-introducing true user stylesheets in Google Chrome is Issue 347016: Support user stylesheets.

Per specification, "true user stylesheet" rule has lower origin specificity in cascade than author rule, but !important user stylesheet rules have higher origin specificity than !important author rule, regardless of its selector specificity.

Extensions mimicking user style-sheets in Chrome simply injects (hopefully) last style element into page, what have some consequences:

  • such style is at "author level" in the cascade, so you must make sure your !important rule has higher specificity than one you want to override
  • "your" injected style is exposed to page scripts, so they can easily delete it at will.

*1 Original extension, Stylish, is currently (2017) in state of erratic development by a new mainetainer, so I'd advise to avoid it and use alternative like aforementioned Stylus.


(Following original answer is now obsolete.)

Afaik it is not possible to tweak the UA css itself, but you can make a global userstyle: start Chrome once with --enable-user-stylesheet. This will create <user-data-dir>/<profile>/User StyleSheet/Custom.css which you can use (changes are propagated immediately). http://code.google.com/p/chromium/issues/detail?id=2393

  • 2
    This doesn't seem legit with current Chromium. They may have taken this feature out since this answer was posted. – Pistos Mar 20 '14 at 15:38
  • 1
    You are right, I've updated the answer. – myf Mar 23 '14 at 23:27
8

You can have a look at this discussion : Issue 2393: Support user stylesheet

At the very end they mention that the --enable-user-stylesheet parameter when starting Chrome would enable custom stylesheets..

4

The only solution I can think of it to use a Greasemonkey script that adds a style entry to every html page which turns off the underlines for links. Something like:

<style> a {text-decoration:none} </style>

This article can apparently get you started:
HOW TO: Install Google Chrome Greasemonkey Scripts (Windows Only)

  • 3
    I find it funny that I can't directly modify the CSS. Firefox has userChrome.css and userContent.css, which make modifying look and feel insanely simple. – George IV Oct 8 '09 at 20:17
  • @harrymc - I switched your <style> code from the blockquote to the code so that you don't have to worry about the "extra spaces" – Jared Harley Dec 23 '09 at 2:37
2

If you are interested in customizing particular web sites, you can use greasemonkey style user scripts.

0

You can change chromes css ui style. Just remember if you change it, some effects like Example: #footer {color:#5F5F5F !important;} will change on every site that uses #footer. You been warned. Custom.css changes almost everything in chromes browsers

Windows XP Google Chrome:

C:\Documents and Settings\%USERNAME%\Local Settings\Application Data\Google\Chrome\User Data\Default

Chromium:

C:\Documents and Settings\%USERNAME%\Local Settings\Application Data\Chromium\User Data\Default\User StyleSheets

Windows 7 or Vista (help in help section) Google Chrome:

C:\Users\%USERNAME%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets

Chromium:

C:\Users\%USERNAME%\AppData\Local\Chromium\User Data\Default\User StyleSheets

Mac OS X Google Chrome:

~/Library/Application Support/Google/Chrome/Default/User StyleSheets

Chromium:

~/Library/Application Support/Chromium/Default/User StyleSheets

Linux Google Chrome:

~/.config/google-chrome/Default/User StyleSheets

Chromium:

~/.config/chromium/Default

Chrome OS

/home/chronos/

Want proof check out my theme for the program editor http://userstyles.org/styles/95226/chrome-userstyles-editor-hacker-version-cyberat

Feel free to check me out, i create UI style sheets or random sites like facebook google.etc, and make them black & red.

  • 4
    That won’t work because Chrome 33 dropped support for user styles. – Synetech Mar 27 '14 at 4:51
0

There is an issue when use Stylish as user-style injector:
user priority level without !important is higher than author priority level without !important

So I write a user-script as injector:
https://github.com/zcyzcy88/SelfColle/blob/master/StyleInject.user.js

principle:
Inject style at document.head.prependChild(), before webpage author's style, has a lower priority, to avoid user-style overlay.

  • Hi, and welcome to SuperUser.com. Would you be able to go more in-depth on what your script does exactly? – Service Manager Mar 17 '17 at 14:37
  • Inject style at document.head.prependChild(), to avoid userstyle overlay. – Sista Fiolen Mar 18 '17 at 7:07
  • If you can edit your answer, to go into more detail about what each part of your script does, would be helpful. – Service Manager Mar 20 '17 at 14:43
0

In 2018, Chrome >= 68.0.3440.106 (and probably much earlier)

I already had the extension Resource Override for various development uses, so I now use that to add my own stylesheet to fix some bad style choices in JIRA (and to hide more ads - heh heh). The option I use is "Inject File" and it works very well. I've not tried regexing the 'url' setting to make it only work on particular sites, but my css selectors are specific enough that I can just leave the url as '*'

0

I came across this question when looking for a solution on how to provide a stylesheet for unstyled pages. None of the solutions above helped me much an still as of 09/2018 chrome does not support the previously removed custom stylesheet function.

The solution I came up with and that works like charm for my use case is achieved by using this chrome addon with a custom js script that inserts my custom css to page's header if it does not have any stylesheets. It won't work on a page that has any stylesheet linked but for my use case it is sufficient.

Here is the JS script I'm using:

window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
    console.log(document.styleSheets); 
    if (document.styleSheets.length > 0) {
        return;
    }

    var css = `
    /*Your CSS goes here*/
    `;
    var style = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    document.head.appendChild(style);
  });
-1

Use Stylebot.

Chrome

Library of users' scripts

For firefox, Customize your web

  • Please quote the essential parts of the answer from the reference link(s), as the answer can become invalid if the linked page(s) change. – DavidPostill Dec 19 '16 at 23:53

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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