xfce4-panel - Panelbar Theming
CSS Selectors
Classes:
.xfce4-panel .panel .tasklist
ID's:
#XfcePanelWindow #XfcePanelWindowHidden #XfcePanelWindowWrapper #xfce-panel-button #xfce-panel-toggle-button
/* internal plugins */ #actions-button #applicationmenu-button #clock-button #directorymenu-button #launcher-button #launcher-arrow #showdesktop-button #sn-button #sn-button-box #panel-tasklist-arrow #windowmenu-button
/* some external plugins */ #whiskermenu-button #xfce4-notification-plugin #xfce4-power-manager-plugin #pulseaudio-button
Elements
wnck-pager
GTK3 Theme testing and debugging
For testing, you can make modifications in the override file located at ~/.config/gtk-3.0/gtk.css. If the directory path doesn't exist, then you will have to create it.
mkdir -p ~/.config/gtk-3.0
To see your modifications applied, you can reset the xfce4-panel process by typing the following command into a terminal:
xfce4-panel -r
For debugging, you can use the GtkInspector tool from GNOME. To inspect the XFCE panelbar and its plugins, you can perform the following:
Quit the current xfce panel process:
xfce4-panel -q
Start the panel process with GtkInspector debugging enabled:
GTK_DEBUG=interactive xfce4-panel
Panelbar theming examples
Panelbar background color.
.xfce4-panel .background {
background-color: rgba(36, 36, 36, 0.8); }
Panelbar vertical styling.
.xfce4-panel .vertical .background {
background-color: rgba(219, 219, 219, 0.8); }
Panelbar horizontal styling.
.xfce4-panel .horizontal .background {
background-color: rgba(36, 36, 36, 0.8); }
Plugin theming examples
Panelbar background color.
.xfce4-panel.background {
background-color: rgba(36, 36, 36, 0.8); }
Tasklist toggle button background colour, text color, and border radius.
.tasklist .toggle {
background-color: lightblue;
color: black;
border-radius: 3px; }
| Panelbar tasklist button |
|---|
 |
Whisker Menu panel button.
#whiskermenu-button label {
color: lightblue;
font-weight: bold;
font-style: italic; }
| Whisker Menu panel button |
|---|
 |
Pulseaudio menu mpris buttons.
#pulseaudio-button menu .linked button {
color: lightblue; /* This will apply a colour to the mpris button icons */
border-color: gray; } /* This will apply a colour to the mpris button border */
| Pulseaudio menu MPRIS buttons |
|---|
 |
The pulseaudio menu contains common GTK widgets such as a scale, trough, switch, and slider.
Workspace switcher colours for selected and hover states.
wnck-pager:selected {
background-color: lightblue; }
wnck-pager:hover {
background-color: gray; }
| Panelbar workspace switcher |
|---|
 |
Clock colours and font style:
#clock-button {
color: black;
font-style: italic;
background-color: lightblue; }
| Panelbar Clock |
|---|
 |
Notification Plugin panel button colours
#xfce4-notification-plugin {
background-color: lightblue;
color: black; }
| Notification Plugin |
|---|
 |
Status Notifier Plugin
#sn-button {
background-color: lightblue; }
| Status Notifier |
|---|
 |