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
Last revisionBoth sides next revision
xfce:xfce4-panel:theming [2020/10/14 20:17] – emh_mark_ixfce:xfce4-panel:theming [2023/08/26 11:43] – [Panelbar theming examples] See https://gitlab.xfce.org/xfce/xfce4-panel/-/issues/785 gael
Line 1: Line 1:
 ~~NOTOC~~ ~~NOTOC~~
-{{ :xfce:xfce4-panel:xfce4-panel.png?nolink|}} +{{ :xfce:xfce.panel.png?no link|}} 
-====== Xfce 4.14 Panelbar Theming ======+====== 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]]**   * **[[#Plugin theming examples|Plugin theming examples]]**
 +
 +----
  
 ===== CSS Selectors ===== ===== CSS Selectors =====
Line 16: Line 21:
  
     #XfcePanelWindow     #XfcePanelWindow
 +    #XfcePanelWindowHidden
     #whiskermenu-button     #whiskermenu-button
     #xfce4-notification-plugin     #xfce4-notification-plugin
Line 52: Line 58:
     GTK_DEBUG=interactive xfce4-panel     GTK_DEBUG=interactive xfce4-panel
  
 +[[|Back To Top]]
 ---- ----
  
Line 70: Line 77:
     .xfce4-panel .horizontal .background {     .xfce4-panel .horizontal .background {
       background-color: rgba(36, 36, 36, 0.8); }       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 ===== ===== Plugin theming examples =====
Line 105: Line 121:
 //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 113: Line 129:
  
 <figure "Panelbar workspace switcher">{{:xfce:xfce4-panel:4.14:workspace_switcher.png}}</figure> <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 colours and font style: