-
Notifications
You must be signed in to change notification settings - Fork 48
Style: overview
trigg edited this page May 31, 2026
·
15 revisions
wf-panel allows custom styling using CSS.
Style files are read from:
- any file you set in config (
css_pathvalue) ~/.config/wf-shell/css/*.css
~/.config/wf-shell/css/minimal.css
image, button {
padding: 0px 0px 0px 0px;
border: 0px;
}
~/.config/wf-shell/css/hover-zoom.css
image.widget-icon {
transition: 200ms;
-gtk-icon-transform: scale(1.0);
}
image.widget-icon:hover {
transition: 200ms;
-gtk-icon-transform: scale(1.4);
}
~/.config/wf-shell/css/user-font.css
* {
font-family: Jetbrains Mono Regular;
}
~/.config/wf-shell/css/battery-font.css
.wf-panel .battery {
font-family: serif;
font-size: 20px;
}
~/.config/wf-shell/css/gradient.css
.menu-button {
border-radius: 0px 10px 10px 0px;
background: linear-gradient(0deg, rgb(24, 97, 24) 0%, rgb(39, 125, 38) 3%, rgb(40, 142, 40) 6%, rgb(35, 152, 37) 9%, rgb(35, 152, 37) 88%, rgb(52, 119, 50) 91%, rgb(46, 96, 43) 94%, rgb(24, 64, 27) 97%, rgb(24, 64, 27) 100%);
}
.menu-button image{
min-width:100px;
}
.wf-panel {
background: linear-gradient(00deg, rgb(24, 66, 164) 0%, rgb(32, 79, 195) 3%, rgb(36, 91, 218) 6%, rgb(36, 91, 218) 9%, rgb(38, 100, 221) 12%, rgb(38, 100, 221) 46%, rgb(36, 91, 218) 50%, rgb(36, 91, 218) 78%, rgb(36, 91, 218) 81%, rgb(36, 91, 218) 84%, rgb(38, 108, 220) 87%, rgb(38, 108, 220) 90%, rgb(74, 146, 228) 93%, rgb(74, 146, 228) 96%, rgb(74, 146, 228) 100%);
}
.wf-panel .tray,
.wf-panel .launchers {
background: linear-gradient(0deg, rgb(27, 92, 150) 0%, rgb(27, 92, 150) 3%, rgb(27, 92, 150) 6%, rgb(10, 143, 234) 9%, rgb(10, 143, 234) 12%, rgb(10, 143, 234) 88%, rgb(24, 153, 236) 91%, rgb(32, 180, 242) 94%, rgb(37, 167, 219) 97% , rgb(27, 95, 144) 100%);
}
.wf-panel .window-button.activated{
background:rgba(0,0,0,0.3);
}
Widgets in panel can be selected with a combination of selectors from selectors
Extra help can be found here.
Most plugins are made up of multiple widgets, the widget tree for each are documented below.
Each widget will list the GTK type selector (window, button, box) followed by either one class which is required or no-class which means it has no set class name. Any extra classes that may or may not be set follow (.minimized, .maximized, .activated).
Segments of the tree using + in place of - indicate multiples of the element are typical.
Anything in brackets after classes is a explanation of the contents of the widget
| - window .wf-panel
| - box no-class
| - box .left
| - box .center
| - box .right
| - box .battery
| - overlay no-class
| - image .widget-icon
| - label no-class (The battery percentage)
| - label no-class (The battery percentage)
| - box .brightness
| - image no-class
| - box no-class
| - box .this-monitor
| - label no-class (Labeled "This Monitor")
| - box no-class
| - label no-class (Labeled for monitor name)
| - scale no-class (Brightness control)
| - separator no-class
| - box .other-monitors
| - label no-class (Labeled "Other Monitors")
| + box no-class
| - box no-class
| - label no-class (Labeled for monitor name)
| - scale no-class (Brightness control)
| - box .clock
| - label no-class (The date/time string)
| - popover .clock-popover .popover
| - calendar no-class
| - box .command-output-box
| + box .command-output .icon-top .icon-bottom .icon-left .icon-right
| - image .command-icon-$NAME
| - label no-class
| - label .language (The
| - box .launchers
| + box .launcher (one each per launcher)
| - image no-class
| - box .menu-button
| - image .menu-icon .widget-icon
| - popover .menu-popover
| - box no-class
| - scrolledwindow .category-list-scroll
| - box .category-list
| + button .app-category (One for each category)
| - box no-class
| - image no-class
| - label no-class
| - scrolledwindow .app-list-scroll
| - box no-class
| - flowbox .app-list
| + flowboxchild .app-button (One each for every filtered app launcher)
| - eventbox no-class
| - box no-class
| - image no-class
| - label no-class
| - button .app-button-extras
| - entry .app-search
| - box no-class
| - button no-class (logout)
| - box .network
| - box no-class
| - image .network-icon
| - label .excellent .good .weak .none
| - popup .network-popup
| - box .network-control-center
| - label no-class (Shows 'NetworkManager disabled' when necessary)
| - box no-class (Contains toggles for overall functionality)
| - checkbutton no-class (Toggle networking state)
| - checkbutton no-class (Toggle WIFI state)
| - checkbutton no-class (Toggle Mobile Data state, if possible)
| - box no-class (Shows Mobile Carriers, if possible)
| + box .device (One per Mobile device)
| - box no-class
| - image no-class (Shows mobile carrier state)
| - label no-class (Shows mobile carrier name)
| - revealer no-class (unused)
| - box no-class (Shows Wifi Devices, is possible)
| + box .device (One per Wifi device)
| - box no-class
| - image no-class (Shows Wifi state)
| - label no-class (Shows Wifi access point name)
| - revealer no-class
| - box no-class
| + box .access-point .f900mhz .f2-4ghz .f5ghz .f6ghz .f45ghz .f60ghz .secure .insecure .has-password (One per reachable access point. Optional classes show frequency, security, and if the user already has a PSK provided for this AP)
| - overlay no-class
| - image no-class (Shows Wifi access point state)
| - image .security (Shows Wifi security state)
| - label no-class (Access point name)
| - label .band (Access point frequency)
| - box no-class (Shows Wired Devices)
| + box .device (One per Wired device)
| - box no-class
| - image no-class (Shows Wired state)
| - label no-class (Shows Wired name)
| - revealer no-class (unused)
| - box no-class (Shows Bluetooth Devices)
| + box .device (One per Bluetooth Device)
| - box no-class
| - image no-class (Shows Bluetooth state)
| - label no-class (Shows Bluetooth name)
| - revealer no-class (unused)
| - box no-class (Shows VPN Devices)
| + box .vpn .active (One per VPN configured)
| - image no-class (Shows VPN static image)
| - label no-class (Shows VPN name)
| - box .notification-center
| - image no-class
| - popover .notification-popover
| - scrolledwindow no-class
| - box no-class
| + revealer .notification
| - eventbox no-class
| - box no-class
| - box .top-bar
| - image app-icon
| - label app-name
| - label time
| - box .notification-contents
| - label no-class
| - image no-class
| - box .actions
| + button no-class
| - separator .separator
| - box .spacing
| - box .tray
| + box .tray-button
| - box no-class
| - image no-class
| - box .volume
| - image no-class
| - popover .volume-popover
| - scale no-class
| - scrolledwindow .window-list
| - box no-class
| + box .window-button .activated .minimized .maximized (One per toplevel window on output)
| - box no-class
| - image no-class
| - label no-class
| - box no-class
| - picture no-class
| - box .mixer .widget-icon
| - image no-class
| - popover .mixer-popover
| - box no-class
| - box .inputs
| - label no-class
| - separator no-class
| + grid .default .mixer-control .muted
| - label no-class
| - scale no-class
| - button .widget-icon .mute-toggle
| - button .widget-icon .default-button
| - separator .out-in
| - box .outputs
| - label no-class
| - separator no-class
| + grid .default .mixer-control .muted
| - label no-class
| - scale no-class
| - button .widget-icon .mute-toggle
| - button .widget-icon .default-button
| - separator .in-streams
| - box .streams
| - label no-class
| - separator no-class
| + grid .mixer-control .muted
| - label no-class
| - scale no-class
| - button .widget-icon .mute-toggle