Differences

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

--- xfce:xfce4-panel:theming [2013/01/10 10:56] – nick
+++ xfce:xfce4-panel:theming [2024/12/11 11:29] (current) – kevinbowen
@@ Line 1: / Line 1: @@
-====== Theming ======
+~~NOTOC~~
+{{ :xfce:xfce4-panel.png?nolink|}}
+====== xfce4-panel - Panelbar Theming ======
-Besize the appearance settings in the panel preferences, there are also a couple of classes you can style through the ''.gtkrc-2.0'' file. Below we'll summarize the global classes. Some plugins also have gtkrc style properties for specific settings, you can find those in the manual page of the specific plugin.
+  * **[[#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]]**
-====== Classes ======
+----
-===== XfcePanelWindow =====
+===== CSS Selectors =====
-The normal panel window.
-<file txt .gtkrc-2.0>
+=== Classes: ===
-style "xfce-panel-window-style"
-{
-  # Time in miliseconds before the panel will unhide on an enter event
-  XfcePanelWindow::popup-delay = 225
-  # Time in miliseconds before the panel will hide on a leave event
+    .xfce4-panel
-  XfcePanelWindow::popdown-delay = 350
+    .panel
+    .tasklist
-  # Size of autohide window in pixels
+=== ID's: ===
-  XfcePanelWindow::autohide-size = 3
-}
-class "XfcePanelWindow" style "xfce-panel-window-style"
-</file>
-===== XfcePanelWindowHidden =====
+    #XfcePanelWindow
+    #XfcePanelWindowHidden
+    #XfcePanelWindowWrapper
+    #xfce-panel-button
+    #xfce-panel-toggle-button
-Class of the hidden panel window.
+    /* 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
-===== XfcePanelWindowExternal =====
+    /* some external plugins */
+    #whiskermenu-button
+    #xfce4-notification-plugin
+    #xfce4-power-manager-plugin
+    #pulseaudio-button
-The class of the external window used for the 4.6 plugins.
+=== Elements ===
-===== XfcePanelWindowWrapper =====
+    wnck-pager
-The class of the window used for external plugins running in the wrapper application.
+----
-===== XfcePanelImage =====
+===== GTK3 Theme testing and debugging =====
-Class of the images used on most of the panel plugins.
+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.
-<file txt .gtkrc-2.0>
+    mkdir -p  ~/.config/gtk-3.0
-style "xfce-panel-image-style"
-{
+To see your modifications applied, you can reset the xfce4-panel process by typing the following command into a terminal:
-  # Fix the panel images to a default gtk icon size, is only works for
-  # images below 32 pixels. You can for example use this when you have
+    xfce4-panel -r
-  # fuzzy launcher icons.
-  XfcePanelImage::force-gtk-icon-sizes = true
+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:
-}
-class "XfcePanelImage" style "xfce-panel-image-style"
+Quit the current xfce panel process:
-</file>
+    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: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: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: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: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: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:|Return to xfce4-panel Main Documentation Page]]

Xfce Wiki

Sub domains

Differences

Xfce Wiki

Sub domains

Differences

Tools