Differences

This shows you the differences between two versions of the page.

--- xfce:xfce4-panel:theming [2019/11/30 22:51] – added icon and bottom of page navigation kevinbowen
+++ xfce:xfce4-panel:theming [2024/12/11 11:29] (current) – kevinbowen
@@ Line 1: / Line 1: @@
-{{ :xfce:xfce4-panel:xfce4-panel.png?nolink|}}
+~~NOTOC~~
-====== XFCE 4.14 Panelbar Theming ======
+{{ :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]]**
 ----
@@ Line 9: / Line 15: @@
     .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
-    #clock-button
 === Elements ===
@@ Line 37: / Line 63: @@
 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:
-Kill the current xfce panel process:
+Quit the current xfce panel process:
-    pkill xfce4-panel
+    xfce4-panel -q
-Start the panel process with GtkInspector debugging enabled:
+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]]
 ----
-===== Plugin theming examples =====
+===== Panelbar theming examples =====
 Panelbar background color.
-    .xfce4-panel.background {
+    .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.
-    .tasklist .toggle {
+    .xfce4-panel .tasklist .toggle {
       background-color: lightblue;
       color: black;
       border-radius: 3px; }
-<figure "Panelbar tasklist button">{{:xfce:xfce4-panel:4.14:tasklist_button.png}}</figure>
+<figure "Panelbar Tasklist Button">
+{{:xfce:xfce4-panel:tasklist_button.png|Panelbar Tasklist Button}}
+</figure>
@@ Line 72: / Line 122: @@
-<figure "Whisker Menu panel button">{{:xfce:xfce4-panel:4.14:whiskermenu_button.png}}</figure>
+<figure "Whisker Menu Panel Button">
+{{:xfce:xfce4-panel:whiskermenu_button.png|Whisker Menu Panel Button}}
+</figure>
@@ Line 81: / Line 133: @@
       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}}</figure>
+<figure "Pulseaudio Menu MPRIS Buttons">
+{{:xfce:xfce4-panel: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.
+Workspace switcher colours for selected and hover states (Appearance: miniature view).
     wnck-pager:selected {
@@ Line 93: / Line 147: @@
       background-color: gray; }
-<figure "Panelbar workspace switcher">{{:xfce:xfce4-panel:4.14:workspace_switcher.png}}</figure>
+<figure "Panelbar Workspace Switcher">
+{{:xfce:xfce4-panel: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:
@@ Line 102: / Line 171: @@
       background-color: lightblue; }
-<figure "Panelbar Clock">{{:xfce:xfce4-panel:4.14:clock.png}}</figure>
+<figure "Panelbar Clock">
+{{:xfce:xfce4-panel:clock.png|Panelbar Clock}}
+</figure>
+Notification Plugin panel button colours
+    #xfce4-notification-plugin {
+      background-color: lightblue;
+      color: black; }
+<figure "Notification Plugin">
+{{:xfce:xfce4-panel:notification_plugin.png|Notification Plugin}}
+</figure>
+Status Notifier Plugin
+    #sn-button {
+      background-color: lightblue; }
+<figure "Status Notifier">
+{{:xfce:xfce4-panel:status_notifier_plugin.png|Status Notifier}}
+</figure>
 [[|Back to Top]]
 ----
-[[:xfce:xfce4-panel:start:|Back to xfce4-panel main page]]
+[[:xfce:xfce4-panel:start:|Return to xfce4-panel Main Documentation Page]]

Xfce Wiki

Sub domains

Differences

Xfce Wiki

Sub domains

Differences

Tools