[Solved] How to make buttons not show a background color when hovered over?

Hunter101 · 2015-08-29 21:13:35

Hey guys I wanted to ask, how do you make a button in a panel not display BG color when hovered over? Like when I hover over items in my transparent top panel they show a black background color. I was hoping to fix this as it takes away much from the feel of the desktop.

Any help appreciated. Thanks!

MountainDewManiac · 2015-08-29 21:41:52

If I right-click on a panel, select the panel I wish to adjust, then click on the appearance tab, I can adjust such things. On my system, the background style is set to "None (use system style)." I just the Alpha's adjustment slider all the way down to zero. Upon moving my mouse cursor up to the panel I adjusted, I saw that all of my applet icons / information displays were still there and as visible as before - but the panel, itself, had completely disappeared.

I then adjusted things back the way I had them so that when I move my mouse cursor over a panel in order to make it appear, I have a - somewhat - translucent medium gray panel, which allows me to still see what is underneath, but provides just enough of a "solid" color background for clear readability of the information that panel contains. I have three double-sized panels (the one on the left side is only large enough for seven double- (quadruple- , I guess, since they remain to scale and the panel is double-sized) sized oft-used application launchers) on my desktop and they are all set to auto-hide, so when I do not wish to see them (am not using what they contain)... I really don't see them.

IF what I described in the first paragraph, above, fails to work as well and easily on your system as it just did on mine, I suppose that you could use your favorite image editor to crop the portion of your chosen desktop background image that would be in the same location as the panel, save a copy, and then change the panel's background style to "background image" and select the image you created. But that seems overly complicated and a PitA if you change your desktop background images regularly. So try my suggestion first, or play with the enter/leave transparency sliders.

Regards,
MDM

Hunter101 · 2015-08-29 21:46:57

MountainDewManiac wrote:

If I right-click on a panel, select the panel I wish to adjust, then click on the appearance tab, I can adjust such things. On my system, the background style is set to "None (use system style)." I just the Alpha's adjustment slider all the way down to zero. Upon moving my mouse cursor up to the panel I adjusted, I saw that all of my applet icons / information displays were still there and as visible as before - but the panel, itself, had completely disappeared.
...
Regards,
MDM

Hmm.. this didn't work on mine hmm I tried playing with Enter/Leave sliders but no luck. Can something like compiz achieve this?

MountainDewManiac · 2015-08-30 00:37:34

Setting the Alpha all the way down to zero slider moved all the way left ( <=== THAT way, lol) didn't do it? Keep in mind that this is a different thing than the enter/leave sliders (as I mentioned).

I was going to assume that you tried both, but then figured it wouldn't hurt to ask for a clarification. Because the above should work to make the panel invisible (and without affecting the visibility of the items on that panel).

