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
Next revisionBoth sides next revision
xfce:xfce4-panel:theming [2012/01/04 10:09] – created nickxfce:xfce4-panel:theming [2019/08/23 20:42] – kevinbowen
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
 +
 +----
 +
 +===== 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 cololur 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 active 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>