Change hover color of launchers on panel

Cilenco · 2016-09-17 14:07:56

Hey all,

I'm new to XFCE and I would like to change the hover color of my launcher icons on the panel. I searched a bit on the web and tried it for myself with this code:

style "my-hover"
{
    bg[NORMAL] = "#0D1E2B"
    bg[PRELIGHT] = shade(1.1,"#0D1E2B")
    bg[ACTIVE] = shade(0.9,"#0D1E2B")
    bg[SELECTED] = shade(0.97,"#0D1E2B")
}

widget "*launcher*" style "my-hover"

But this does not work... No changes are visible for the launchers. Any ideas why? What is wrong with this code?

Greetings
Cilenco

Last edited by Cilenco (2016-09-17 15:44:28)

ToZ · 2016-09-17 14:20:41

Which GTK2 appearance theme are you using? Sometimes themes will use other tricks (like overlay images) to make the hover effects. If you try with a basic GTK2 theme like "Xfce", you'll notice that your code works fine.

Cilenco · 2016-09-17 14:22:43

Oh okay i depends on the theme? I use the Paper theme from here.
Any ideas how I can do it with this theme?

EDIT: I found a way to disable the background from the buttons (which are images) like this:

style "my-hover" {
    
    bg[NORMAL] = "#0D1E2B"
	bg[PRELIGHT] = shade(1.1,"#0D1E2B")
	bg[ACTIVE] = shade(0.9,"#0D1E2B")
	bg[SELECTED] = shade(0.97,"#0D1E2B")
	
	engine "pixmap" {
        
        image {
           function = BOX
           recolorable = TRUE
           state = NORMAL
        }
        
        image {
          function = BOX
          recolorable = TRUE
          state = PRELIGHT
        }
        
        image {
          function = BOX
          recolorable = TRUE
          state = ACTIVE
        }
        
        image {
           function = BOX
           recolorable = TRUE
           state = SELECTED
        }
        
        image {
           function = BOX
           recolorable = TRUE
           state = INSENSITIVE
        }
        
        image {
           function = ARROW
           recolorable = TRUE
           arrow_direction = DOWN
        }
    }
}

widget "*launcher*" style "my-hover"
widget "*tasklist*" style "my-hover"

But now I also do not have any response if I hover over the button. I would like to set a background color if I hover of it. How is this possible? And it would be awesome if you know how I can also set the text color.

Last edited by Cilenco (2016-09-17 15:45:36)

ToZ · 2016-09-17 15:57:57

The method that I use to overwrite pixmap engine entries is to recreate them locally and edit the graphic images. If you look that the Paper theme's gtk-2.0/main.rc file (lines 1768 - 1823) you'll see where the button theming is happening. What I do is copy that snippet to ~/.gtkrc-2.0 and change the style name from "button" to "my-button" and add the assignment line (2475) and change it to affect the specific widget I'm trying to get at (in this case "*launcher*"). Then, since the snippet links to some image files in an "assets" directory, I would create the "assets" directory in my home directory and copy over the associated files (in this case, 4 files all starting with "button*". Finally, I would edit these graphic images to suit.

The snippet in ~/.gtkrc-2.0 is now:

 style "my-button" {

  xthickness = 2
  ythickness = 2

  # For the sake of sanity style buttons this way
  engine "pixmap" {

    ###########
    # Buttons #
    ###########

    image {
      function = BOX
      state    = NORMAL
      file     = "assets/button.png"
      border   = {4, 4, 4, 4}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = PRELIGHT
      shadow   = OUT
      file     = "assets/button-hover.png"
      border   = {4, 4, 4, 4}
      stretch  = TRUE
    }

    # Don't add hover effect on pressed buttons
    image {
      function = BOX
      state    = PRELIGHT
      shadow   = IN
      file     = "assets/button-active.png"
      border   = {4, 4, 4, 4}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = ACTIVE
      file     = "assets/button-active.png"
      border   = {4, 4, 4, 4}
      stretch  = TRUE
    }

    image {
      function = BOX
      state    = INSENSITIVE
      file     = "assets/button-insensitive.png"
      border   = {4, 4, 4, 4}
      stretch  = TRUE
    }
  }
}

widget "*launcher*" style "my-button"

...and my ~/assets folder has 4 edited files in it:

$ ls ~/assets
button-active.png  button-hover.png  button-insensitive.png  button.png

