Xfce Wiki

Sub domains

xfce4-panel - Panelbar Theming

CSS Selectors




  /* internal plugins */
  /* some external plugins */



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

Back To Top

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); }

Back To Top

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

Back to Top

Back to xfce4-panel main page