Xfce Forum

dm999

Member

Registered: 2021-12-22

Posts: 18

[Solved] Style the active Window Button on Panel

Another gtk.css request -

Can anyone help with the necessary css to enable the active Window Button on the Panel to have a coloured line along the bottom, like that used in the Adapta theme? -

Thanks, DM.

Last edited by dm999 (2022-04-11 20:01:33)

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,485

Re: [Solved] Style the active Window Button on Panel

The windows button style class is ".tasklist". The tasklist is made up of a number of "buttons". The active state for a button uses the peudo-class "checked". More info here.

Each button allows for a border-color and border-width property that can be further defined by location (top, bottom, left, right). So putting it all together:

.tasklist button:checked { border-bottom-color: blue; border-bottom-width: 3px; }

Note: You may need to override a few other properties depending on the theme you are using, but the above will probably work.

---

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

dm999

Member

Registered: 2021-12-22

Posts: 18

Re: [Solved] Style the active Window Button on Panel

Thanks ToZ, I was able to get the above to work with some themes, but not with any of the Mint themes. What else might I need to over-ride if I were to continue to use a Mint theme?

I've bookmarked that gtk link, lots to learn yet!

Cheers, DM.

KBar

Member

Registered: 2021-11-05

Posts: 689

Re: [Solved] Style the active Window Button on Panel

Which themes are you talking about? Without knowing that, I'd suggest trying the following selectors:

.xfce4-panel.background .tasklist button:active, .xfce4-panel.background .tasklist button:checked

---

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!

dm999

Member

Registered: 2021-12-22

Posts: 18

Re: [Solved] Style the active Window Button on Panel

Hi KBar, thanks, I'm using the Mint-Y theme, the additions to gtk.css are -

.xfce4-panel.background .tasklist button { 
color: shade(#fff, 0.8);
background-color: transparent;
}
.xfce4-panel.background .tasklist button:active, .xfce4-panel.background .tasklist button:checked {
color: #fff; 
border-bottom-color: red; border-bottom-width: 3px;
}

This doesn't add the bottom border when using Mint-Y but it does if I select Adwaita, for example.

I'm using Linux Mint Xfce, 20.3.

KBar

Member

Registered: 2021-11-05

Posts: 689

Re: [Solved] Style the active Window Button on Panel

Can you share a screenshot of Mint-Y and Adwaita?

---

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!

ToZ

Administrator

From: Canada

Registered: 2011-06-02

Posts: 11,485

Re: [Solved] Style the active Window Button on Panel

The Mint themes specify "border: none" so no border is visible. You need to add a "border-bottom-style: solid" to make it appear.

---

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

KBar

Member

Registered: 2021-11-05

Posts: 689

Re: [Solved] Style the active Window Button on Panel

Nice catch, ToZ!

---

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!

dm999

Member

Registered: 2021-12-22

Posts: 18

Re: [Solved] Style the active Window Button on Panel

The Mint themes specify "border: none" so no border is visible. You need to add a "border-bottom-style: solid" to make it appear.

Aha, that nailed it, thank you ToZ, and thanks to KBar as well.

.xfce4-panel.background .tasklist button { 
color: shade(#fff, 0.8);
background-color: transparent;
}

.xfce4-panel.background .tasklist button:active, .xfce4-panel.background .tasklist button:checked {
color: #fff; border-bottom-style: solid; border-bottom-color: blue; border-bottom-width: 3px;
}