Perhaps there is a better method, but I haven't figured it out yet.

Edit:

And it would be awesome if you know how I can also set the text color.

Which text colour?

Last edited by ToZ (2016-09-17 16:00:17)

Cilenco · 2016-09-18 09:01:19

Which text colour?

The text color of the buttons If I add fg[...] = "#FFFFFF" to the style it does not work...

Thank you for the answer that worked for me. But I have one more question:
I have created a .myconfig folder in my home directory where I put all my custom configurations. I have created the style file in there and created a symlink from .gtkrc-2.0 to this file. To get the images for the style now I have to use: .myconfig/images/button.png etc. Is it possible to change the path relative to the original style file and not from the symlink so I could use /images/button.png? Then it wouldn't depend on the outer directory structure.

ToZ · 2016-09-18 14:54:49

Cilenco wrote:

Which text colour?
The text color of the buttons If I add fg[...] = "#FFFFFF" to the style it does not work...

If you are referring to the launcher button with text being displayed instead of an image, then it works for me if I add:

   fg[NORMAL] = "#00ff00"

... to the code snippet above (makes the text green).

Thank you for the answer that worked for me. But I have one more question:
I have created a .myconfig folder in my home directory where I put all my custom configurations. I have created the style file in there and created a symlink from .gtkrc-2.0 to this file. To get the images for the style now I have to use: .myconfig/images/button.png etc. Is it possible to change the path relative to the original style file and not from the symlink so I could use /images/button.png? Then it wouldn't depend on the outer directory structure.

Not that I am aware of.

Cilenco · 2016-09-18 16:06:15

Great thank you that worked for me! And now really the last one:

Around my notification area (systray) is a white border. The option hide border (or display border) does not work - it stays there all the time. I've tried to set fg and bg colors and to rewrite the pixmap engine but that does not help at all. Any ideas what meight work? And can I define variables in my gtkrc file to easily change all the colors if I want to?

ToZ · 2016-09-18 16:36:33

Can you post a screenshot of your systray?

Also, try changing the "Maximum icon size" in the systray (Notification Area) properties to see if it gets rid of the border.

ToZ · 2016-09-18 17:05:31

Looks like its being added via the frame assignments in main.rc:

style "frame" {

  engine "pixmap" {

    image {
      function = SHADOW
      file     = "assets/frame.png"
      border   = {1, 1, 1, 1}
      stretch  = TRUE
    }

    image {
      function       = SHADOW_GAP
      file           = "assets/frame.png"
      border         = {1, 1, 1, 1}
      stretch        = TRUE
      gap_start_file = "assets/border.png"
      gap_end_file   = "assets/border.png"
    }

  }

}

...and:

class "GtkFrame"             style "frame"

So using the same process above, lets override those settings and make it specific to systray:

style "no-systray-border"
{

  engine "pixmap" {

    image {
      function = SHADOW
      file     = "assets/transparent.png"
      border   = {1, 1, 1, 1}
      stretch  = TRUE
    }

    image {
      function       = SHADOW_GAP
      file           = "assets/transparent.png"
      border         = {1, 1, 1, 1}
      stretch        = TRUE
      gap_start_file = "assets/transparent.png"
      gap_end_file   = "assets/transparent.png"
    }

  }
}
widget "*systray*" style:highest "no-systray-border"

...create a "transparent.png" file in your assets directory that is simply a transparent file.

Cilenco · 2016-09-18 17:13:39

Wow thanks that worked great!
Thank you for you awesome help in the whole thread smile

Xfce Forum

Sub domains

#1 2016-09-17 14:07:56

Change hover color of launchers on panel

#2 2016-09-17 14:20:41

Re: Change hover color of launchers on panel

#3 2016-09-17 14:22:43

Re: Change hover color of launchers on panel

#4 2016-09-17 15:57:57

Re: Change hover color of launchers on panel

#5 2016-09-18 09:01:19

Re: Change hover color of launchers on panel

#6 2016-09-18 14:54:49

Re: Change hover color of launchers on panel

#7 2016-09-18 16:06:15

Re: Change hover color of launchers on panel

#8 2016-09-18 16:36:33

Re: Change hover color of launchers on panel

#9 2016-09-18 17:05:31

Re: Change hover color of launchers on panel

#10 2016-09-18 17:13:39

Re: Change hover color of launchers on panel

Board footer