[solved] Changing font color and mouseover background for panel plugin

Case · 2019-09-01 13:32:58

After Debian Testing upgraded to XFCE 4.14 my old hacks to make the (transparent) panel look good a on dark background (fix the font color of the clock etc.) will not work anymore, because GTK3 is of course ignoring anything I added to the .gtkrc-2.0 file years ago. I have no idea if GTK3 actually features an equivalent of gtkrc, I'm worried it does not. But even if it does, I have no idea where to start, what qualifiers to use... Is there any documentation available that could get me started?

The following screenshots illustrate my problem. What you see here is a transparent XFCE panel containing a clock (bottom) and a sys tray (top). Once without mouse over, once with mouseover. The 'panel' background you can see in these screenshots is part of the wallpaper, it's not the panel's background (long story...).

I need to fix the font color for the clock plugin, as well as the mouseover background color, obviously. These color clashes are not limited to my rather exotic setup, btw.: If I switch the panel to a black background, the font color of the clock plugin stays black as well.

Last edited by Case (2019-09-02 13:10:59)

ToZ · 2019-09-01 14:20:20

Case wrote:

I have no idea if GTK3 actually features an equivalent of gtkrc, I'm worried it does not.

Yes it does, ~/.config/gtk-3.0/gtk.css. It now uses CSS to theme widgets.

But even if it does, I have no idea where to start, what qualifiers to use... Is there any documentation available that could get me started?

Start with https://developer.gnome.org/gtk3/stable/theming.html - the first two chapters. Then read up on the Gtk Inspector and understand how to start it.

Basic HowTo
To start a GTK3 app in inspector debug mode, you would:

GTK_DEBUG=interactive app

To start it with xfce4-panel, you need to first quit the panel, then start it in GTK debug mode:

xfce4-panel -q && GTK_DEBUG=interactive xfce4-panel

When running xfce4-panel like this, you will get many inspector windows popup - you'll need to find which one belongs to the element you are looking for. I use one of two methods:

Double-click the tree entries to expand them and look for the widget name in the list (e.g. clock, pulseaudio-plugin, etc)
Click the locator in the top-left of the inspector window and then hover your mouseover every plugin until its background changes colour - then you have found it.

The following screenshots illustrate my problem. What you see here is a transparent XFCE panel containing a clock (bottom) and a sys tray (top). Once without mouse over, once with mouseover. The 'panel' background you can see in these screenshots is part of the wallpaper, it's not the panel's background (long story...).
I need to fix the font color for the clock plugin, as well as the mouseover background color, obviously. These color clashes are not limited to my rather exotic setup, btw.: If I switch the panel to a black background, the font color of the clock plugin stays black as well.

You'll also need to understand widget pseudo-classes. Search for "pseudo-classes" at this link. Quoted:

Another use of pseudo-classes is to match widgets depending on their state. The available pseudo-classes for widget states are :active, :hover :disabled, :selected, :focus, :indeterminate, :checked and :backdrop. In addition, the following pseudo-classes don't have a direct equivalent as a widget state: :dir(ltr) and :dir(rtl) (for text direction), :link and :visited (for links) and :drop(active) (for highlighting drop targets). Widget state pseudo-classes may only apply to the last element in a selector.
Example 18. Theme pressed buttons
button:active {
background-color: #0274d9;
}

So basically, to affect the hover state of a widget, you need to use the ":hover" pseudo class.

To answer your specific question

Start xfce4-panel in interactive debug mode:

xfce4-panel -q && GTK_DEBUG=interactive xfce4-panel

Find the clock inspector window

