Xfce Forum

Sliver X

Member

Registered: 2025-10-06

Posts: 12

CSS/Taskbar Issues

I've been working on an Xfce-centric GTK2/3/4 theme for the past few months and am hitting a snag getting the last bit of it finished.

The UI elements are recreations of Windows 95 OSR2.x's controls, so getting xfce4-panel looking OK horizontally was straight forward. However, vertical/deskbar is giving me fits.

For example:

#XfcePanelWindow {
   box-shadow: 0 1px @light_shadow inset;
   border-top: @light_shadow 1px solid; }

This puts a thin border on the top of a horizontal panel, but not a vertical one. Also due to some kind of cascading, this also affects things like plugins that have no explicit theme, which is actually kind of useful in my scenario. Except:

#XfcePanelWindow .vertical {
   box-shadow: 0 1px @light_shadow inset;
   border-top: @light_shadow 1px solid; }

Makes them show up in vertical/deskbar mode but is also showing them on horizontal. Is there a way to explicitly separate decoration for these two things or am I running into some kind of fundamental problem with how this works?

Thank you for any advice/help you may have to offer.

vm_x

Member

Registered: 2024-02-12

Posts: 42

Re: CSS/Taskbar Issues

I've never done any XFCE theming so I'm just assuming things from the code you posted, but have you tried instead of this:

#XfcePanelWindow {
   ...
}

#XfcePanelWindow .vertical {
   ...
}

... doing it like this:

#XfcePanelWindow .horizontal {
   ...
}

#XfcePanelWindow .vertical {
   ...
}

Last edited by vm_x (2025-10-06 20:42:11)

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

I forgot to mention that: The reason I'm not declaring .horizontal explicitly is that while it works, it also puts the CSS over other things that it shouldn't: This does not happen if I just omit .horizontal.

I'm having a bit of a time understanding how to chain (or not!) class/object/status IDs, as what comes out the GTK debugger isn't in the right order half the time from what I've seen. So I've tried:

#XfcePanelWindow .horizontal
#XfcePanelWindow.xfce4-panel .horizontal
#XfcePanelWindow.xfce4-panel.panel.background .horizontal
.xfce4-panel .horizontal
.xfce4-panel.panel .horizontal
Etc, etc.

All of which technically work, but in various states of putting the decoration on top of *way* more objects than if .horizontal is not defined.

I've also gone through all the GTK3 CSS and I'm not seeing anything using .horizontal that would be pushing this onto other objects?

Last edited by Sliver X (2025-10-06 20:57:47)

vm_x

Member

Registered: 2024-02-12

Posts: 42

Re: CSS/Taskbar Issues

Hmm... going by what you wrote, it sounds like there are other elements inside the panel that also use vertical/horizontal classes and they inherit the style too?

If that's the case, maybe try:

#XfcePanelWindow > .horizontal {
   ...
}

Added later 06 min 57 s:

I've also gone through all the GTK3 CSS and I'm not seeing anything using .horizontal that would be pushing this onto other objects?

I see, care to do something like this and post the screenshot?

#XfcePanelWindow {
   background-color: red;
}

#XfcePanelWindow .horizontal {
   background-color: lime;
}

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

This is definitely working better, and with a bit of work I should be able to make this behave the way I'm wanting.

Thank you very much for taking the time to help with this.

vm_x

Member

Registered: 2024-02-12

Posts: 42

Re: CSS/Taskbar Issues

I wish I knew how these elements are nested so I could actually help instead of speculating.

Just in case, if horizontal is on the same level as xfce4-panel, maybe also try this:

.xfce4-panel.horizontal {
   ...
}

.xfce4-panel.vertical {
   ...
}

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

I wish I knew how these elements are nested so I could actually help instead of speculating.

Just in case, if horizontal is on the same level as xfce4-panel, maybe also try this:

.xfce4-panel.horizontal {
   ...
}

.xfce4-panel.vertical {
   ...
}

I spoke too soon: I'm still running into issues with this using either method (I had a bit of a hackjob of CSS elsewhere that needed removed that was masking the problem).

Here is a screenshot as requested with the loud colors set up:

Basically, I'm trying to manipulate the red areas to have a border. But not the red areas nested deeper than the first level (The panel slab itself), so no buttons, widgets, etc. The exception to this will be for separators on a vertical bar (Even forcing it badly, the border didn't appear to the side on them) but that's another problem to deal with I think.