This is using Xfce's own window manager (xfwm), BtW. I know nothing about whether using Compiz would negatively affect the function of the panels in Xfce. I wouldn't think so (it's a desktop thing, not a window one), but I really don't know.

Regards,
MDM

ToZ · 2015-08-30 01:07:28

A GTK hack will fix this for you.

Have a read through this thread. The answer lies in putting the "panel-button-hover.png" file in your home directory and the contents of post #18 in your ~/.gtkrc-2.0 file.

There is a chance that not all elements on the panel are covered with that list. If some are missing, post back and I'll get you the widget names to add to the end of the list.

ozjd · 2015-08-30 04:43:39

I've used this method for a while and found something strange or at least inconsistent. For a couple of panel items, namely the new Pulseaudio plugin and the Power Manger Plugin, this method works with some themes, e.g. Greybird, and not others, e.g. Xfce-smooth. Xfce 4.12 on Korora 21.

Hunter101 · 2015-08-30 09:09:05

ToZ wrote:

A GTK hack will fix this for you.
Have a read through this thread. The answer lies in putting the "panel-button-hover.png" file in your home directory and the contents of post #18 in your ~/.gtkrc-2.0 file.
...

Ahah! I had to do some research but this fixed the problem!

Thanks for the help, everyone.

ToZ · 2015-08-30 12:25:38

ozjd wrote:

I've used this method for a while and found something strange or at least inconsistent. For a couple of panel items, namely the new Pulseaudio plugin and the Power Manger Plugin, this method works with some themes, e.g. Greybird, and not others, e.g. Xfce-smooth. Xfce 4.12 on Korora 21.

Those are affected by GTK3 configuration settings. Interesting that it works with greybird for you. I have to add the following snippet to ~/.config/gtk-3.0/gtk.css to get all GTK3-supported themes to remove the background hover from those applets:

.xfce4-panel .button:hover,
.xfce4-panel .button:active:hover,
.xfce4-panel .button:checked:hover {
    border-color: transparent;
    background-image: none;
    border-radius: 0;
    border-color: transparent;
    box-shadow: none;
    color: @panel_fg_color;

    transition: none;
}

...and a panel reload to read and process them.

ozjd · 2015-08-31 06:00:01

Thanks that fixed it

ozjd · 2016-07-31 07:05:19

ToZ wrote:

Those are affected by GTK3 configuration settings. Interesting that it works with greybird for you. I have to add the following snippet to ~/.config/gtk-3.0/gtk.css to get all GTK3-supported themes to remove the background hover from those applets:
.xfce4-panel .button:hover,
.xfce4-panel .button:active:hover,
.xfce4-panel .button:checked:hover {
    border-color: transparent;
    background-image: none;
    border-radius: 0;
    border-color: transparent;
    box-shadow: none;
    color: @panel_fg_color;

    transition: none;
}
...and a panel reload to read and process them.

Sorry to revive an old thread but an upgrade to GTK 3.20 has broken this. Any suggestions?

ToZ · 2016-07-31 10:11:15

To get the best match, here is the snippet that I use now:

.xfce4-panel.panel {
/* change the background-color to match the background color of the panel */
 background-color: #2b2e37; 
 text-shadow: none;
 -gtk-icon-shadow: none; }
 .xfce4-panel.panel button.flat, .xfce4-panel.panel button.sidebar-button {
  /* the foreground color of the text */
  color: #F5F5F5;
  border-radius: 0;
  border: none; }
  .xfce4-panel.panel button.flat:hover, .xfce4-panel.panel button.sidebar-button:hover {
   border: none;
   background-color: rgba(0, 0, 0, 0.0); }
   .xfce4-panel.panel button.flat:active, .xfce4-panel.panel button.sidebar-button:active, .xfce4-panel.panel button.flat:checked, .xfce4-panel.panel button.sidebar-button:checked {
    color: #ffffff;
    border: none;
    background-color: rgba(0, 0, 0, 0.0);
}

Note that there are two colours to manually change (see comments in snippet). The first is to match the background of your panel, and the second is for the colour of the text.

ozjd · 2016-07-31 11:14:38

ToZ wrote:

To get the best match, here is the snippet that I use now:

.xfce4-panel.panel {
/* change the background-color to match the background color of the panel */
 background-color: #2b2e37; 
 text-shadow: none;
 -gtk-icon-shadow: none; }
 .xfce4-panel.panel button.flat, .xfce4-panel.panel button.sidebar-button {
  /* the foreground color of the text */
  color: #F5F5F5;
  border-radius: 0;
  border: none; }
  .xfce4-panel.panel button.flat:hover, .xfce4-panel.panel button.sidebar-button:hover {
   border: none;
   background-color: rgba(0, 0, 0, 0.0); }
   .xfce4-panel.panel button.flat:active, .xfce4-panel.panel button.sidebar-button:active, .xfce4-panel.panel button.flat:checked, .xfce4-panel.panel button.sidebar-button:checked {
    color: #ffffff;
    border: none;
    background-color: rgba(0, 0, 0, 0.0);
}

Note that there are two colours to manually change (see comments in snippet). The first is to match the background of your panel, and the second is for the colour of the text.

Thanks for the response. However the object is to make the background transparent.

ToZ · 2016-07-31 14:16:34

It is transparent for me provided I match the colour (not sure I understand why that is necessary). Can you post a screenshot? Which theme are you using?

If you are setting your panel transparency Alpha to 0, you can also change the first "background-color" entry to:

background-color: transparent;

However, if you change your alpha level it won't work. The sure-fire way for me to get transparency to work regardless of the Alpha level, is to match the panel background colour with Alpha on 100, then use that snippet.

There might be a better way, but I haven't found it. This snippet is modified from css code I found in the Arc and Vertex themes.

ozjd · 2016-08-01 02:10:29

I'm using Candra-Theme-3.20-Darker and it has similar code in it. I have the Alpha set to zero. The only issue was when hovering over the PulseAudio Plugin but I think that is the only GTK3 plugin on the panel. I changed the background color line to transparent and that has solved it.

Thanks again.

Xfce Forum

Sub domains

#1 2015-08-29 21:13:35

[Solved] How to make buttons not show a background color when hovered over?

#2 2015-08-29 21:41:52

Re: [Solved] How to make buttons not show a background color when hovered over?

#3 2015-08-29 21:46:57

Re: [Solved] How to make buttons not show a background color when hovered over?

#4 2015-08-30 00:37:34

Re: [Solved] How to make buttons not show a background color when hovered over?

#5 2015-08-30 01:07:28

Re: [Solved] How to make buttons not show a background color when hovered over?

#6 2015-08-30 04:43:39

Re: [Solved] How to make buttons not show a background color when hovered over?

#7 2015-08-30 09:09:05

Re: [Solved] How to make buttons not show a background color when hovered over?

#8 2015-08-30 12:25:38

Re: [Solved] How to make buttons not show a background color when hovered over?

#9 2015-08-31 06:00:01

Re: [Solved] How to make buttons not show a background color when hovered over?

#10 2016-07-31 07:05:19

Re: [Solved] How to make buttons not show a background color when hovered over?

#11 2016-07-31 10:11:15

Re: [Solved] How to make buttons not show a background color when hovered over?

#12 2016-07-31 11:14:38

Re: [Solved] How to make buttons not show a background color when hovered over?

#13 2016-07-31 14:16:34

Re: [Solved] How to make buttons not show a background color when hovered over?

#14 2016-08-01 02:10:29

Re: [Solved] How to make buttons not show a background color when hovered over?

Board footer