Theming Whisker Menu

Hi there! This post does not apply to styling the GTK+3 Whisker Menu. For that, read my new post.

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"


Whisker Menu 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"


Whisker Menu darkback2

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"


Whisker Menu 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"


Whisker Menu darktree2

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.

Advertisements

24 Responses to Theming Whisker Menu

  1. 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?

  2. Oliver says:

    Thanks very much for this, Graeme!

  3. Graeme says:

    @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!

  4. Oliver says:

    Out of curiosity, what font are you using in your OS? Thanks!

  5. Graeme says:

    11pt Liberation Sans. The font settings I use are: full hinting, RGB sub-pixel rendering, and 96 DPI.

  6. Oliver says:

    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?

  7. Graeme says:

    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:

    include "/usr/share/themes/Greybird/gtk-2.0/gtkrc"

  8. Oliver says:

    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. 🙂

  9. Graeme says:

    I’m glad I could help. 🙂

  10. idiotebrilo says:

    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.

  11. Graeme says:

    I don’t know, sorry. I don’t know that much about GTK theming; you should ask somebody with more experience than me.

  12. Jean 'Esykie' v.K. says:

    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 😉

  13. Dan Tarbit says:

    Sorry, spotted a typo, the dark tree style should end with ‘ style “darktree” ‘ rather than darkback 🙂

  14. Dan Tarbit says:

    Is there anyway to change the search field background colour?

  15. Graeme says:

    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.

  16. Dan Tarbit says:

    Thanks, the search field styling works as suggested.

  17. Mike Worrell says:

    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!

  18. Matteo says:

    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?

  19. Graeme says:

    @Matteo Did you log out or restart your panel? Also, make sure that you are using straight quote marks and not typographical quotes:

    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"

  20. mendoza says:

    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?

  21. Graeme says:

    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.

  22. mendoza says:

    Thanks for the quick reply! It was the GtkScrolledWindow. It works now! 🙂

  23. Nikki says:

    Can you make the active menu not embossed ? Please 🙂

  24. Graeme says:

    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.