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:theming [2012/01/04 10:09]
nick created
xfce:xfce4-panel:theming [2019/08/25 04:28] (current)
emh_mark_i Copying over changes made from 4.14 branch
Line 1: Line 1:
-====== Theming ======+====== ​XFCE 4.14 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.+----
  
-===== Classes ​===== +===== CSS Selectors ​=====
-? XfcePanelWindow +
-! The normal panel window. +
-? XfcePanelWindowHidden +
-! Class of the hidden panel window. +
-?​XfcePanelWindowExternal +
-! The class of the external window used for the 4.6 plugins. +
-? XfcePanelWindowWrapper +
-! The class of the window used for external plugins running in the wrapper application.+
  
 +=== Classes: ===
 +
 +    .xfce4-panel
 +    .tasklist
 +
 +=== ID's: ===
 +
 +    #​whiskermenu-button
 +    #​xfce4-notification-plugin
 +    #​xfce4-power-manager-plugin
 +    #​pulseaudio-button
 +    #​clock-button
 +
 +=== Elements ===
 +
 +    wnck-pager
 +
 +----
 +
 +===== GTK3 Theme testing and debugging =====
 +
 +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.
 +
 +    mkdir -p  ~/​.config/​gtk-3.0
 +
 +To see your modifications applied, you can reset the xfce4-panel process by typing the following command into a terminal:
 +
 +    xfce4-panel -r
 +
 +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:
 +
 +    pkill xfce4-panel
 +
 +Start the panel process with GtkInspector debugging enabled:
 +
 +    GTK_DEBUG=interactive xfce4-panel
 +
 +----
 +
 +===== 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>​