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!
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.
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.
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.
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. 
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:
this sounds like a very handy tool. but how do I use with the gnome environment itself, like for Zorin Menu for example? :< Would love to know
I use XFCE and am not in a good position to test this at this moment...
But on Zorin LIte, I would run:
GTK_DEBUG=interactive xfce4-popup-zorinmenulite
You can try testing it on Gnome with
GTK_DEBUG=interactive gnome-shell-extension-zorin-menu
thanks for the try. gnome-shell-extension-zorin-menu is not recognized as command though; I'm not sure if there's one for things that are called and work as extensions in gnome environment.
It feels more like the gnome env should be launched itself with this value set, but I'm not sure how to do it since it's always launched automatucally on system startup; I'm guessing I have to switch to TTY and run gnome manually from there after logging in but I don't know the exact command(s) used for that.
You are right. I do not use Gnome and have not in years, now.
It looks like GTK_DEBUG=interactive cannot be used to launch a shell ext.
You might have luck with Looking Glass:
lg
and see if it lists anything.
well, lg works here, but it shows, um... hm.. lotsa objects. and like when it shows a reference to a js function, you can't check what that function is. Like, for example, here I picked an element in my Zorin Menu - now how do I define what css line is responsible for its coloring?
If I remember correctly, the Zorin Menu just relies on the .css class popup-menu
.popup-menu {
background-color: #000000;
}
what about font color? It's what I'm going for.
as for .popup-menu class - I haven't found it in the css of theme which recolors text in the popup menus (the bad text color I wanna change indeed appears in popup windows of sort besides zorin menu - like wifi/sound volume box, notifications box, right mouse click menu in zorin taskbar)
Use the .popup-menu class and specify font color with
color: #000000;
I'm sorry, I made a dumb mistake - was searching in gtk-3.0/gtk.css instead of gnome-shell/gnome-shell.css
Finally found it, it was actually .panel-menu class!
Which icon pack have you chosen to install?