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
xfce:xfce4-panel:theming [2019/12/09 07:25] – kevinbowenxfce:xfce4-panel:theming [2024/12/11 11:29] (current) – kevinbowen
Line 1: Line 1:
-{{ :xfce:xfce4-panel:xfce4-panel.png?nolink|}} +~~NOTOC~~ 
-====== Xfce 4.14 Panelbar Theming ======+{{ :xfce:xfce4-panel.png?nolink|}} 
 +====== xfce4-panel - Panelbar Theming ======
  
 +  * **[[#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]]**
 +
 +----
  
 ===== CSS Selectors ===== ===== CSS Selectors =====
Line 8: Line 15:
  
     .xfce4-panel     .xfce4-panel
 +    .panel
     .tasklist     .tasklist
  
 === ID's: === === 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     #whiskermenu-button
     #xfce4-notification-plugin     #xfce4-notification-plugin
     #xfce4-power-manager-plugin     #xfce4-power-manager-plugin
     #pulseaudio-button     #pulseaudio-button
-    #clock-button 
  
 === Elements === === Elements ===
Line 36: Line 63:
 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: 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:+Quit the current xfce panel process:
  
-    pkill xfce4-panel+    xfce4-panel -q
  
-Start the panel process with GtkInspector debugging enabled:+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     GTK_DEBUG=interactive xfce4-panel
  
 +[[|Back To Top]]
 ---- ----
  
-===== Plugin theming examples =====+===== Panelbar theming examples =====
  
 Panelbar background color. Panelbar background color.
  
-    .xfce4-panel.background {+    .xfce4-panel .background {
       background-color: rgba(36, 36, 36, 0.8); }       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. Tasklist toggle button background colour, text color, and border radius.
  
-    .tasklist .toggle {+    .xfce4-panel .tasklist .toggle {
       background-color: lightblue;       background-color: lightblue;
       color: black;       color: black;
       border-radius: 3px; }       border-radius: 3px; }
  
-<figure "Panelbar tasklist button">{{:xfce:xfce4-panel:4.14:tasklist_button.png}}</figure>+<figure "Panelbar Tasklist Button"> 
 +{{:xfce:xfce4-panel:tasklist_button.png|Panelbar Tasklist Button}} 
 +</figure>
  
  
Line 71: Line 122:
  
  
-<figure "Whisker Menu panel button">{{:xfce:xfce4-panel:4.14:whiskermenu_button.png}}</figure>+<figure "Whisker Menu Panel Button"> 
 +{{:xfce:xfce4-panel:whiskermenu_button.png|Whisker Menu Panel Button}} 
 +</figure>
  
  
Line 80: Line 133:
       border-color: gray; }  /* This will apply a colour to the mpris button border */       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>+<figure "Pulseaudio Menu MPRIS Buttons"> 
 +{{:xfce:xfce4-panel:pulseaudio_menu.png|Pulseaudio Menu MPRIS Buttons}} 
 +</figure>
  
  
 //The pulseaudio menu contains common GTK widgets such as a scale, trough, switch, and slider.// //The pulseaudio menu contains common GTK widgets such as a scale, trough, switch, and slider.//
  
-Workspace switcher colours for selected and hover states.+Workspace switcher colours for selected and hover states (Appearance: miniature view).
  
     wnck-pager:selected {     wnck-pager:selected {
Line 92: Line 147:
       background-color: gray; }       background-color: gray; }
  
-<figure "Panelbar workspace switcher">{{:xfce:xfce4-panel:4.14:workspace_switcher.png}}</figure>+<figure "Panelbar Workspace Switcher"> 
 +{{:xfce:xfce4-panel:workspace_switcher.png|Panelbar Workspace Switcher}} 
 +</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 colours and font style:
Line 101: Line 171:
       background-color: lightblue; }       background-color: lightblue; }
  
-<figure "Panelbar Clock">{{:xfce:xfce4-panel:4.14:clock.png}}</figure>+<figure "Panelbar Clock"> 
 +{{:xfce:xfce4-panel:clock.png|Panelbar Clock}} 
 +</figure> 
 + 
 +Notification Plugin panel button colours 
 + 
 +    #xfce4-notification-plugin { 
 +      background-color: lightblue; 
 +      color: black; } 
 + 
 +<figure "Notification Plugin"> 
 +{{:xfce:xfce4-panel:notification_plugin.png|Notification Plugin}} 
 +</figure> 
 + 
 +Status Notifier Plugin 
 + 
 +    #sn-button { 
 +      background-color: lightblue; } 
 + 
 +<figure "Status Notifier"> 
 +{{:xfce:xfce4-panel:status_notifier_plugin.png|Status Notifier}} 
 +</figure>
  
 [[|Back to Top]] [[|Back to Top]]
 ---- ----
-[[:xfce:xfce4-panel:start:|Back to xfce4-panel main page]]+[[:xfce:xfce4-panel:start:|Return to xfce4-panel Main Documentation Page]]