Xfce Forum

Sub domains
 

You are not logged in.

#1 2019-12-23 23:52:44

robby
Member
Registered: 2019-10-23
Posts: 3

What's the best way to find CSS classes?

What's the best way to find the right CSS classes to tweak the xfce4-panel? Doesn't seem like every CSS class is listed on this page. https://docs.xfce.org/xfce/xfce4-panel/theming I tried using the GtkInspector, but either that isn't working either or I don't know how to use it correctly.

xfdesktop version 4.14.1
running on Xfce 4.14
Built with GTK+ 3.24.10
linked with GTK+ 3.24.11

Last edited by robby (2019-12-23 23:52:58)

Offline

#2 2019-12-24 01:02:26

ToZ
Moderator
From: Canada
Registered: 2011-06-02
Posts: 6,236

Re: What's the best way to find CSS classes?

Hello and welcome.

GTK Inspector is the best way. For it to work with the panel, you need to quit the panel first. Have a read through this post for a brief how to on how to use it.

Another approach is to view existing code. Look at Greybird's gtk-3.0/gtk-contained.css file ans search out xfce components.

Which classes/components are you looking to identify?

Offline

#3 2019-12-24 02:15:36

robby
Member
Registered: 2019-10-23
Posts: 3

Re: What's the best way to find CSS classes?

ToZ wrote:

Hello and welcome.

GTK Inspector is the best way. For it to work with the panel, you need to quit the panel first. Have a read through this post for a brief how to on how to use it.

Another approach is to view existing code. Look at Greybird's gtk-3.0/gtk-contained.css file ans search out xfce components.

Which classes/components are you looking to identify?

For example, the xfce-weather-plugin's background is black, and not transparent like the rest of the panel. I would like to find the css class to change in order to make it match the rest of the panel. Also, when I hover over an application, the background changes to a blue color, I would like to change that also.

Offline

#4 2019-12-24 03:10:45

ToZ
Moderator
From: Canada
Registered: 2011-06-02
Posts: 6,236

Re: What's the best way to find CSS classes?

If you want all of the plugins to have a transparent background, use the following:

/* transparent xfce4-panel */
.xfce4-panel.background button,
.xfce4-panel.background button.flat,
.xfce4-panel.background button:active, 
.xfce4-panel.background button:hover, 
.xfce4-panel.background button:active:hover, 
.xfce4-panel.background .tasklist button, 
.xfce4-panel.background .tasklist button.flat,
.xfce4-panel.background .tasklist button:active,
.xfce4-panel.background .tasklist button:hover, 
.xfce4-panel.background .tasklist button:active:hover
{
	border-color: transparent;
	background-color: transparent;
	background-image: none;
	color: #fcfcfc;
	box-shadow: none;
	transition: none; 
}

This (heavily borrowed from the Greybird code) sets the border and background colors to transparent, removes any background images that may be used by theme, sets the foreground color to #fcfcfc (greyish-white) and removes shadows and transitions. It affects any plugins that are buttons (most) and the window buttons tasklist items.

However, setting the panel background to Solid Color and using a transparent color should also cover the weather plugin. Does your distro use the gtk3 version of the weather plugin?

Offline

Board footer

Powered by FluxBB