Differences
This shows you the differences between two versions of the page.
Next revision | Previous revisionNext revisionBoth sides next revision | ||
xfce:xfce4-panel:theming [2012/01/04 10:09] – created nick | xfce:xfce4-panel:theming [2019/08/25 04:28] – Copying over changes made from 4.14 branch emh_mark_i | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Theming ====== | + | ====== |
- | Besize the appearance settings in the panel preferences, | + | ---- |
- | ===== Classes | + | ===== CSS Selectors |
- | ? XfcePanelWindow | + | |
- | ! The normal panel window. | + | |
- | ? XfcePanelWindowHidden | + | |
- | ! Class of the hidden panel window. | + | |
- | ? | + | |
- | ! 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: === | ||
+ | |||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | |||
+ | === Elements === | ||
+ | |||
+ | wnck-pager | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== GTK3 Theme testing and debugging ===== | ||
+ | |||
+ | For testing, you can make modifications in the override file located at **~/ | ||
+ | |||
+ | mkdir -p ~/ | ||
+ | |||
+ | 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:// | ||
+ | |||
+ | Kill the current xfce panel process: | ||
+ | |||
+ | pkill xfce4-panel | ||
+ | |||
+ | Start the panel process with GtkInspector debugging enabled: | ||
+ | |||
+ | GTK_DEBUG=interactive xfce4-panel | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ===== Plugin theming examples ===== | ||
+ | |||
+ | Panelbar background color. | ||
+ | |||
+ | .xfce4-panel.background { | ||
+ | background-color: | ||
+ | |||
+ | Tasklist toggle button background colour, text color, and border radius. | ||
+ | |||
+ | .tasklist .toggle { | ||
+ | background-color: | ||
+ | color: black; | ||
+ | border-radius: | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | |||
+ | Whisker Menu panel button. | ||
+ | |||
+ | # | ||
+ | color: lightblue; | ||
+ | font-weight: | ||
+ | font-style: italic; } | ||
+ | |||
+ | |||
+ | <figure " | ||
+ | |||
+ | |||
+ | Pulseaudio menu mpris buttons. | ||
+ | |||
+ | # | ||
+ | color: lightblue; | ||
+ | border-color: | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | |||
+ | //The pulseaudio menu contains common GTK widgets such as a scale, trough, switch, and slider.// | ||
+ | |||
+ | Workspace switcher colours for selected and hover states. | ||
+ | |||
+ | wnck-pager: | ||
+ | background-color: | ||
+ | wnck-pager: | ||
+ | background-color: | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | Clock colours and font style: | ||
+ | |||
+ | # | ||
+ | color: black; | ||
+ | font-style: italic; | ||
+ | background-color: | ||
+ | |||
+ | <figure " |