Xfce Forum

espas

Member

Registered: 2021-09-29

Posts: 31

[SOLVED] Need help theming the panel (Window Buttons) with gtk.css

I'm using a theme that uses a dash to to indicate what is active on the panel, like this:

but I want Window Buttons to be like this:

with some padding between them and a different color for the active, non-active and minimized windows and no background color, I just want to see the panel color in the background. Does anyone knows how I can make Window Buttons be like this while the rest of the panel keeps using the dash? I do not have any experience with css, I just know how to change colors.

Last edited by espas (2022-03-27 23:37:33)

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,485

Re: [SOLVED] Need help theming the panel (Window Buttons) with gtk.css

How about something like this:

.tasklist button {border-width: 5px; margin-left: 5px }
.tasklist button {border-color: blue; border-radius: 15px; }
.tasklist button:checked {border-color: cyan; border-radius: 15px; }
.tasklist button:hover {border-color: yellow; border-radius: 15px; }

...you may need to change the numeric values and colors to suit. If you don't like the yellow hover color, just delete that line.

---

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 ---

espas

Member

Registered: 2021-09-29

Posts: 31

Re: [SOLVED] Need help theming the panel (Window Buttons) with gtk.css

How about something like this:

.tasklist button {border-width: 5px; margin-left: 5px }
.tasklist button {border-color: blue; border-radius: 15px; }
.tasklist button:checked {border-color: cyan; border-radius: 15px; }
.tasklist button:hover {border-color: yellow; border-radius: 15px; }

...you may need to change the numeric values and colors to suit. If you don't like the yellow hover color, just delete that line.

https://i.ibb.co/RbKww6Y/tasklist-cropped.png

I just tried it and something is off.

I added these to .config/gtk-3.0/gtk.css. I believe the theme's gtk.css is interfering. The colors are the same as my theme's but I don't mind the only problem with colors is that I'm not getting a border for apps that are minimized or not focused.

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,485

Re: [SOLVED] Need help theming the panel (Window Buttons) with gtk.css

Which theme are you using?

Edit: Looks like adapta. It has the border-style set to none. Try the following instead:

.tasklist button {border-style: solid; border-width: 5px; margin-left: 5px }
.tasklist button {border-color: blue; border-radius: 15px; }
.tasklist button:checked {box-shadow: none; border-color: cyan; border-radius: 15px; }
.tasklist button:hover {border-color: yellow; border-radius: 15px; }

Last edited by ToZ (2022-03-27 11:02:55)

---

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 ---

espas

Member

Registered: 2021-09-29

Posts: 31

Re: [SOLVED] Need help theming the panel (Window Buttons) with gtk.css

Which theme are you using?

Edit: Looks like adapta. It has the border-style set to none. Try the following instead:

.tasklist button {border-style: solid; border-width: 5px; margin-left: 5px }
.tasklist button {border-color: blue; border-radius: 15px; }
.tasklist button:checked {box-shadow: none; border-color: cyan; border-radius: 15px; }
.tasklist button:hover {border-color: yellow; border-radius: 15px; }

This one worked perfectly. Thanks!