Xfce Forum

Brian

Member

Registered: 2023-03-22

Posts: 15

gtk.css theming queries

I had a lot of fun a while ago researching this topic, and customizing my Window Buttons to be more heavily styled and distinctive when active etc. I'm fairly happy with the end result, but there were still some remaining questions that I never managed to figure out:

1. Is it intentional that some CSS elements need to have spaces between them and with others they need to be removed? I'm not sure if this is a bug or an error in the docs?

E.g. https://docs.xfce.org/xfce/xfce4-panel/theming shows:

.xfce4-panel .background
.xfce4-panel .horizontal .background

Whereas to get these to work I had to remove the space so that they are instead:

.xfce4-panel.background
.xfce4-panel.horizontal.background

However other entries need to have the spaces included to function, such as:

.xfce4-panel .tasklist .toggle

2. How to theme the coloured indicator bar which appears on the selected window button?

3. Is there any way to have different opacity of text and icons on window buttons without using RGBA? (I can't use RGBA because I'm referring to named colours so that they synchronise with the theme).

4. How to theme minimised window buttons?   .xfce4-panel .tasklist .toggle:{what??}

5. Where can I find the current GTK3 version of the xfdesktop tweak settings described for GTK2 here: https://docs.xfce.org/xfce/xfdesktop/advanced ?

I managed to find some referenced in MX Linux in their no-ellipse-desktop-filenames.css file as follows:

XfdesktopIconView.view {
    -XfdesktopIconView-label-alpha:0;
    -XfdesktopIconView-selected-label-alpha:0;
    -XfdesktopIconView-ellipsize-icon-labels:0;
    -XfdesktopIconView-tooltip-size:128;
    -XfdesktopIconView-cell-spacing:0;
    -XfdesktopIconView-cell-padding:0;
    -XfdesktopIconView-cell-text-width-proportion:2.4;
}

...but not all of these appear to be working? The alpha and tooltip size options don't do anything for me.

In particular I would like to know:
    (a) How to define a custom ellipsize length for desktop items in terms of number of characters for example?
    (b) Is it possible to define a horizontal cell padding independently of the vertical one?
    (c) How to define custom icon and text size?

Last edited by Brian (2023-06-23 20:44:05)

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,056

Re: gtk.css theming queries

1. Is it intentional that some CSS elements need to have spaces between them and with others they need to be removed? I'm not sure if this is a bug or an error in the docs?

E.g. https://docs.xfce.org/xfce/xfce4-panel/theming shows:

.xfce4-panel .background
.xfce4-panel .horizontal .background

Notice that both style classes are on the same level - there should be no space between them. Putting both together more uniquely identifies the style class:

However other entries need to have the spaces included to function, such as:

.xfce4-panel .tasklist .toggle

Notice how they are at 3 different levels - need to be separated:

2. How to theme the coloured indicator bar which appears on the selected window button?

That would depend on what you mean by "coloured indicator bar" and which GTK theme you are using. Perhaps you can post a screenshot/image?

3. Is there any way to have different opacity of text and icons on window buttons without using RGBA? (I can't use RGBA because I'm referring to named colours so that they synchronise with the theme).

.tasklist button image {opacity: 0.25}
.tasklist button label {opacity: 0.25}

4. How to theme minimised window buttons?   .xfce4-panel .tasklist .toggle:{what??}

For images:

 .xfce4-panel .tasklist .minimized

For labels:

 .xfce4-panel .tasklist .label-hidden

5. Where can I find the current GTK3 version of the xfdesktop tweak settings described for GTK2 here: https://docs.xfce.org/xfce/xfdesktop/advanced ?

See; https://forum.xfce.org/viewtopic.php?pid=54115#p54115

I managed to find some referenced in MX Linux in their no-ellipse-desktop-filenames.css file as follows:
...but not all of these appear to be working? The alpha and tooltip size options don't do anything for me.

You need to restart xfdesktop for some of these settings to take effect:

pkill xfdesktop

In particular I would like to know:
    (a) How to define a custom ellipsize length for desktop items in terms of number of characters for example?

Not by number of characters specifically,  but it would be a combination of the cell-spacing, cell-padding, and cell-text-width-proportion values.
   

(b) Is it possible to define a horizontal cell padding independently of the vertical one?

I don't believe so.
   

(c) How to define custom icon and text size?

I don't believe this is possible - unless you change it for every icon, in which case Settings Manager > Desktop > Desktop Icons (depending on which version of Xfce you are using).

---

Please remember to mark your thread [SOLVED] to make it easier for others to find
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

Brian

Member

Registered: 2023-03-22

Posts: 15

Re: gtk.css theming queries

♥ Thank you so much for answering all of this so completely!!! ♥