A few things to note:
- You can tell its the clock plugin by the Object (XfceClockPlugin) and the name (clock-18)
- To access the widget by its name, you must precede it with a "#". In this case, "#clock-18" (specific to one instance) or "#clock-button" (specific to all clock instances).
- To access the widget by it's class name, you must precede it with a ".". In this case, ".flat", or ".toggle". Note that these are generic classes that are used throughout GTK3 so any change to this class will affect all widgets that use this class.
- To access any GTK base classes (those in the "Name" column, just use the name as you see it (e.g. button, label, etc)
Go through clock's GTK tree and notice that there are really only two ways to access the widget (via the above).
If you haven't done so you, click the locator in the top-left of the window and click on the clock button. Then from the drop down which defaults to "Miscellaneous", select "CSS Nodes" to get back to the previous screen. Notice that now the Properties are displayed to the right. These are the ones that you can affect:
Let's make some changes. First the color of the text. Go to the CSS tab and the enter the following (last line only):

...Notice how the color of the label changes red.
Change the CSS code to read:
```
#clock-button:hover label { color: red }
```
...Notice how it only changes red when you hover over it
To change the background color try:
```
#clock-button label { background-color: red }
```
or, if you want to use transparency:
```
#clock-button label { background-color: rgba(255,0,0,0.5) }
```
...where the first three numbers are the RGB values and the 4th is the transparency value from 0.0 to 1.0.

Once you have decided on the specific tweaks that work for you, copy and paste them into ~/.config/gtk-3.0/gtk.css.

A good resource is the Greybird theme. It is maintained by one of the Xfce developers and has all the latest classes added. Looking at how they affect certain widgets will also give you ideas on how to make changes to Xfce widgets.

tl;dr
Without knowing the exact theme you are using and how it addresses the widgets, I would suggest trying something like:

#clock-button label { color: grey; }
#clock-button:hover { background-image: none; background-color: transparent; }

...in your ~/.config/gtk-3.0/gtk.css file.

Hopefully this is helpful to get you started.

Aravisian · 2019-09-01 14:32:49

Case wrote:

After Debian Testing upgraded to XFCE 4.14 my old hacks to make the (transparent) panel look good a on dark background (fix the font color of the clock etc.) will not work anymore, because GTK3 is of course ignoring anything I added to the .gtkrc-2.0 file years ago. I have no idea if GTK3 actually features an equivalent of gtkrc, I'm worried it does not. But even if it does, I have no idea where to start, what qualifiers to use... Is there any documentation available that could get me started?
The following screenshots illustrate my problem. What you see here is a transparent XFCE panel containing a clock (bottom) and a sys tray (top). Once without mouse over, once with mouseover. The 'panel' background you can see in these screenshots is part of the wallpaper, it's not the panel's background (long story...).
https://i.ibb.co/SRjwPnh/panel.png
I need to fix the font color for the clock plugin, as well as the mouseover background color, obviously. These color clashes are not limited to my rather exotic setup, btw.: If I switch the panel to a black background, the font color of the clock plugin stays black as well.

Undoubtedly, others will be more helpful in their replies.
But as a start, yes there is a lot of documentation available. Online, you can visit here:
https://developer.gnome.org/gtk3/stable … rview.html
For offline referencing, you can enter in terminal:

sudo apt-get install devhelp

This will install the DevHelp package which is a treeview reference. I also use the gtk-3-examples package which includes gtk-Demo. Demo is pretty awesome. If you use it, you will see what I mean.
You will need;

sudo apt-get install libgtk-3-dev

I honestly cannot remember now what terminal command installs the gtk-demo package, you may need to use Synaptic to look for it.
I also use a 'rather exotic' transparent set up which I am desperately clinging to in spite of Gnome.

EDIT: Toz was already on it as I was typing this and WAS more helpful. Which helps me learn, too, so Thanks!

Last edited by Aravisian (2019-09-01 14:36:54)

Case · 2019-09-02 00:27:34

@ToZ:

Holy shit.

Nah, sorry - let me rephrase that:

HOLY SHIT.

That reply was unbelievable.

I also had to remove a border that showed up when hovering with the mouse, and while at it I also 'fixed' clicking on the clock gadget. This is what i ended up with:

/* fix text color and shadow of xfce panel clock on dark background*/
#clock-button label { color: #dadada }
#clock-button:hover label { text-shadow: none }

/* fix background and border color for xfce panel clock plugin */
#clock-button:hover, #clock-button:checked {
	background-image: none;
	background-color: transparent;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none
}

Now I'm wondering - I can't be the only person to ever use the clock plugin in digital mode on a dark background? I'll go check if somebody filed a bug for that already, I'm assuming you did verify the problem when coming up with that reply?

ToZ · 2019-09-02 01:26:09

Case wrote:

Now I'm wondering - I can't be the only person to ever use the clock plugin in digital mode on a dark background? I'll go check if somebody filed a bug for that already, I'm assuming you did verify the problem when coming up with that reply?

Which GTK (appearance) theme are you using? Usually inconsistencies like this are the result of using a dated (un-maintained) theme Edit: I mean a theme that hasn't been updated to use the newer Xfce classes.

Last edited by ToZ (2019-09-02 01:28:25)

Case · 2019-09-02 13:04:16

ToZ wrote:

Which GTK (appearance) theme are you using? Usually inconsistencies like this are the result of using a dated (un-maintained) theme Edit: I mean a theme that hasn't been updated to use the newer Xfce classes.

I'm simply using Adwaita. To confirm a theory, I removed all my css changes again, logged out, logged back in - clock was using a black font for its display. I changed the GTK theme to Adwaita-Dark and the clock display immediately changed to a light grey font color.

So the clock apparently monitors the GTK theme and decides what font color to use based on whatever it assumes the current theme's panel background color might be. Obviously, that approach does not take xfce4-panel's ability to use custom images or colors for the background into account.

I'll file an enhancement request. Thanks again for the extensive tutorial.

julian · 2020-09-09 17:40:08

Hi all, when it comes to the clock I've also found that there's no margins around it, so when the LCD clock (also analog and binary clocks) were being displayed, it didn't look right.

To fix this I used the following (you may want to tweak the number depending on your needs eyesight etc):

#clock-button {padding:6px;}

Last edited by julian (2020-09-09 17:41:25)

KBar · 2021-11-15 19:49:08

This is one of the best (yet so simple) guides I've ever come across! So much knowledge condensed in a very concise, precise and to-the-point manner.

I cannot thank you enough, ToZ! Nobody can!

golinux · 2022-07-17 21:12:05

Case wrote:

@ToZ:
Holy shit.
Nah, sorry - let me rephrase that:
HOLY SHIT.
That reply was unbelievable.
I also had to remove a border that showed up when hovering with the mouse, and while at it I also 'fixed' clicking on the clock gadget. This is what i ended up with:
/* fix text color and shadow of xfce panel clock on dark background*/
#clock-button label { color: #dadada }
#clock-button:hover label { text-shadow: none }

/* fix background and border color for xfce panel clock plugin */
#clock-button:hover, #clock-button:checked {
	background-image: none;
	background-color: transparent;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none
}
Now I'm wondering - I can't be the only person to ever use the clock plugin in digital mode on a dark background? I'll go check if somebody filed a bug for that already, I'm assuming you did verify the problem when coming up with that reply?

OMG! Case . . . wonder no longer!! I have just set up your css and you have my eternal gratitude. I doubt I could have done this on my own. The borders are not transparent here on mouse hover but I should be able to fix that. This task used to be so easy to accomplish this with orage. GTK3 is a loathsome creature that always has to make things more complicated just because. I long for simplicity . . .

UPDATE . . . I could never get a transparent border around the clock on hover. I tried a number of things and nothing worked. Then I noticed that my firefox is a bit broken. There is now a transparent background under the FF url suggestions that dropdown from the address bar. Whaaaaat? I deleted the offending rules for the clock from /.config/gtk-3.0/gtk.css , logged out and back in but FF has not repaired itself. Help! How can I fix this?

Last edited by golinux (2022-07-17 22:58:49)

Xfce Forum

Sub domains

#1 2019-09-01 13:32:58

[solved] Changing font color and mouseover background for panel plugin

#2 2019-09-01 14:20:20

Re: [solved] Changing font color and mouseover background for panel plugin

#3 2019-09-01 14:32:49

Re: [solved] Changing font color and mouseover background for panel plugin

#4 2019-09-02 00:27:34

Re: [solved] Changing font color and mouseover background for panel plugin

#5 2019-09-02 01:26:09

Re: [solved] Changing font color and mouseover background for panel plugin

#6 2019-09-02 13:04:16

Re: [solved] Changing font color and mouseover background for panel plugin

#7 2020-09-09 17:40:08

Re: [solved] Changing font color and mouseover background for panel plugin

#8 2021-11-15 19:49:08

Re: [solved] Changing font color and mouseover background for panel plugin

#9 2022-07-17 21:12:05

Re: [solved] Changing font color and mouseover background for panel plugin

Board footer