~~NOTOC~~
{{ :xfce:xfce4-panel.png?nolink|}}
====== xfce4-panel - Panelbar Theming ======

  * **[[#CSS Selectors|CSS Selectors]]**
  * **[[#GTK3 Theme testing and debugging|GTK3 Theme testing and debugging]]**
  * **[[#Panelbar theming examples|Panelbar theming examples]]**
  * **[[#Plugin theming examples|Plugin theming examples]]**

----

===== 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 [[https://wiki.gnome.org/action/show/Projects/GTK/Inspector|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; }

<figure "Panelbar Tasklist Button">
{{:xfce:xfce4-panel:4.18:tasklist_button.png|Panelbar Tasklist Button}}
</figure>


Whisker Menu panel button.

    #whiskermenu-button label {
      color: lightblue;
      font-weight: bold;
      font-style: italic; }


<figure "Whisker Menu Panel Button">
{{:xfce:xfce4-panel:4.18:whiskermenu_button.png|Whisker Menu Panel Button}}
</figure>


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

<figure "Pulseaudio menu MPRIS buttons">{{:xfce:xfce4-panel:4.14:pulseaudio_menu.png|Pulseaudio menu MPRIS buttons}}</figure>


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

<figure "Panelbar Workspace Switcher">
{{:xfce:xfce4-panel:4.18:workspace_switcher.png|Panelbar Workspace Switcher}}
</figure>

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

<figure "Panelbar Clock">
{{:xfce:xfce4-panel:4.18:clock.png|Panelbar Clock}}
</figure>

Notification Plugin panel button colours

    #xfce4-notification-plugin {
      background-color: lightblue;
      color: black; }

<figure "Notification Plugin">
{{:xfce:xfce4-panel:4.18:notification_plugin.png|Notification Plugin}}
</figure>

Status Notifier Plugin

    #sn-button {
      background-color: lightblue; }

<figure "Status Notifier">
{{:xfce:xfce4-panel:4.18:status_notifier_plugin.png|Status Notifier}}
</figure>

[[|Back to Top]]
----
[[:xfce:xfce4-panel:4.18:start:|Return to xfce4-panel 4.18 Main Documentation Page]]