~~NOTOC~~ {{ :xfce:xfce.panel.png?no link|}} ====== 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 ===== === 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; }
{{:xfce:xfce4-panel:4.14:tasklist_button.png}}
Whisker Menu panel button. #whiskermenu-button label { color: lightblue; font-weight: bold; font-style: italic; }
{{:xfce:xfce4-panel:4.14:whiskermenu_button.png}}
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 */
{{:xfce:xfce4-panel:4.14:pulseaudio_menu.png}}
//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; }
{{:xfce:xfce4-panel:4.14:workspace_switcher.png}}
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; }
{{:xfce:xfce4-panel:4.14:clock.png}}
Notification Plugin panel button colours #xfce4-notification-plugin { background-color: lightblue; color: black; }
{{:xfce:xfce4-panel:4.14:notification_plugin.png}}
Status Notifier Plugin #sn-button { background-color: lightblue; }
{{:xfce:xfce4-panel:4.14:status_notifier_plugin.png}}
[[|Back to Top]] ---- [[:xfce:xfce4-panel:start:|Back to xfce4-panel main page]]