Xfce Forum

clingonboy

Member

From: Italy - Vicenza

Registered: 2022-11-20

Posts: 7

Make pannel button transparent

hi, I'm playing with the css for the panel.
I try to make the buttons background that show open app transparent but i don't understand ho to use properly css properti.

https://imgur.com/a/L6t7ZRm

This is my css:

/* margine destro/sinistro per ogni bottone window-list */
.xfce4-panel .tasklist button {
    margin-left:  6px;
    margin-right: 6px;
}

/* launcher button: background & border fully transparent */
.xfce4-panel .launcher button {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

button.tasklist-button {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}

#tasklist-button {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}

#xfce4-panel-button,
.xfce4-panel-button,
#tasklist-wrapper {
    background-color: transparent;
    background-image: none;
}

I looking for on the web what is wrong on it but I was not able to find a way.

Somebody have some suggestion?

scm

Member

Registered: 2026-01-06

Posts: 4

Re: Make pannel button transparent

hi, I'm playing with the css for the panel.
I try to make the buttons background that show open app transparent but i don't understand ho to use properly css properti.

https://imgur.com/a/L6t7ZRm

This is my css:

/* margine destro/sinistro per ogni bottone window-list */
.xfce4-panel .tasklist button {
    margin-left:  6px;
    margin-right: 6px;
}

/* launcher button: background & border fully transparent */
.xfce4-panel .launcher button {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

button.tasklist-button {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}

#tasklist-button {
    background-color: transparent;
    background-image: none;
    border-color: transparent;
}

#xfce4-panel-button,
.xfce4-panel-button,
#tasklist-wrapper {
    background-color: transparent;
    background-image: none;
}

I looking for on the web what is wrong on it but I was not able to find a way.

Somebody have some suggestion?

As much as I dislike AI. I used Google AI to build my Conky config file and was happy with the results
To make changes I would ask first then put the css code in, and it will usually update the code for you. copy and paste it into your file and retry.

I pasted your post into google and this is the answer:

It looks like you are trying to customize the appearance of buttons within the Xfce desktop environment's panel using CSS, likely through a Gtk theme or configuration file. The challenge with styling Xfce panels is that they rely on GTK themes (specifically GTK 2 or GTK 3, depending on your version), and the exact CSS selectors needed can be theme-dependent and complex.

Your current CSS attempts many common approaches, but a few key issues might be preventing the desired transparency:
1. Specificity and State Pseudo-classes
The panel buttons often have different appearances depending on their state (e.g., normal, hovered, active, or currently open). Your rules target the normal state, but other states might override them.

    Add :hover, :active, and :checked pseudo-classes to ensure consistency.

2. Targeting the Correct Widget Name
Xfce's window list is officially called "TaskList". The selectors button.tasklist-button and #tasklist-button in your CSS might not be specific enough or might be incorrect for how your specific GTK theme names the elements.

    Use more specific selectors that match the Xfce panel's structure.

3. Using rgba() for Full Transparency
While transparent should work, sometimes specifying background-color: rgba(0, 0, 0, 0) is a robust alternative.
Revised CSS
Try adding these updated rules, which combine your original efforts with better specificity and state handling:
css

/* Ensure all tasklist button states are transparent */
.xfce4-panel .tasklist button,
.xfce4-panel .tasklist button:hover,
.xfce4-panel .tasklist button:active,
.xfce4-panel .tasklist button:checked,
.xfce4-panel .tasklist button.flat {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    /* Optional: Ensure text/icons are visible if needed */
    /* color: inherit; */
}

/* Specific GTK class for tasklist items */
.xfce4-panel GtkButton.tasklist-button,
.xfce4-panel GtkButton.tasklist-button:hover,
.xfce4-panel GtkButton.tasklist-button:active {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
}

/* Existing rules (keep these as they might be necessary) */
.xfce4-panel .tasklist button {
    margin-left:  6px;
    margin-right: 6px;
}

.xfce4-panel .launcher button {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

#tasklist-wrapper {
    background-color: transparent;
    background-image: none;
}

How to Apply the Changes
You need to apply this CSS to your GTK theme:

    Locate your GTK configuration file. For GTK 3 themes used by Xfce, this is usually ~/.config/gtk-3.0/gtk.css. If the file doesn't exist, create it.
    Paste the revised CSS into that file.
    Restart the Xfce panel for the changes to take effect. You can usually do this by running xfce4-panel -r in the terminal, or logging out and logging back in.

The use of specific class names like GtkButton and addressing the different button states (:hover, :active) generally solves most transparency issues within Xfce theming.