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 06:48] – [Theming] kevinbowen | xfce:xfce4-panel:theming [2024/03/14 07:38] (current) – [CSS Selectors] Update css ids gael | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Theming ====== | + | ~~NOTOC~~ |
+ | {{ : | ||
+ | ====== | ||
- | <note warning> | + | * **[[#CSS Selectors|CSS Selectors]]** |
+ | * **[[#GTK3 Theme testing | ||
+ | * **[[# | ||
+ | * **[[#Plugin theming examples|Plugin theming examples]]** | ||
- | Besides the appearance settings in the panel preferences, | + | ---- |
- | ===== Classes | + | ===== CSS Selectors |
- | ===== XfcePanelWindow | + | === Classes: |
- | The normal panel window. | + | |
- | <file txt .gtkrc-2.0> | + | |
- | style "xfce-panel-window-style" | + | .panel |
- | { | + | |
- | # Time in miliseconds before the panel will unhide on an enter event | + | |
- | | + | |
- | # Time in miliseconds before the panel will hide on a leave event | + | === ID's: === |
- | XfcePanelWindow:: | + | |
- | | + | |
- | | + | # |
- | } | + | # |
- | class " | + | #xfce-panel-button |
- | </ | + | # |
- | ===== XfcePanelWindowHidden ===== | + | /* internal plugins */ |
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
- | Class of the hidden panel window. | + | /* some external plugins */ |
+ | # | ||
+ | # | ||
+ | # | ||
+ | # | ||
- | ===== XfcePanelWindowExternal ===== | + | === Elements |
- | The class of the external window used for the 4.6 plugins. | + | wnck-pager |
- | ===== XfcePanelWindowWrapper ===== | + | ---- |
- | The class of the window used for external plugins running in the wrapper application. | + | ===== GTK3 Theme testing and debugging ===== |
- | ===== XfcePanelImage ===== | + | For testing, you can make modifications in the override file located at **~/ |
- | Class of the images used on most of the panel plugins. | + | mkdir -p ~/.config/ |
- | <file txt .gtkrc-2.0> | + | To see your modifications applied, you can reset the xfce4-panel process by typing the following command into a terminal: |
- | style " | + | |
- | { | + | xfce4-panel -r |
- | | + | |
- | # images below 32 pixels. You can for example use this when you have | + | For debugging, you can use the [[https:// |
- | # fuzzy launcher icons. | + | |
- | | + | Quit the current xfce panel process: |
- | } | + | |
- | class " | + | xfce4-panel -q |
- | </file> | + | |
+ | 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: | ||
+ | |||
+ | 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. | ||
+ | |||
+ | .xfce4-panel .tasklist .toggle { | ||
+ | background-color: | ||
+ | color: black; | ||
+ | border-radius: | ||
+ | |||
+ | < | ||
+ | |||
+ | |||
+ | Whisker Menu panel button. | ||
+ | |||
+ | # | ||
+ | color: lightblue; | ||
+ | font-weight: | ||
+ | font-style: italic; } | ||
+ | |||
+ | |||
+ | < | ||
+ | |||
+ | |||
+ | Pulseaudio menu mpris buttons. | ||
+ | |||
+ | # | ||
+ | | ||
+ | border-color: | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | |||
+ | //The pulseaudio menu contains common GTK widgets such as a scale, trough, switch, and slider.// | ||
+ | |||
+ | Workspace switcher colours | ||
+ | |||
+ | wnck-pager: | ||
+ | background-color: | ||
+ | wnck-pager: | ||
+ | background-color: | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | Underline active Workspace switcher button (Appearance: | ||
+ | |||
+ | | ||
+ | | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | .xfce4-panel widget grid button.flat.toggle: | ||
+ | font-family: 'Sans Bold'; | ||
+ | font-size: 16px; | ||
+ | border-bottom: | ||
+ | padding: 10px; | ||
+ | } | ||
+ | |||
+ | Clock colours and font style: | ||
+ | |||
+ | # | ||
+ | color: black; | ||
+ | font-style: italic; | ||
+ | background-color: | ||
+ | |||
+ | < | ||
+ | |||
+ | Notification Plugin panel button colours | ||
+ | |||
+ | #xfce4-notification-plugin { | ||
+ | background-color: | ||
+ | color: black; } | ||
+ | |||
+ | < | ||
+ | |||
+ | Status Notifier Plugin | ||
+ | |||
+ | #sn-button { | ||
+ | background-color: | ||
+ | |||
+ | <figure " | ||
+ | |||
+ | [[|Back to Top]] | ||
+ | ---- | ||
+ | [[: |