Xfce Forum

kanna9

Member

Registered: 2022-03-14

Posts: 5

Panel's workspace switcher css is breaking the active window button

First of all I'd like to mention that I don't know css, I'm just learning it by editing around themes to suit my needs, so I might be doing something wrong.
I'm currently using a theme that creates a colored line at the bottom of the active window in the panel.

I'd like to put that line at the bottom of the workspace switcher too. I've looked in the theme's css file and this is the section related to that:

.xfce4-panel.background .tasklist button:checked {
	border-image: image(#EDC13E) 0 0 2/0 0 2px;
}

I've edited the /.config/gtk-3.0/gtk.css file and added that line to my previous configuration of the workspace switcher:

.xfce4-panel #pager-4 .horizontal {
	border-image: image(#EDC13E) 0 0 2/0 0 2px;
	background-color: alpha(#4B4640, 0.76);
	padding-bottom: 2px;
}

This puts the line as intended indeed, but for some reason the line disappears from the active window:

Furthermore, by adding that line the xfce4-panel process takes around 4% of the CPU usage, which is abnormal as it usually takes 0.X%.

Can anyone help?
Thanks!

Last edited by kanna9 (2022-03-18 12:16:54)

KBar

Member

Registered: 2021-11-05

Posts: 689

Re: Panel's workspace switcher css is breaking the active window button

Try it without the .xfce4-panel .horizontal class selectors.

Same thing for the tasklist. Use its ID instead, i.e. #tasklist-N, where N is the number shown in Panel Preferences > Items > Internal name.

---

Remember to edit the subject of your topic to include the [SOLVED] tag once you're satisfied with the answers or have found a solution (in which case, don't forget to share it as well), so that other members of the community can quickly refer to it and save their time. Pretty please!

kanna9

Member

Registered: 2022-03-14

Posts: 5

Re: Panel's workspace switcher css is breaking the active window button

You're right. By actually removing .xfce4-panel .horizontal and using "button" as stated here the problem is gone.

#pager-4 button { 
	border-image: image(#EDC13E) 0 0 2/0 0 2px; 
	padding-bottom: 3px;
	background-color: alpha(#4B4640, 0.76);
}

Thanks a lot : )