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
#4

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.

#5

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
#6

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.

#7

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.

#8

Yes, you are right. Thanks.