What's the best way to find CSS classes?

robby · 2019-12-23 23:52:44

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)

ToZ · 2019-12-24 01:02:26

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?

robby · 2019-12-24 02:15:36

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.

ToZ · 2019-12-24 03:10:45

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?

Xfce Forum

Sub domains

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

What's the best way to find CSS classes?

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

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

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

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

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

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

Board footer