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] – created nickxfce:xfce4-panel:theming [2024/03/14 07:38] (current) – [CSS Selectors] Update css ids gael
Line 1: Line 1:
-====== Theming ======+~~NOTOC~~ 
 +{{ :xfce:xfce.panel.png?no link|}} 
 +====== 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 +
-! 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.+
  
 +===== CSS Selectors =====
 +
 +=== Classes: ===
 +
 +    .xfce4-panel
 +    .panel
 +    .tasklist
 +
 +=== ID's: ===
 +
 +    #XfcePanelWindow
 +    #XfcePanelWindowHidden
 +    #XfcePanelWindowWrapper
 +    #xfce-panel-button
 +    #xfce-panel-toggle-button
 +
 +    /* 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
 +
 +    /* some external plugins */
 +    #whiskermenu-button
 +    #xfce4-notification-plugin
 +    #xfce4-power-manager-plugin
 +    #pulseaudio-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:
 +
 +Quit the current xfce panel process:
 +
 +    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: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]]