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:4.16:theming [2020/08/12 05:37] – created kevinbowenxfce:xfce4-panel:4.16:theming [2024/03/14 07:40] (current) – [CSS Selectors] backport from 4.18 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 10: 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 
-    #indicator-button 
-    #sn-button 
-    #showdesktop-button 
-     
  
 === Elements === === Elements ===
Line 50: Line 71:
     GTK_DEBUG=interactive xfce4-panel     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); }
 +
 +[[|Back To Top]]
 ---- ----