How to use a custom stylesheet with Tor Browser?

Question

I want to use Tor Browser with a custom stylesheet to avoid eyestrain. Consider this .css file, for instance.

Their instructions for Firefox are as follows:

Firefox: Locate your proﬁle directory as described on mozilla.org, and save the ﬁle as userContent.css in the chrome subdirectory of your proﬁle directory (if no chrome subdirectory exists, create it).

So I saved the stylesheet in:

~/.tor-browser-en/INSTALL/Browser/browser/chrome/userContent.css

But upon restart Tor still doesn't use the custom stylesheet. I tried enabling JavaScript, but still no luck.

How can I use a custom stylesheet with the Tor Browser?

simulacrum · Accepted Answer · 2015-03-03T04:29:17.347

First, a brief caveat: I offer the following information with no guarantee what implications, if any, it has upon your security. I doubt that it does, but it's prudent that I still note this.

That said, this is how you would do it within the TAILS os, The file path may be different in your specific case, but the general approach will likely be the same.

Two useful files you would consider modifying are:

/home/amnesia/.tor-browser/profile.default/chrome/userChrome.css
/home/amnesia/.tor-browser/profile.default/chrome/userContent.css

I am sure that there are others.

The userChrome.css file already exists; the userContent.css is one you will need to create.

Relative to what you have already attempted, perhaps you are not using the default user profile, and as a corollary, are modifying a css file which the Tor Browser is simply not loading?

userChrome.css

This one will modify the browser UI. With regards to eye strain, here is one setting you may consider making, which will make the URL address bar more readable:

/* set the URL bar font characteristics */
#urlbar {
    font-family: monospace !important;
    font-size: 18pt !important;}

Reference: http://joelinoff.com/blog/?p=321

Close and save the file.

userContent.css

As you already know, this one will override website-specified styles. In the same folder as the userChrome.css file, create userContent.css. I am less well versed in how to modify this. Also, some of the css you specify may not necessarily be supported by the browser. However, I am testing it as I am typing this, and some (but not all) of the text can may be rendered larger with:

/* Obviate need to zoom on many sites. */
html>body {
  font-size: 150% !important;
  line-height: normal !important;
}

This modification alters much of the TAILS homepage font size, but affects the apperance of StackExchange considerably less so.

For changes to take effect, close and restart your browser

Additional references

If you've yet to review them, these references will also be of use to you:

How to use a custom stylesheet with Tor Browser?

1 Answers1