Xfce Forum

Sub domains
 

You are not logged in.

#1 2022-01-23 17:20:48

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

adapta.png

Thanks, DM.

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

Offline

#2 2022-01-23 18:51:33

ToZ
Administrator
From: Canada
Registered: 2011-06-02
Posts: 10,948

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

Offline

#3 2022-01-23 19:54:57

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.

Offline

#4 2022-01-23 20:21:49

KBar
Moderator
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! tongue

Offline

#5 2022-01-23 20:35:04

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.

Offline

#6 2022-01-23 20:45:09

KBar
Moderator
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! tongue

Offline

#7 2022-01-23 20:48:10

ToZ
Administrator
From: Canada
Registered: 2011-06-02
Posts: 10,948

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

Offline

#8 2022-01-23 20:51:44

KBar
Moderator
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! tongue

Offline

#9 2022-01-23 20:56:36

dm999
Member
Registered: 2021-12-22
Posts: 18

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

ToZ wrote:

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

Offline

Board footer

Powered by FluxBB