Customize Whisker Menu buttons

[anon222]

This is really interesting, if  anyone wants to experiment.
I figured out how to customize whisker menu buttons.
First enable compositing, then edit .gtkrc-2.0 and add this:
#.gtkrc-2.0
#Whisker

    style "darkback"
    {
          engine "pixmap"
            {
                 
                    }
                    image
                    {
                            function                = BOX
                            recolorable            = TRUE
                            state                  = PRELIGHT
                            file                    = "hover.png"
                            border                  = { 1, 1, 1, 1 }
                            stretch                = FALSE
                    }
                    image
                    {
                            function                = BOX
                            recolorable            = TRUE
                            state                  = ACTIVE
                            file                    = "hover.png"
                            border                  = { 1, 1, 1, 1 }
                            stretch                = FALSE
                    }
            }
            bg[NORMAL] = "#404040"
            bg[ACTIVE] = "#606060"
            bg[PRELIGHT] = "#808080"
            fg[NORMAL] = "#ccc"
            fg[ACTIVE] = "#fff"
            fg[PRELIGHT] = "#fff"
    }
    widget "whiskermenu-window*" style "darkback"
#end of file

Save this image to your home folder and rename it to hover.png

log out and then back in, and see what happpens with whisker.

Next: Instead of using only one hover.png try using 2 different
For PRELIGHT use hover.png and for ACTIVE hover1.png
Adwaita gtk2 theme works great with this.

[anon222]

Use this .gtkrc-2.0
In the previous post I had one character on the wrong place  :-\ 

#.gtkrc-2.0
#Whisker

    style "darkback"
    {
          engine "pixmap"
            {
                 
                    image
                    {
                            function                = BOX
                            recolorable            = TRUE
                            state                  = PRELIGHT
                            file                    = "hover.png"
                            border                  = { 1, 1, 1, 1 }
                            stretch                = FALSE
                    }
                    image
                    {
                            function                = BOX
                            recolorable            = TRUE
                            state                  = ACTIVE
                            file                    = "hover.png"
                            border                  = { 1, 1, 1, 1 }
                            stretch                = FALSE
                    }
            }
            bg[NORMAL] = "#404040"
            bg[ACTIVE] = "#606060"
            bg[PRELIGHT] = "#808080"
            fg[NORMAL] = "#ccc"
            fg[ACTIVE] = "#fff"
            fg[PRELIGHT] = "#fff"
    }
    widget "whiskermenu-window*" style "darkback"
#end of file

[Valtam]

Nice, this will come in handy for people

[anon222]

There is a way to change whisker menu background as well. 
Save this image to /home/hover.png

and this one to /home/background.png


Then you just add this to .gtkrc-2.0 in /home directory:

#Whisker
pixmap_path "/home"
    style "darkback"
    {
          engine "pixmap"
            {
                 
                    image
                    {
                            function                = BOX
                            recolorable            = TRUE
                            state                  = PRELIGHT
                            file                    = "hover.png"
                            border                  = { 1, 1, 1, 1 }
                            stretch                = FALSE
                    }
                    image
                    {
                            function                = BOX
                            recolorable            = TRUE
                            state                  = ACTIVE
                            file                    = "hover.png"
                            border                  = { 1, 1, 1, 1 }
                            stretch                = FALSE
                    }
            }
    bg_pixmap[NORMAL] = "background.png"
            bg[NORMAL] = "#404040"
            bg[ACTIVE] = "#606060"
            bg[PRELIGHT] = "#808080"
            fg[NORMAL] = "#ccc"
            fg[ACTIVE] = "#fff"
            fg[PRELIGHT] = "#fff"
    }
    widget "whiskermenu-window*" style "darkback"

style "darktree"
{

base[NORMAL] = "#404040"
base[ACTIVE] = "#606060"
text[NORMAL] = "#ccc"
text[ACTIVE] = "#fff"

}
widget "whiskermenu-window*TreeView*" style "darktree"

[gold_finger]

misko_2083,

Very cool!  Didn't know this could be done.

Question.

I tried this out in a VM and was trying to get mine to look like the screenshot you posted in other area of forum.  I basically just copied what you posted here (only changed one color), but I can't seem to get the background to show up on right side.  Mine stays white as shown in this screenshot:




Here is copy of my .gtkrc-2.0 file:

Code:

gtk-menu-popdown-delay = 0
gtk-menu-bar-popup-delay = 0
gtk-enable-animations = 0
gtk-timeout-expand = 0

#.gtkrc-2.0
#Whisker
pixmap_path "/home"
    style "darkback"
    {
          engine "pixmap"
            {
                   
                    image
                    {
                            function                = BOX
                            recolorable             = TRUE
                            state                   = PRELIGHT
                            file                    = "hover.png"
                            border                  = { 1, 1, 1, 1 }
                            stretch                 = FALSE
                    }
                    image
                    {
                            function                = BOX
                            recolorable             = TRUE
                            state                   = ACTIVE
                            file                    = "hover.png"
                            border                  = { 1, 1, 1, 1 }
                            stretch                 = FALSE
                    }
            }
    bg_pixmap[NORMAL] = "background-b.png"
            bg[NORMAL] = "#404040"
            bg[ACTIVE] = "#606060"
            bg[PRELIGHT] = "#808080"
            fg[NORMAL] = "#ccc"
            fg[ACTIVE] = "#fff"
            fg[PRELIGHT] = "#b12b2b"
    }
    widget "whiskermenu-window*" style "darkback"

    style "darktree"
    {

    base[NORMAL] = "#404040"
    base[ACTIVE] = "606060"
    text[NORMAL] = "ccc"
    text[ACTIVE] = "fff"

    }
    widget "whiskermenu-window*TreeView*" style "darktree"
#end of file

Do you have any idea where I went wrong?  What I am missing to get that white area to also be covered by the background pic?

Thanks in advance.

[anon222]

This depends on a gtk 2 theme. I used Adwaita as my system theme. Some others will allow you to use background on the right side.

[gold_finger]

Ok, thanks -- didn't realize that.  Will play around with it some more.

[anon222]

No problem.
By the way   
    base[ACTIVE] = "606060"
text[NORMAL] = "ccc"
text[ACTIVE] = "fff"
fix it to
    base[ACTIVE] = "#606060"
text[NORMAL] = "#ccc"
text[ACTIVE] = "#fff"
otherwise whisker menu will use your system theme

[gold_finger]

DING!  DING!  DING!

YOU GOT IT!  That minor mistake you caught was indeed the culprit.  Now it works perfectly.  Thanks a lot!

[anon222]

I'm glad that helped.