Theming Whisker Menu
Posted on November 27, 2013, under Whisker Menu
Hi there! This post does not apply to styling the GTK+3 Whisker Menu. For that, read the page on theming.
I have seen several people state that Whisker Menu does not use their GTK theme. This is understandable but completely incorrect. Whisker Menu is a regular window and therefore it matches the GTK theme of regular windows. It can not be a GtkMenu because of the widgets it uses (believe me, I tried), so it does not match the theming of menus.
I did investigate if it would be possible for Whisker Menu to “pick up” the theming of GTK menus and mimic them. Short answer: no. Longer answer: haha, my sanity is worth more than the creaky mess of hacks it would take, and besides I’m fairly certain it still wouldn’t work. So instead I did something much simpler: I named the menu widget itself whiskermenu-window so users or theme makers can play with its appearance as much as they want.
I will not be adding any theme configuration settings to Whisker Menu. First, I really have no interest in doing so. Second, modifying the theme from a .gtkrc file gives you much more power than I could ever expose from a GUI. Third, anything I add would probably interfere with .gtkrc theming.
So, how do you theme Whisker Menu? It’s pretty easy, actually. Open up the hidden file named .gtkrc-2.0 in your home directory with any text editor you want. If the file doesn’t exist, create it. Now, if you want to change the background color of the menu window add something like this:
style "darkback"
{
bg[NORMAL] = "#404040"
bg[ACTIVE] = "#606060"
bg[PRELIGHT] = "#808080"
}
widget "whiskermenu-window*" style "darkback"
If you want to change the window text color as well, add something like this:
style "darkback"
{
bg[NORMAL] = "#404040"
bg[ACTIVE] = "#606060"
bg[PRELIGHT] = "#808080"
fg[NORMAL] = "#ccc"
fg[ACTIVE] = "#fff"
fg[PRELIGHT] = "#fff"
}
widget "whiskermenu-window*" style "darkback"
If you want to change the background color of the menu items, add something like this:
style "darktree"
{
base[NORMAL] = "#404040"
base[ACTIVE] = "#606060"
}
widget "whiskermenu-window*TreeView*" style "darktree"
If you want to change the text color of the menu items as well, add something like this:
style "darktree"
{
base[NORMAL] = "#404040"
base[ACTIVE] = "#606060"
text[NORMAL] = "#ccc"
text[ACTIVE] = "#fff"
}
widget "whiskermenu-window*TreeView*" style "darktree"
These examples just scratch the surface of what you can do with theming from a .gktrc file. I don’t have much experience with it myself, nor do I intend to really look into it further. There are plenty of resources on how to make GTK themes and what they say should be applicable to Whisker Menu as well.
24 comments
matteo marchesi says:
November 27, 2013 at 3:43 pm
Hi Graeme, nice to know how to theme Wiskers menu, but I have a question on a more interesting function (at least… interesting for me).
Is it possible to search also for files and not only program from the search box?
Oliver says:
November 27, 2013 at 4:05 pm
Thanks very much for this, Graeme!
Graeme says:
November 27, 2013 at 4:06 pm
@matteo marchesi Not at this time. It is a highly requested feature, so I am considering adding it.
I personally never use a menu to search for files because of how limited the interface is. I prefer to use programs like catfish or kfind when I want to search for files, because those allow me to add constraints to my search. However, I expect that I am in the minority.
@Oliver You are quite welcome!
Oliver says:
November 28, 2013 at 3:30 pm
Out of curiosity, what font are you using in your OS? Thanks!
Graeme says:
November 28, 2013 at 3:47 pm
11pt Liberation Sans. The font settings I use are: full hinting, RGB sub-pixel rendering, and 96 DPI.
Oliver says:
November 28, 2013 at 3:48 pm
Sorry to bug you; I did some searches on how to make these changes activate, but I couldn’t seem to make it do anything. I’ve made the changes, saved the file, logged off/on - and nothing. How do I make it work, once I’ve tweaked it?
Graeme says:
November 28, 2013 at 3:54 pm
Is there anything else in your .gtkrc-2.0 file, or is it a brand-new file created just for theming Whisker Menu? If it is a new file I have found that I sometimes need to add my regular theme to the top, like this:
Oliver says:
November 28, 2013 at 3:57 pm
I figured it out - I didn’t realize you had to switch themes away and then back again. I did that and it worked! Thanks, it looks great. 🙂
Graeme says:
November 28, 2013 at 4:00 pm
I’m glad I could help. 🙂
idiotebrilo says:
December 6, 2013 at 6:35 am
So sorry to disturb you, but is there any way to adjust transparency for menu backround with gtkrc? Leaving its fonts fully opaque, of course.
PS. Thanks for the great menu.
Graeme says:
December 6, 2013 at 10:35 am
I don’t know, sorry. I don’t know that much about GTK theming; you should ask somebody with more experience than me.
Jean ‘Esykie’ v.K. says:
December 8, 2013 at 9:33 pm
style "darkback"
{
bg[NORMAL] = "#2d2d2d"
bg[ACTIVE] = "#606060"
bg[PRELIGHT] = "#808080"
fg[NORMAL] = "#ccc"
fg[ACTIVE] = "#fff"
fg[PRELIGHT] = "#fff"
}
widget "whiskermenu-window*" style "darkback"
That’s the best I could think of using Numix theme 😉
Dan Tarbit says:
December 20, 2013 at 7:27 pm
Sorry, spotted a typo, the dark tree style should end with ‘ style "darktree" ’ rather than darkback 🙂
Dan Tarbit says:
December 20, 2013 at 7:28 pm
Is there anyway to change the search field background colour?
Graeme says:
December 20, 2013 at 7:55 pm
The search field is the only GtkEntry in the window, so you should be able to theme it like the other widgets by specifying “whiskermenu-window*GtkEntry”. I haven’t tried that myself, but I expect something along those lines would work.
Dan Tarbit says:
December 21, 2013 at 10:33 am
Thanks, the search field styling works as suggested.
Mike Worrell says:
April 23, 2014 at 5:21 am
Graeme, thanks for Whisker Menu! I’d been looking for something somewhat like Gnomenu, and this is perfect. I’ve been able to theme it using the gtkrc-2.0 file to match my themes as you described. One thing/feature request: is it possible for Whisker menu to use non-square icons like the default XFCE menu? Thanks!
Matteo says:
May 6, 2014 at 7:45 pm
it’s not working with me!!
i put this code
style “darkback”
{
bg[NORMAL] = “#2d2d2d”
bg[ACTIVE] = “#606060″
bg[PRELIGHT] = “#808080″
fg[NORMAL] = “#ccc”
fg[ACTIVE] = “#fff”
fg[PRELIGHT] = “#fff”
}
widget “whiskermenu-window*” style “darkback”
in ~/.gtkrc-2.0 and the menu doesn’t change
Can someone help me?
Graeme says:
May 6, 2014 at 7:54 pm
@Matteo Did you log out or restart your panel? Also, make sure that you are using straight quote marks and not typographical quotes:
mendoza says:
April 8, 2015 at 4:13 pm
For me there is a lightgrey 1px border around the whiskermenu (my menu is dark blue). I know, the problem is in my gtkrc but what can i do? Is there any way to fix it?
Graeme says:
April 9, 2015 at 12:58 am
That is probably from the GtkFrame that the menu contents are in. I don’t know off the top of my head how to change that, sorry.
mendoza says:
April 9, 2015 at 7:58 am
Thanks for the quick reply! It was the GtkScrolledWindow. It works now! 🙂
Nikki says:
April 14, 2015 at 6:09 am
Can you make the active menu not embossed ? Please 🙂
Graeme says:
April 14, 2015 at 12:21 pm
If you mean the border around the contents, then no. That is just the way GtkTreeViews look, and I also happen to like the separation of contents from the sidebar. You may be able to override that in your gtkrc.