Linux Lite Forums › Development › Scripting and Bash v
Customize Whisker Menu buttons


Beta Testers wanted for Lite Series Upgrade - Click here to register interest


Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Threaded Mode
Customize Whisker Menu buttons
anon222 Offline
Senior Member
****
Posts: 688
Threads: 49
Joined: Jul 2014
Reputation: 0
#1
07-24-2014, 08:49 AM
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
[Image: 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.
Find
Reply
anon222 Offline
Senior Member
****
Posts: 688
Threads: 49
Joined: Jul 2014
Reputation: 0
#2
07-24-2014, 09:22 AM
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
Find
Reply
valtam Offline
Administrator
*******
Posts: 9,003
Threads: 566
Joined: Feb 2014
Reputation: 12
#3
07-24-2014, 11:02 AM
Nice, this will come in handy for people Smile
Download your free copy of Linux Lite today.

Jerry Bezencon
Linux Lite Creator

"Do not correct a fool, or he will hate you; correct a wise man and he will appreciate you."

[Image: X5qGkCg.png]

[Image: 0op1GNe.png] [Image: LgJ2mtP.png] [Image: vLZcFUE.png] [Image: lrUHro3.jpg]
Website Find
Reply
anon222 Offline
Senior Member
****
Posts: 688
Threads: 49
Joined: Jul 2014
Reputation: 0
#4
07-25-2014, 09:12 AM
There is a way to change whisker menu background as well.  Smile
Save this image to /home/hover.png
[Image: Y1iG2GM.png]
and this one to /home/background.png
[Image: 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"

Find
Reply
gold_finger Offline
Platinum Member
*****
Posts: 1,094
Threads: 19
Joined: Feb 2014
Reputation: 0
#5
07-25-2014, 08:47 PM
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:

[Image: 1UZZ3dXCEqCG]


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.
Try Linux Beginner Search Engine for answers to Linux questions.
Find
Reply
anon222 Offline
Senior Member
****
Posts: 688
Threads: 49
Joined: Jul 2014
Reputation: 0
#6
07-25-2014, 09:52 PM
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.
Find
Reply
gold_finger Offline
Platinum Member
*****
Posts: 1,094
Threads: 19
Joined: Feb 2014
Reputation: 0
#7
07-25-2014, 09:58 PM
Ok, thanks -- didn't realize that.  Will play around with it some more.
Try Linux Beginner Search Engine for answers to Linux questions.
Find
Reply
anon222 Offline
Senior Member
****
Posts: 688
Threads: 49
Joined: Jul 2014
Reputation: 0
#8
07-25-2014, 10:05 PM
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 Smile
Find
Reply
gold_finger Offline
Platinum Member
*****
Posts: 1,094
Threads: 19
Joined: Feb 2014
Reputation: 0
#9
07-25-2014, 10:13 PM
DING!  DING!  DING!

YOU GOT IT!  That minor mistake you caught was indeed the culprit.  Now it works perfectly.  Thanks a lot!
Try Linux Beginner Search Engine for answers to Linux questions.
Find
Reply
anon222 Offline
Senior Member
****
Posts: 688
Threads: 49
Joined: Jul 2014
Reputation: 0
#10
07-27-2014, 12:07 PM
I'm glad that helped.  Big Grin
Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)