1.

Notice that both style classes are on the same level - there should be no space between them.

Thank you for explaining. I haven't tried GtkInspector yet, but I guess it will become clearer to me in that. Maybe the documentation can be corrected someday.

2.
Thank you for pointing out that this detail is coming from the theme, which allowed me to track it down eventually. So the theme is creating underlines for activated panel items using box-shadow as follows:

 .xfce4-panel button:not(#whiskermenu-button):checked, .xfce4-panel button:not(#whiskermenu-button):active {
    box-shadow: inset 0 -2px 0 #737680;
    background: rgba(0, 0, 0, 0.2); }

.xfce4-panel.vertical button:not(#whiskermenu-button):checked, .xfce4-panel.vertical button:not(#whiskermenu-button):active {
  box-shadow: inset 2px 0 0 #737680; }

 
From trial and error I found that .xfce4-panel button modifies the buttons from all plugins on the panel, whereas using .xfce4-panel .tasklist .toggle only impacts the Window buttons. However it seems that the .xfce4-panel button setting always takes priority if they are both used in gtk.css. So I couldn't see any way of setting different custom box-shadow values for both the other plugin buttons, and the window buttons independently from one another? But in the end I was happy to leave the other buttons as default and just set a custom box-shadow on the Window Buttons alone to remove it from them.

3.

.tasklist button image {opacity: 0.25}
.tasklist button label {opacity: 0.25}

This works great thank you. I wanted to change the opacity based on different states of the window buttons and by learning from the theme code above I managed to get that working in the end by changing button to instead being one of:
button:hover
button:active
button:checked

I was surprised that neither button:minimized nor button:label-hidden had any effect for minimised buttons, but was able to do those in the end using your reply to Q.4 below.

4.

For images:
.xfce4-panel .tasklist .minimized
For labels:
.xfce4-panel .tasklist .label-hidden

Got that working too now thank you! It is a bit confusing that these seem to be defined in a different fashion to all the other button states.

5.

See; https://forum.xfce.org/viewtopic.php?pid=54115#p54115

Very helpful post thank you!

pkill xfdesktop

This command causes issues for me with the desktop becoming unresponsive. I guess xfdesktop does not automatically restart again. So I use this one instead:

xfdesktop --reload

I think I was doing something like that previously already. In any case, the alpha and tooltip size options are still not working. For the former, it looks like from your referenced post that these are wrong, and should instead be:

XfdesktopIconView.view .label > background			
XfdesktopIconView.view .label:active > background

But I'm not sure what the syntax should be for changing these settings? I tried the following, and also removing the "> background" part all to no effect:

XfdesktopIconView.view .label > background {
        opacity: 0;
        color: black; }			
XfdesktopIconView.view .label:active > background {
        background: black;
        opacity: 0;
        color: black; }

I also see from your code comment in that post that the tooltip size option only changes the icon size, rather than the entire tooltip size. It still has no effect for me, but if that is the case there is no need for it anyway as it would appear to be exactly the same as the Desktop settings → Icons → "Show icon tooltips. Size:" setting.

I don't believe this is possible - unless you change it for every icon, in which case Settings Manager > Desktop > Desktop Icons (depending on which version of Xfce you are using).

That helped as I noticed the custom font size setting here, and between tweaking that, the desktop icon size also available here, and the cell-spacing/padding/text-width-proportion settings in gtk.css, I've been able to get things more or less to my liking now, except for the following:

In the Desktop settings → Icons menu, the first option here "Icon type" allows one to enable/disable the display of desktop icons. Is there any way to toggle this setting with a command such that I could then use it to toggle desktop items to appear or not with a keyboard shortcut?

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,056

Re: gtk.css theming queries

♥ Thank you so much for answering all of this so completely!!! ♥

No worries - glad you found it helpful.

However it seems that the .xfce4-panel button setting always takes priority if they are both used in gtk.css. So I couldn't see any way of setting different custom box-shadow values for both the other plugin buttons, and the window buttons independently from one another?

This shouldn't be the case, and testing it now,  I don't see this happening. The second command is more specific (.tasklist .toggle) so it should take precedence. So for example:

.xfce4-panel button {background: red}
.xfce4-panel .tasklist .toggle {background: green}

...makes all panel button backgrounds red, except for the tasklist (which is green).

I was surprised that neither button:minimized nor button:label-hidden had any effect for minimised buttons, but was able to do those in the end using your reply to Q.4 below.

Widget state pseudo-classess are limited in options. From https://docs.gtk.org/gtk3/css-overview.html:

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.

.
.

pkill xfdesktop

This command causes issues for me with the desktop becoming unresponsive. I guess xfdesktop does not automatically restart again. So I use this one instead:

xfdesktop --reload

I have problems with both methods. The pkill command succeeds more often than the --reload option.

I think I was doing something like that previously already. In any case, the alpha and tooltip size options are still not working. For the former, it looks like from your referenced post that these are wrong, and should instead be:

XfdesktopIconView.view .label > background			
XfdesktopIconView.view .label:active > background

But I'm not sure what the syntax should be for changing these settings? I tried the following, and also removing the "> background" part all to no effect:

XfdesktopIconView.view .label > background {
        opacity: 0;
        color: black; }			
XfdesktopIconView.view .label:active > background {
        background: black;
        opacity: 0;
        color: black; }

Sorry, I think my post there wasn't clear enough. By "> background", I meant to change the background color, like:

XfdesktopIconView.view .label {background: red;}

.
.

In the Desktop settings → Icons menu, the first option here "Icon type" allows one to enable/disable the display of desktop icons. Is there any way to toggle this setting with a command such that I could then use it to toggle desktop items to appear or not with a keyboard shortcut?

Yes:

xfconf-query -c xfce4-desktop -p /desktop-icons/style -s XX

...where XX is one of:

• 0 (None)

• 1 (Minimized application icons)

• 2 (File/launcher icons)

---

Please remember to mark your thread [SOLVED] to make it easier for others to find
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

Brian

Member

Registered: 2023-03-22

Posts: 15

Re: gtk.css theming queries

This shouldn't be the case, and testing it now,  I don't see this happening. The second command is more specific (.tasklist .toggle) so it should take precedence. So for example:

.xfce4-panel button {background: red}
.xfce4-panel .tasklist .toggle {background: green}

...makes all panel button backgrounds red, except for the tasklist (which is green).

OK, I have narrowed this down now with some further testing. Yes, you are right if you are using only:

.xfce4-panel button {background: red}

and also in the case if you are using:

.xfce4-panel button:checked {background: red}

[Aside: There is some weird interference in this case where in the process of selecting a different window button, the previously selected window button will flash this styling colour for a split second in the process of becoming deselected. It's very subtle, so I only really notice it if this colour is set to something very bright like yellow. I guess it must be removing .xfce4-panel .tasklist styling before it removes the underlying .xfce4-panel styling ]

But as soon as you specify the extra condition to exclude the Whisker Menu, then it takes precedence over .xfce4-panel .tasklist .toggle:

.xfce4-panel button:not(#whiskermenu-button):checked  {background: red}

So I've decided just to accept also applying the box shadow to the Whisker Menu icon too as the preferable compromise compared to also adding it to the window buttons where it is far more noticeably out of place with my other styling.

---

This command causes issues for me with the desktop becoming unresponsive. I guess xfdesktop does not automatically restart again. So I use this one instead:

xfdesktop --reload

I have problems with both methods. The pkill command succeeds more often than the --reload option.

Apologies, I had confused myself previously. The xfdesktop --reload command does not do anything for me. I had just forgotten to remove it from my XFCE keyboard shortcuts. The one I actually use that works for me is:

xfdesktop --quit && xfdesktop

Though I cannot get that to work in the XFCE keyboard shortcuts as it only appears to execute the first part of the command. So I'm running it with xbindkeys instead as an entry in my ~/.xbindkeysrc file.

---

Sorry, I think my post there wasn't clear enough. By "> background", I meant to change the background color, like:

XfdesktopIconView.view .label {background: red;}

That works thank you! I found in the theming file that XfdesktopIconView.label also seems to work exactly the same as XfdesktopIconView.view .label
What I couldn't get working in either of them though was an opacity parameter. E.g. this works to change the border radius fine but makes no change to the opacity:

XfdesktopIconView.view .label:active {
	opacity: 0.1 ;
	border-radius: 12px; } 

   
The theme is setting transparency always either with a color set to transparent, or an rgba value.

---

Yes:

xfconf-query -c xfce4-desktop -p /desktop-icons/style -s XX

...where XX is one of:

• 0 (None)

• 1 (Minimized application icons)

• 2 (File/launcher icons)

This is brilliant! I was so happy to see this is possible thank you. I wanted to make a single shortcut key to toggle on/off desktop icons to replicate how I used to do it in Windows. I haven't made any scripts before, but I was able to figure out in the end how to make one to do that as follows:

#!/bin/bash
#Toggle Desktop Icons On/Off
value=$( xfconf-query -c xfce4-desktop -p /desktop-icons/style )
if [ $value -eq 2 ]
then
  xfconf-query -c xfce4-desktop -p /desktop-icons/style -s 0
else
xfconf-query -c xfce4-desktop -p /desktop-icons/style -s 2
fi