I'm still rather new to the GTK Inspector, but here's what these two panels look like under it:

Last edited by Sliver X (2025-10-07 00:29:31)

vm_x

Member

Registered: 2024-02-12

Posts: 42

Re: CSS/Taskbar Issues

Well, you certainly sent me down a rabbit hole.

I think we'll have to wait for @ToZ for further clarifications, but here's 2 things I noticed while playing around that might help you.

1). Your left panel isn't actually "vertical", but rather "deskbar". See this screen, for example:

2). "#XfcePanelWindow" and ".xfce4-panel" do not appear to be the same node. "#XfcePanelWindow" seems to be the actual parent, while ".xfce4-panel" seems to be applied to some children, too. See this screen:

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

I'm very much a beginner at CSS, so what I think I'm trying to accomplish is apply a specific style to the first level of either horizontal or deskbar decoration but not anything below it? If that's even possible for this scenario? I'm just really confused about what level of either node that would be and what combinators would be used to target it.

Last edited by Sliver X (2025-10-07 23:05:59)

vm_x

Member

Registered: 2024-02-12

Posts: 42

Re: CSS/Taskbar Issues

Read both those points again and take a better look at both screenshots.

There are 3 panels in the screenshots: "horizontal", "vertical" and "deskbar". There is also the editor with code in the screenshot so you can see directly how to target each one specifically (see border colors).

First screenshot shows you how to target "the first level of either horizontal or deskbar", and second screenshot shows you why you shouldn't target the class ".xfce4-panel" because it gets applied below, too.

Last edited by vm_x (2025-10-07 23:27:20)

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 12,280

Re: CSS/Taskbar Issues

I'm also not seeing a vertical class on my system - however I'm am running the most recent git code. But I think vm_x is correct - you have:

#XfcePanelWindow.horizontal

...and:

#XfcePanelWindow.deskbar

...to separate them.

Also make sure that border is set to greater than 0 in panel preferences (version 4.19.4 and greater) so surround the plugin widgets.

---

Mark solved threads as [SOLVED] to make it easier for others to find solutions.
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

Read both those points again and take a better look at both screenshots.

There are 3 panels in the screenshots: "horizontal", "vertical" and "deskbar". There is also the editor with code in the screenshot so you can see directly how to target each one specifically (see border colors).

First screenshot shows you how to target "the first level of either horizontal or deskbar", and second screenshot shows you why you shouldn't target the class ".xfce4-panel" because it gets applied below, too.

Forgive me for failing to mention that I tried the code provided in the first example (I assumed you were giving me general information but expecting me to connect the dots and my lack of CSS skill was failing me) but it didn't function as expected: Targeting #XfcePanelWindow, #XfcePanelWindow.horizontal and #XfcePanelWindow.deskbar aren't doing anything for me.

I stripped out all the Xfce4-specific CSS in case something elsewhere was conflicting or something and that doesn't seem to make a difference:

This is with border set on both panels to 1.

However, the second example does at least apply the replicated style for horizontal and vertical... But not for deskbar:

And here is an example with literally all the GTK3 CSS stripped except for the first example:

I'm unsure what's going on here, since it obviously is working on your end. I'm running CachyOS (An Arch derivative), so it should be the newest versions of Xfce/GTK/etc. I suppose I need to fire up a VM of another distro and see how it behaves there.

Last edited by Sliver X (2025-10-08 02:04:10)

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 12,280

Re: CSS/Taskbar Issues

Remove the space between #XfcePanelWindow and ".horizontal" and ".deskbar" - see if that makes a difference.

Added later 52 min 38 s:

I'm unsure what's going on here, since it obviously is working on your end. I'm running CachyOS (An Arch derivative), so it should be the newest versions of Xfce/GTK/etc. I suppose I need to fire up a VM of another distro and see how it behaves there.

Maybe also try with the default Adwaita theme in case there is something in your custom theme that is conflicting.

Last edited by ToZ (2025-10-08 02:15:13)

---

Mark solved threads as [SOLVED] to make it easier for others to find solutions.
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

Remove the space between #XfcePanelWindow and ".horizontal" and ".deskbar" - see if that makes a difference.

Added later 52 min 38 s:

I'm unsure what's going on here, since it obviously is working on your end. I'm running CachyOS (An Arch derivative), so it should be the newest versions of Xfce/GTK/etc. I suppose I need to fire up a VM of another distro and see how it behaves there.

