Hi there! There is now a page on theming that is more up to date.
I still get questions about how to theme Whisker Menu from time to time, but now they are about the GTK+3 version. Which makes sense, because the information in my previous blog post is about how to theme the GTK+2 version and none of that applies anymore. If you are using Whisker Menu 2.0.0 or newer, this is what you need.
So! How to do it? It is surprisingly easy, actually. You need to modify the file ~/.config/gtk-3.0/gtk.css (create it if it doesn’t exist), and just start putting things in there. It uses GTK+’s CSS, with properties you can read about on gtk.org. To apply your theme changes you need to either log out and log in, or restart your panel by running:
xfce4-panel -r
To modify only Whisker Menu, make sure to put #whiskermenu-window at the start of each section. That will restrict the styling to just Whisker Menu, and leave the rest of your GTK+3 programs alone. Here is a quick and dirty example (which I am sure could be done much more cleanly) to match the theming from the original blog post:
#whiskermenu-window {
background-color: #404040;
color: #ccc;
}
/* Make sidebar buttons match */
#whiskermenu-window button {
background-color: #404040;
color: #ccc;
}
#whiskermenu-window button:hover {
background-color: #808080;
color: #fff;
}
#whiskermenu-window button:checked {
background-color: #606060;
color: #fff;
}
/* Make treeview match */
#whiskermenu-window treeview {
background-color: #404040;
color: #ccc;
}
#whiskermenu-window treeview:hover {
background-color: #808080;
color: #fff;
}
The panel button is also named. If for some reason you want the Whisker Menu panel button to not match the rest of your panel, just use #whiskermenu-button at the start of a section.
CSS is quite powerful, and you can do a lot more with it than I have done here. This is just to get you started! Please don’t ask me for more help beyond this, though. I don’t have much experience with using CSS for GTK+ styling, and I don’t really expect to. I don’t theme my own menu. 😉