XFCE 4.14 Panelbar Theming

---

  .xfce4-panel
  .tasklist

  #whiskermenu-button
  #xfce4-notification-plugin
  #xfce4-power-manager-plugin
  #pulseaudio-button
  #clock-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:

Kill the current xfce panel process:

  pkill xfce4-panel

Start the panel process with GtkInspector debugging enabled:

  GTK_DEBUG=interactive xfce4-panel

---

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