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 (Note: This will load an inspector window for each individual panel plugin):
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); }
Make autohide panelbar transparent.
.xfce4-panel#XfcePanelWindowHidden { background: rgba(0,0,0,0); }
Plugin theming examples
Tasklist toggle button background colour, text color, and border radius.
.xfce4-panel .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 (Appearance: miniature view).
wnck-pager:selected { background-color: lightblue; } wnck-pager:hover { background-color: gray; }
Panelbar Workspace Switcher |
---|
Underline active Workspace switcher button (Appearance: buttons)
.xfce4-panel widget grid button.flat.toggle:hover { font-family: 'Sans Bold'; font-size: 16px; } .xfce4-panel widget grid button.flat.toggle:checked { font-family: 'Sans Bold'; font-size: 16px; border-bottom: 5px solid purple; padding: 10px; }
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 |
---|