Style: overview

Locations

wf-panel allows custom styling using CSS.

Style files are read from:

1. any file you set in config (css_path value)
2. ~/.config/wf-shell/css/*.css

Examples

Remove all padding

~/.config/wf-shell/css/minimal.css

image, button {
  padding: 0px 0px 0px 0px;
  border: 0px;
}

Zoom-on-hover for every icon

~/.config/wf-shell/css/hover-zoom.css

button image {
  transition: 200ms;
  -gtk-icon-transform: scale(1.0);
}
button:hover image{
  transition: 200ms;
  -gtk-icon-transform: scale(1.4);
}

Set custom font for entire panel

~/.config/wf-shell/css/user-font.css

* {
font-family: Jetbrains Mono Regular;
}

Set custom font for battery

~/.config/wf-shell/css/battery-font.css

.wf-panel .battery {
font-family: serif;
font-size: 20px;
}

Set custom gradient backgrounds

~/.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);
}

Creating your own

Selectors

Widgets in panel can be selected with a combination of selectors from selectors

Extra help can be found here.

Widget trees

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.

Panel

| - window .wf-panel
  | - box no-class 
    | - box .left
    | - box .center
    | - box .right

Battery

| - button .battery
  | - box no-class
    | - image no-class
    | - label no-class

Clock (Button)

| - button .clock
  | - label no-class

Clock (Popup)

| - popover .clock-popover
  | - calendar no-class

Command Output

| - box .command-output-box
  | + button .command-output .icon-top .icon-bottom .icon-left .icon-right
    | - image no-class
    | - label no-class

Launchers

| - box .launchers
  | + button .launcher
    | - box no-class
      | - image no-class

Menu (Button)

| - box .menu-button 
  | - image .menu-icon

Menu (Popup)

| - popover .menu-popover
  | - box no-class
    | - box no-class
      | - scrolledwindow .category-list-scroll
        | - box .category-list
          | + button .app-category
            | - box no-class
              | - image no-class
              | - label no-class
      | - scrolledwindow .app-list-scroll
        | - box no-class
          | - flowbox .app-list
            | + flowboxchild .app-button
              | - 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

Network

| - button .network
  | - box no-class
    | - image no-class
    | - label no-class

Notifications (Button)

| - button .notification-center
  | - image no-class

Notifications (Popup)

| - 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 .separator

Spacing

| - box .spacing

Tray

| - box .tray
  | + button .tray-button
    | - box no-class
      | - image no-class

Volume (Button)

| - button .volume
  | - image no-class

Volume (Popup)

| - popover .volume-popover
  | - scale no-class

Window List

| - scrolledwindow .window-list
  | - box no-class
    | + button .window-button .activated .minimized .maximized
      | - box no-class
        | - image no-class
        | - label no-class