Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
xfce:xfce4-panel:theming [2019/08/23 20:42] – kevinbowen | xfce:xfce4-panel:theming [2024/03/14 07:38] (current) – [CSS Selectors] Update css ids gael | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ~~NOTOC~~ |
+ | {{ : | ||
+ | ====== | ||
+ | |||
+ | * **[[#CSS Selectors|CSS Selectors]]** | ||
+ | * **[[#GTK3 Theme testing and debugging|GTK3 Theme testing and debugging]]** | ||
+ | * **[[# | ||
+ | * **[[#Plugin theming examples|Plugin theming examples]]** | ||
---- | ---- | ||
Line 8: | Line 15: | ||
.xfce4-panel | .xfce4-panel | ||
+ | .panel | ||
.tasklist | .tasklist | ||
=== ID's: === | === ID's: === | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | |||
+ | /* internal plugins */ | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | #sn-button | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | |||
+ | /* some external plugins */ | ||
# | # | ||
# | # | ||
# | # | ||
# | # | ||
- | # | ||
=== Elements === | === Elements === | ||
Line 24: | Line 51: | ||
---- | ---- | ||
- | ===== Plugin | + | ===== 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:// | ||
+ | |||
+ | 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 | ||
Panelbar background color. | Panelbar background color. | ||
- | .xfce4-panel.background { | + | .xfce4-panel .background { |
background-color: | background-color: | ||
+ | |||
+ | Panelbar vertical styling. | ||
+ | |||
+ | .xfce4-panel .vertical .background { | ||
+ | background-color: | ||
+ | |||
+ | Panelbar horizontal styling. | ||
+ | |||
+ | .xfce4-panel .horizontal .background { | ||
+ | background-color: | ||
+ | |||
+ | Make autohide panelbar transparent. | ||
+ | |||
+ | .xfce4-panel# | ||
+ | background: rgba(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 { | + | |
background-color: | background-color: | ||
color: black; | color: black; | ||
Line 56: | Line 127: | ||
# | # | ||
color: lightblue; | color: lightblue; | ||
- | border-color: | + | border-color: |
<figure " | <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 active | + | Workspace switcher colours for selected and hover states |
wnck-pager: | wnck-pager: | ||
Line 71: | Line 142: | ||
<figure " | <figure " | ||
+ | |||
+ | Underline active Workspace switcher button (Appearance: | ||
+ | |||
+ | .xfce4-panel widget grid button.flat.toggle: | ||
+ | font-family: | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | .xfce4-panel widget grid button.flat.toggle: | ||
+ | font-family: | ||
+ | font-size: 16px; | ||
+ | border-bottom: | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | Clock colours and font style: | ||
+ | |||
+ | # | ||
+ | color: black; | ||
+ | font-style: italic; | ||
+ | background-color: | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | Notification Plugin panel button colours | ||
+ | |||
+ | # | ||
+ | background-color: | ||
+ | color: black; } | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | Status Notifier Plugin | ||
+ | |||
+ | #sn-button { | ||
+ | background-color: | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | [[|Back to Top]] | ||
+ | ---- | ||
+ | [[: |