Print Page - Customize Whisker Menu buttons

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
(http://i.imgur.com/qJkQfSb.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.

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

Nice, this will come in handy for people :)

There is a way to change whisker menu background as well. :)
Save this image to /home/hover.png
(http://i.imgur.com/Y1iG2GM.png)
and this one to /home/background.png
(http://i.imgur.com/4a9sa8D.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"

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:

(http://ibin.co/1UZZ3dXCEqCG)

Here is copy of my .gtkrc-2.0 file:

Code: [Select]

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.

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.

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

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 :)

DING! DING! DING!

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

I'm glad that helped. :D

Linux Lite Forums

Development => Scripting and Bash => Topic started by: anon222 on July 24, 2014, 04:49:20 AM