How to get domain-specific user stylesheets in Epiphany

Epiphany isn’t really at the top of my browser list. I guess I should say ‘Web’ as it’s now called but a) nobody can google that and b) if you open the Gnome acitivities overview and type web you still get Firefox first (quick tip: type ‘epi’ and you’ll get it). Still, it has a nice interface that fits right into GNOME and it does come with basics amenities, like adblocking and a somewhat rudimentary user style sheet support.

Sadly, this is no Stylish replacement. You simply type rules in one after the other with no specification of where to apply them and where not to. So if you want to get rid of the #rightcolumn on site A but not the similarly named #rightcolumn on site B you’re out of luck. Well, you can of course jump through hoops, specifying site specific hierarchies and nesting.  Not exactly an nice solution. Here’s one I like better.

My main use of Epiphany comes from the web app feature. If you have a long memory, you might recall Mozilla’s Prism project. The web was being turned into apps on phones and the like, so why not on your PC? If people wanted apps not tabs, Mozilla would shove f***ing apps down their chromeholes. Prism was  a paired down Firefox without tabs that never left site A and it would put a site icon in your desktop environment menu. The web as an app, voila. Only Prism never took off and was canned before a major release. Firefox was probably not really fit for the purpose anyway. Too fat, too slow.

But GNOME has has kept the dream alive. Any site can be appified from Epiphany’s main menu. This creates a small subdirectory in ~/.config/epiphany called app-epiphany-[sitename]-[uid] which is essentially just a site specific epiphany configuration, just like ~/.config/epiphany itself. It has it’s own cookies, it’s own adblock, it’s own bookmarks files (?) , etc. And it works really well. I use facebook intermittently and reluctantly so this is a natural fit. With facebook-inna-box it doesn’t interfere with my daily browsing. Open the box, send a message, close it, done.

As you have probably already guessed , the idea here is obvisouly that with a custom site-specific configuration you can also have a site-specific stylesheet. In Epiphany itself it can be created through Preferences but for the apps you have to create it by hand. If you already have an epiphany user stylesheet –  ~/.config/epiphany/user-stylesheet.css – then you can simply move or copy it in to the app-… directory and remove the non-site-related rules. For epiphany as well as for apps go that the file is only read upon startup of the program, so close and restart. Also don’t rename the file, it’s still just user-stylesheet.css.

If you don’t have one, the format is simple. As I said, there are no moz-document headers or the like. It’s pure CSS. Here’s my facebook stylesheet in it’s entirety:

#globalContainer #mainContainer #rightCol {display: none !important;}
#globalContainer #mainContainer #contentArea {width: auto !important;}

Note that the general epiphany stylesheet does not appear to work in ‘web apps’. So if you want something removed in the app you have to use this approach.

Photo by adactio

Leave a Reply

Your email address will not be published. Required fields are marked *