Xfce Wiki

Sub domains
 

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
xfce:xfce4-panel:theming [2019/04/11 15:17] – gtk3 warning blueberrybrowniexfce:xfce4-panel:theming [2023/08/26 11:43] – [Panelbar theming examples] See https://gitlab.xfce.org/xfce/xfce4-panel/-/issues/785 gael
Line 1: Line 1:
-====== Theming ======+~~NOTOC~~ 
 +{{ :xfce:xfce.panel.png?no link|}} 
 +====== xfce4-panel - Panelbar Theming ======
  
-<note warning>This applies only to GTK 2 versions of Xfce Panel, and doesn't apply to GTK 3.</note>+  * **[[#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]]**
  
-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.+----
  
-====== Classes ======+===== CSS Selectors =====
  
-===== XfcePanelWindow ===== +=== Classes: ===
-The normal panel window.+
  
-<file txt .gtkrc-2.0> +    .xfce4-panel 
-style "xfce-panel-window-style" +    .panel 
-{ +    .tasklist
-  # 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 +=== ID's: ===
-  XfcePanelWindow::popdown-delay = 350+
  
-  # Size of autohide window in pixels +    #XfcePanelWindow 
-  XfcePanelWindow::autohide-size = 3 +    #XfcePanelWindowHidden 
-} +    #whiskermenu-button 
-class "XfcePanelWindow" style "xfce-panel-window-style" +    #xfce4-notification-plugin 
-</file>+    #xfce4-power-manager-plugin 
 +    #pulseaudio-button 
 +    #clock-button 
 +    #indicator-button 
 +    #sn-button 
 +    #showdesktop-button 
 +    
  
-===== XfcePanelWindowHidden =====+=== Elements ===
  
-Class of the hidden panel window.+    wnck-pager
  
-===== XfcePanelWindowExternal =====+----
  
-The class of the external window used for the 4.6 plugins.+===== GTK3 Theme testing and debugging =====
  
-===== XfcePanelWindowWrapper =====+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.
  
-The class of the window used for external plugins running in the wrapper application.+    mkdir -p  ~/.config/gtk-3.0
  
-===== XfcePanelImage =====+To see your modifications applied, you can reset the xfce4-panel process by typing the following command into a terminal:
  
-Class of the images used on most of the panel plugins.+    xfce4-panel -r
  
-<file txt .gtkrc-2.0> +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: 
-style "xfce-panel-image-style" + 
-{ +Quit the current xfce panel process: 
-  # 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 -q 
-  # fuzzy launcher icons. + 
-  XfcePanelImage::force-gtk-icon-sizes = true +Start the panel process with GtkInspector debugging enabled (Note: This will load an inspector window for each individual panel plugin): 
-} + 
-class "XfcePanelImage" style "xfce-panel-image-style" +    GTK_DEBUG=interactive xfce4-panel 
-</file>+ 
 +[[|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.14:tasklist_button.png}}</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.14:whiskermenu_button.png}}</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}}</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.14:workspace_switcher.png}}</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.14:clock.png}}</figure> 
 + 
 +Notification Plugin panel button colours 
 + 
 +    #xfce4-notification-plugin { 
 +      background-color: lightblue; 
 +      color: black; } 
 + 
 +<figure "Notification Plugin">{{:xfce:xfce4-panel:4.14:notification_plugin.png}}</figure> 
 + 
 +Status Notifier Plugin 
 + 
 +    #sn-button { 
 +      background-color: lightblue; } 
 + 
 +<figure "Status Notifier">{{:xfce:xfce4-panel:4.14:status_notifier_plugin.png}}</figure> 
 + 
 +[[|Back to Top]] 
 +---- 
 +[[:xfce:xfce4-panel:start:|Back to xfce4-panel main page]]