Xfce Wiki

Sub domains
 

Differences

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

Link to this comparison view

Next revision		Previous revision
xfce:xfce4-panel:4.14:theming [2019/08/19 10:52] – created kevinbowenxfce:xfce4-panel:4.14:theming [2019/08/25 03:03] (current) – [Plugin theming examples] making a minor correction emh_mark_i
Line 1: Line 1:
-====== Theming ======+====== XFCE 4.14 Panelbar Theming ======
  
-<note warning>This applies only to GTK 2 versions of Xfce Panel, and doesn't apply to GTK 3.</note>+----
  
-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 =====
  
-===== Classes =====+=== Classes: ===
  
-===== XfcePanelWindow ===== +    .xfce4-panel 
-The normal panel window.+    .tasklist
  
-<file txt .gtkrc-2.0> +=== ID's: ===
-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 +    #whiskermenu-button 
-  XfcePanelWindow::popdown-delay = 350+    #xfce4-notification-plugin 
 +    #xfce4-power-manager-plugin 
 +    #pulseaudio-button 
 +    #clock-button
  
-  # Size of autohide window in pixels +=== Elements ===
-  XfcePanelWindow::autohide-size = 3 +
-} +
-class "XfcePanelWindow" style "xfce-panel-window-style" +
-</file>+
  
-===== XfcePanelWindowHidden =====+    wnck-pager
  
-Class of the hidden panel window.+----
  
-===== XfcePanelWindowExternal =====+===== GTK3 Theme testing and debugging =====
  
-The class of the external window used for the 4.6 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.
  
-===== XfcePanelWindowWrapper =====+    mkdir -p  ~/.config/gtk-3.0
  
-The class of the window used for external plugins running in the wrapper application.+To see your modifications applied, you can reset the xfce4-panel process by typing the following command into a terminal:
  
-===== XfcePanelImage =====+    xfce4-panel -r
  
-Class of the images used on most of the panel plugins.+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:
  
-<file txt .gtkrc-2.0> +Kill the current xfce panel process: 
-style "xfce-panel-image-style" + 
-{ +    pkill xfce4-panel 
-  # 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 +Start the panel process with GtkInspector debugging enabled: 
-  # fuzzy launcher icons. + 
-  XfcePanelImage::force-gtk-icon-sizes = true +    GTK_DEBUG=interactive xfce4-panel 
-} + 
-class "XfcePanelImage" style "xfce-panel-image-style" +---- 
-</file>+ 
 +===== Plugin theming examples ===== 
 + 
 +Panelbar background color. 
 + 
 +    .xfce4-panel.background { 
 +      background-color: rgba(36, 36, 36, 0.8); } 
 + 
 +Tasklist toggle button background colour, text color, and border radius. 
 + 
 +    .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. 
 + 
 +    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> 
 + 
 +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>