4

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 profile directory as described on mozilla.org, and save the file as userContent.css in the chrome subdirectory of your profile 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?

4

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:

  • Thanks for the thorough answer. As it turns out, I was indeed not looking at the correct profile. The one loaded is actually ~/.tor-browser-en/INSTALL/Browser/TorBrowser/Data/Browser/profile.default/, even though it contained neither chrome dir nor userChrome.css or userContent.css. I saved this CSS custom stylesheet as chrome/userContent.css (already designed to alleviate eyestrain, by reducing brightness and improving contrast), restarted Tor, and the CSS got loaded. Thanks! – landroni Mar 1 '15 at 19:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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