How to theme Whisker Menu

Whether you are a theme designer and want Whisker Menu to fit in with your vision, or are a user who wants to make your desktop sparkle, you will need to be able to control the appearance of the menu. This page will give you the basics, and the rest is up to you!

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 since I don’t really know GTK’s CSS) to make the menu dark:

#whiskermenu-window {
	background: #404040;
	color: #ccc;
}

/* Make sidebar buttons match */
#whiskermenu-window .category-button {
	background: #404040;
	color: #ccc;
}
#whiskermenu-window .category-button:hover {
	background: #808080;
	color: #000;
}
#whiskermenu-window .category-button:checked {
	background: #606060;
	color: #000;
}

/* Make launcher views match */
#whiskermenu-window .launchers {
	background: #404040;
	color: #ccc;
}
#whiskermenu-window .launchers:hover {
	background: #808080;
	color: #fff;
}

/* Make search entry match */
#whiskermenu-window .search-area entry {
	background: #404040;
	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.

To aid in styling specific elements, I added even more named classes in version 2.7: