CSS settings with GTK Inspector

jt1122 · 2024-02-12 08:52:24

Hi,

I'm trying to adjust the colours & fonts on the xfce4-panel using the GTK Inspector tool.

A few questions please:
1. How can the Inspector font be increased? it's tiny.
2. In the "CSS Nodes" menu how do I know which class to use, e.g.
xfce-timer plugin has a node hierarchy of window->decoration->widget->box.
so in the CSS code tab do I put (for example)

#xfce-timer-plugin-10 window {color:red}

or

#xfce-timer-plugin-10 box {color:red}

?
3. How do I set the default font shape & colour for all panel items instead of tweaking them per item?.
4. Are there "hidden" css nodes which don't appear in the hierarchy tree? some item show only a few nodes w/o anything relating to colour or font.

Thanks

ToZ · 2024-02-12 19:40:14

jt1122 wrote:

1. How can the Inspector font be increased? it's tiny.

I'm not sure its possible to directly manipulate it. I believe it just uses your default font and size. Do you have anything in ~/.config/gtk-3.0/settings.ini that might affect font size? Also:

xfconf-query -c xsettings -p /Gtk/FontName

Does this problem affect any other GTK3 applications?

2. In the "CSS Nodes" menu how do I know which class to use, e.g.
xfce-timer plugin has a node hierarchy of window->decoration->widget->box.
so in the CSS code tab do I put (for example)
#xfce-timer-plugin-10 window {color:red}
or
#xfce-timer-plugin-10 box {color:red}
?

A couple of points:

All of the Name, ID and Style Class variables are hierarchical. To select the correct one you need to ensure the hierarchical relationship is maintained.
You need to ensure that end target is a widget that accepts the CSS change that you wish to make. For example "label" accepting "color", or "window" accepting "background-color".

3. How do I set the default font shape & colour for all panel items instead of tweaking them per item?.

Since its hierarchical in nature, you just need to specify further up in the hierarchy. So, for all items in the panel, you would first select the panel class ".xfce4-panel" and then the label (text holder) Name/widget "label"):

.xfce4-panel label  {color: red; font-family: "Monospace"; font-size: 48pt;}

4. Are there "hidden" css nodes which don't appear in the hierarchy tree? some item show only a few nodes w/o anything relating to colour or font.

No. If you are only seeing a few, as is the case with the timer plugin, it means the developer didn't many custom style classes. You can still get to the node using object names if necessary. Which element are you trying to affect? The examples you provide below are using CSS properties (color) that don't apply to the objects (window/box) that you are trying to affect.

jt1122 · 2024-02-13 09:10:37

Thanks for the detailed reply.

How do I know what target widget is accepting the property I need? for example, "label" isn't showing anywhere yet it's still recognized in commands like #timer-plugin label (color:red}.

ToZ · 2024-02-13 11:02:04

jt1122 wrote:

How do I know what target widget is accepting the property I need?

Unfortunately, there is no one place where you can find a definitive list. This and this are good starting points, but its mostly trial and error.

for example, "label" isn't showing anywhere yet it's still recognized in commands like #timer-plugin label (color:red}.

The timer plugin doesn't have any text on the panel so you won't see a label. However, in the configuration window there are labels, and they would be affected.

Xfce Forum

Sub domains

#1 2024-02-12 08:52:24

CSS settings with GTK Inspector

#2 2024-02-12 19:40:14

Re: CSS settings with GTK Inspector

#3 2024-02-13 09:10:37

Re: CSS settings with GTK Inspector

#4 2024-02-13 11:02:04

Re: CSS settings with GTK Inspector

Board footer