How to use custom css on web pages on the jolla browser?

Design
#1

Is there a way to override the page background and font colors in the sfos native browser?
To use custom css for all pages?
And if there is a way, can I use ambience colors and background, Theme.secondaryHighlightColor for instance?

#2

You can write userstyles.

Create a directory ‘chrome’ in the profile directory:
/home/nemo/.mozilla/mozembed/chrome

Userstyles should go in a file called userContent.css (case-sensitive!).

You can include css that applies to all sites, e.g.

* color : black !important ;

or applicable to specific sites e.g.

@-moz-document url(http://example.org/){
     body background-color : white !important ;
}

I don’t know about about ‘ambience colors…’ but essentially you can override the document’s own styles - though it can be tricky on dynamically-generated sites, like twitter.

3 Likes
#3

There are a few variations of the @moz-document ‘site-specific stylesheet rule’. Quoting from dbaron’s mailing list post from 2004 (I still have it):

@-moz-document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org)
{
  /* CSS rules here apply to:
     + The page "http://www.w3.org/".
     + Any page whose URL begins with "http://www.w3.org/Style/"
     + Any page whose URL's host is "mozilla.org" or ends with
       ".mozilla.org"
   */
}

There is also @-moz-document regexp() though I’ve never needed it. (You know the old joke about regular expressions):

userContent.css still works in Firefox to this day BTW - though it’s behind a pref from Fx69. And it’s easier to use an addon like Stylus, which works on Android (and Alien).

1 Like