Maybe also try with the default Adwaita theme in case there is something in your custom theme that is conflicting.

So yes, just adding it to ~/.config/gtk-3.0/gtk.css made it work on Adwaita. However, it made it work on my themes, too.

As a test, I created a skeletal theme called "Testing" that consists of simply a single GTK3 gtk.css file containing a style to add a red border to #Xfce4PanelWindow. There should be absolutely nothing to conflict in this skeletal "theme", am I correct? Regardless, it doesn't work for this either:

However, adding the statement to ~/.gtk-3.0/gtk.css makes it work as expected:

I have no idea where the disconnect is here. Note that changing it to "#Xfce4PanelWindow .horizontal" in the theme's gtk.css makes it apply all weirdly like in my earlier examples, so the file is definitely being read.

Last edited by Sliver X (2025-10-08 04:11:13)

vm_x

Member

Registered: 2024-02-12

Posts: 42

Re: CSS/Taskbar Issues

Okay, this is pretty weird.

I googled around and found this:
https://www.reddit.com/r/xfce/comments/ … others_in/

Note the first reply:

GTK themes only apply for the inside of windows.

The panel and the window frame are XFCE components, (xfce4-panel and xfwm4), so they have their own separate theme.

So I'm thinking ... maybe the style gets correctly applied from gtk.css in your profile because it somehow has more permissions than the theme css file.

If this is true, your best bet would probably be to target ".xfce4-panel" and then remove the styles for its children, like this:

.xfce4-panel { border: 5px solid red }
.xfce4-panel .xfce4-panel { border: 0 }

It's a long shot but nothing better comes to mind for now.

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

No dice, unfortunately:

At the beginning of deciding to reach out for help, I was leaning heavily towards it either being an issue with my neophyte CSS abilities or a fundamental issue with how Xfce handles themes with my weird edge case... I'm starting to lean more towards it being the latter, now,

If that ultimately ends up being the case, I'll clean up the last bits of the theme using standard horizontal panels and just call it good at that point, I suppose. I don't really use vertical panels, but I wanted the option to be there for people who do.

Last edited by Sliver X (2025-10-08 12:04:22)

vm_x

Member

Registered: 2024-02-12

Posts: 42

Re: CSS/Taskbar Issues

Where can I download this version of your theme from the screenshots? I want to poke around some more.

Last edited by vm_x (2025-10-08 12:30:52)

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

I have it on Github, here:

https://github.com/SliverXReal/Redmond97-SE

I have a slightly newer version I was holding off for release until I figured out the vertical taskbar problem, but it's just minor cosmetic things that shouldn't matter for this (Calendar applet now matches, small spacing/border adjustments, etc).

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 12,280

Re: CSS/Taskbar Issues

I think what is happening here is that xfce4-panel itself has some embedded css in the code. The order of precedence for css is basically (1) gtk theme, (2) application-inline, (3) user overrides.

It would seem that putting it in your theme's css file is being overridden by inline css - which explains why when you put it in ~/.config/gtk-3.0/gtk.css (user override) it works.

---

Mark solved threads as [SOLVED] to make it easier for others to find solutions.
--- How To Ask For Help | FAQ | Developer Wiki  |  Community | Contribute ---

Sliver X

Member

Registered: 2025-10-06

Posts: 12

Re: CSS/Taskbar Issues

I think what is happening here is that xfce4-panel itself has some embedded css in the code. The order of precedence for css is basically (1) gtk theme, (2) application-inline, (3) user overrides.

It would seem that putting it in your theme's css file is being overridden by inline css - which explains why when you put it in ~/.config/gtk-3.0/gtk.css (user override) it works.

That would make sense why anything I tried in the theme for the edge border didn't work the way I was expecting it to: It at least makes me feel slightly less dumb, haha.

It's unfortunate it can't be done from within a theme itself, but I believe I can make a set of workarounds for vertical panels to make them mostly match the Win9x aesthetic of the horizontal ones from within it knowing this is a technical problem and nothing to do with the GTK3 theme itself now.

I didn't know about the border option in Xfce's panel settings being a thing until now either, and that alone partially alleviates the need for what I was doing here: I've been including xfce4-panel-profiles configs with the GTK themes that will now have that set and I'll mention how to do it manually in the readme.

Thank you two for taking the time to look into this with me.

Last edited by Sliver X (Yesterday 03:09:52)