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
Next revisionBoth sides next revision
xfce:xfce4-panel:theming [2019/04/12 22:38] – [Classes] blueberrybrowniexfce:xfce4-panel:theming [2019/08/24 04:33] – [Plugin theming examples] 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 +
-+
-class "XfcePanelWindow" style "xfce-panel-window-style" +
-</file>+
  
-===== XfcePanelWindowHidden =====+    wnck-pager
  
-Class of the hidden panel window.+----
  
-===== XfcePanelWindowExternal =====+===== Plugin theming examples =====
  
-The class of the external window used for the 4.6 plugins.+Panelbar background color.
  
-===== XfcePanelWindowWrapper =====+    .xfce4-panel.background { 
 +      background-color: rgba(36, 36, 36, 0.8); }
  
-The class of the window used for external plugins running in the wrapper application.+Tasklist toggle button background colour, text colour, and border radius.
  
-===== XfcePanelImage =====+    .tasklist .toggle { 
 +      background-color: lightblue; 
 +      color: black; 
 +      border-radius: 3px; }
  
-Class of the images used on most of the panel plugins.+<figure "Panelbar tasklist button">{{:xfce:xfce4-panel:4.14:tasklist_button.png}}</figure>
  
-<file txt .gtkrc-2.0> + 
-style "xfce-panel-image-style" +Whisker Menu panel button. 
-+ 
-  # Fix the panel images to default gtk icon sizeis only works for +    #whiskermenu-button label { 
-  # images below 32 pixelsYou can for example use this when you have +      color: lightblue; 
-  # fuzzy launcher icons+      font-weight: bold; 
-  XfcePanelImage::force-gtk-icon-sizes = true +      font-style: italic; } 
-+ 
-class "XfcePanelImage" style "xfce-panel-image-style" + 
-</file>+<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 scaletrough, switch, and slider.// 
 + 
 +Workspace switcher colours for selected and hover states
 + 
 +    wnck-pager:selected { 
 +      background-colorlightblue; } 
 +    wnck-pager:hover { 
 +      background-color: gray; 
 + 
 +<figure "Panelbar workspace switcher">{{:xfce:xfce4-panel:4.14:workspace_switcher.png}}</figure>