GNOME Shell Theme css documentation

Question

Where can I find documentation about the GNOME Shell theme css elements? For instance, if I want to change the style of the "Activites" which css class/id do I have to tweak? More in general I'm looking for somethings that maps each gnome shell element to its class / id in the css

Thanks!

Answer 1

This might be a little dated, but I was able to track down a somewhat authoratiative source. Starting with the documentation that turns up for developing on gnome shell:

https://wiki.gnome.org/Projects/GnomeShell/Development

The CSS section mentions that the theme stuff is located in gnome-shell/source/gnome-shell/data/theme/gnome-shell.css. Of course, it doesn't give a link or anything. From there, I googled for the source code, picked a reasonably recent version and hoped that I could browse the code using the path in the documentation. Lo and behold, the CSS!

https://git.gnome.org/browse/gnome-shell/tree/data/theme/gnome-shell.css?h=gnome-3-18

In my case, I wanted to make all of the font smaller but I didn't know what the root element was. I was able to determine that stage is what I should target with something like font-size: 0.8em in my custom theme in ~/.themes/Naddeo/gnome-shell/gnome-shell.css. This is my entire CSS file in case someone else is trying a real theme but they want to override one or two things. To use it, just pick it in the gnome tweak tool as your shell theme.

@import url("/usr/share/gnome-shell/theme/gnome-shell.css");

stage {
    font-size: 0.8em;
    height: 1.50em;
}

Answer 2

Well I still cannot find documentation, however by looking into other themes I could finally find what I was looking for this specific case.

#panelActivities

is the style to tweak