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

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?

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

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

On Koli (4.0.1.48), it seems that custom CSS styles are not applied on Sailfish Browser.

I have custom styles in ~/.local/org.sailfishos/browser/.mozilla/chrome/userContent.css file, but they have no effect to webpages.

My userstyles are still working on my Jolla C. That directory is correct:

    '---
    | Sailfish OS 4.0.1.48 (Koli)
    '---
    [nemo@Sailfish ~]$ cd /home/nemo/.local/share/org.sailfishos/browser/.mozilla/chrome
    [nemo@Sailfish chrome]$ ls -al
    -rw-r--r--    1 nemo     nemo          2126 Jul 10  2020 userContent.css

Yes, if chrome folder or userContent.css file is a symlink, styles are not applied. When being normal files, styles are applied. With earlier Sailfish Browser versions on SFOS 3.x, symlinks worked as well.

Very likely this is because of sailjail. The browser is simply not allowed to access the path the link is targeting. You could try out a hard link if a link is really needed.

Yes, you are right. Thanks.