~~NOTOC~~
{{ :xfce:xfce.panel.png?no link|}}
====== 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; }
Whisker Menu panel button.
#whiskermenu-button label {
color: lightblue;
font-weight: bold;
font-style: italic; }
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 */
//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; }
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; }
Notification Plugin panel button colours
#xfce4-notification-plugin {
background-color: lightblue;
color: black; }
Status Notifier Plugin
#sn-button {
background-color: lightblue; }
[[|Back to Top]]
----
[[:xfce:xfce4-panel:start:|Back to xfce4-panel main page]]