Development > Scripting and Bash

Customize Whisker Menu buttons

(1/2) > >>

misko_2083:
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.

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

Jerry:
Nice, this will come in handy for people :)

misko_2083:
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
--- End code ---

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.

Navigation

[0] Message Index

[#] Next page

Go to full version