The problem with styling Gnome apps

[ramzeto]

In my spare time I have been working on an emulation front end with the purpose of organizing my ROMs. It is developed in C++ and it uses GTK+ as graphical user interface. If someone is interested, check the Github repository.

I developed the application in my main rig, which is running Ubuntu 18.04 and I created the look and feel using CSS (https://developer.gnome.org/gtk3/stable/chap-css-overview.html).

This is how the application looks in Ubuntu 18.04:

I think it looks really nice. But when testing the application in my laptop, which is running Fedora 29, it looks like this:

It looks different, the text inside the buttons has some kind of ghosting. The differences can be seen in a lot of ui controls. Here is a dialog from the application in Ubuntu:

An here is the same dialog in Fedora:

Some of the visual elements of the application were broken when running in Fedora, I had to mess more than I wanted with the CSS.

For the moment I decided to disable the styling because it was taking me more time dealing with it than the time I spent programming the core functions of the application. With the stock theme, in Ubuntu, the application looks like this:

And this is the dialog shown before:

This is the application In Fedora without the CSS:

And the dialog shown before:

I understand that every Linux distro needs to customize its desktop environment according to its brand (I actually like a lot Ubuntu’s Gnome), but sometimes developers can have a hard time dealing with those customizations.

According to the Gnome website Ubuntu includes Gnome with “minor alterations”, so Fedora’s Gnome is closest to vanilla. In my case, I probably should focus in the look and feel in Fedora first.

I am probably “over complaining”, but I am not the only one, it seems that other developers are also unhappy with this matter: https://stopthemingmy.app/.

[maximal]

The way you deal with that in web developement is to effectively create a blob of css rules, that dont have any reason to exist other than ressetting all the styles and you call that before any other css is applied. From paddings to colors to fonts, etc.

You probably will end up doing the exact same thing for your project. Except, since its gnome and not ‘the web’ it’s a bit harder to just google ‘css reset’ and copy paste something.

Though, inevitably that will also mess up your styling initially. There is no easy way to fix those kind of issues.

[Mastic_Warrior]

I have never done it in gnome3 but there are supposed to be ways to ignore the systems setting or override the system settings to use your own styling, font, and etc.

You might have to search on freedesktop.org to find this. And yes, I would recommend starting with vanilla gnome and building your boiler plate CSS to get the look and feel that you want.