Customizing Desktop Window Theme CSS Gnome

Just a quick question. What is this window menu called in the css files?

I've read through the gtk-3.0 files - both the gtk.css and gtk-dark.css a hundred times, but cant find it. I want to change the text color.

Also looking for the css for the icons to the left of the menu.

Thanks in advance!

1 Like

That is the .sidebar class.
Text color is defined by the simple parameter color.
For example:

 .nautilus-window .sidebar {
   color: #FFFFFF;
}

For the Button text color, you may need: placessidebar.sidebar row.sidebar-row

 .nautilus-window .sidebar placessidebar.sidebar row.sidebar-row {
   color: #FFFFFF;
}

In your gtk.css, the icons are often not named. You can use -gtk-icon-style to switch between regular and symbolic icons in your .css.
For example:

 .nautilus-window .sidebar {
    -gtk-icon-style: regular;
}
 .nautilus-window .sidebar {
    -gtk-icon-style: symbolic;
}

You also can use -gtk-icon-source: followed by the path to the icon you wish to use.

1 Like

Thanks for that! I was a graphic designer for yrs. Coding CSS is easy, but figuring out what is what in theme files... yeeeaaah. Leaves me crossed eyed, lol.

1 Like

gtk css is a bit different from web css.

One tool that I find invaluable is the gtk-inspector tool.
Gtk-Inspector comes with Zorin OS. You only need to enable it.

gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true

To launch it, run from terminal. Use the GTK_DEBUG=interactive prefix followed by the application name you wish to launch and inspect. For example, Nautilus File Manager:

GTK_DEBUG=interactive nautilus

You should see Two Windows launch.
Nautilus... of course...
And the gtk-inspector window. It has several useful tabs at the top that you can explore.
But for now, let's zero in on using it for what you want to inspect.
Far upper left is a Magnifying Glass icon. Click that puppy. The mouse cursor now is a target selector. Hover over and click on the portion of the window you want css information on.
Hovering over a given area will highlight that area. You can narrow it down to an image-button on a pathbar - or highlight the entire pathbar.
Once selected, go back to the inspector window.
Upper left, you will see a drop down menu marked Miscellaneous.
Click the drop down and change that to CSS Nodes
In the left pane, you will see the Class Tree.
In the right pane, you will see the parameters, what value they have and it will even show the relevant Line that is on in the gtk.css file that is being referenced to govern that value.
Priceless.
It looks a bit daunting at first, but if you play with it like your new favorite toy for a while, learning it is easy.

2 Likes

Wow, this is exactly what I was looking for. Thanks so much. I've bookmarked this so I can reference it while I learn it. Will make life so much easier!

Many, many thanks. :pray:

2 Likes

Hi, i am kinda new to the linux world, may I ask you how you changed the close/minimize/maximize icons on the titlebar of your window? thanks!

Hi and welcome to linux.

Are you asking how I changed the color of buttons on the min/max/close buttons?

If so, I installed a gnome shell theme to that bit.

To learn how to install themes and customize your desktop, read this thread:

If you want to change the function/lay-out etc of those buttons, you need to install Gnome Tweaks. Here's how:

2 Likes