• CSS Selectors
• GTK3 Theme testing and debugging
• Panelbar theming examples
• Plugin theming examples

  .xfce4-panel
  .panel
  .tasklist

  #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

  wnck-pager

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 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

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