12

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!

3

3 Answers 3

13

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;
}
5

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

0
2

current for GNOME 46...

GNOME JavaScript

Introduction Welcome to GNOME JavaScript (GJS)! This introduction covers the basics of how JavaScript is used with GJS. More detailed information about GJS is available in the GJS Usage Documentation.

Platform and API Many APIs that JavaScript developers are familiar with are actually a part of the Web API, such as DOM or Fetch. GJS is not intended as an environment for web development and does not include support for most of these APIs.

GNOME Platform APIs are documented at gjs-docs.gnome.org

GJS provides JavaScript bindings for the GNOME platform libraries, meaning that developers will use libraries like Gio for working with files, Gtk to build user interfaces, Soup for WebSockets and so on.

as mentioned above: https://gjs-docs.gnome.org/

Not the answer you're looking for? Browse other questions tagged or ask your own question.