|
| 1 | +# Obligatory Screenshot |
| 2 | + |
| 3 | +1. [Introduction](#introduction) |
| 4 | +2. [Background](#background) |
| 5 | +3. [Tweaks](#tweaks) |
| 6 | +4. [Theme](#theme) |
| 7 | +5. [Panel](#panel) |
| 8 | +6. [Screenshots](#screenshots) |
| 9 | + |
| 10 | +# 1. Introduction {#introduction} |
| 11 | + |
| 12 | +The [obligatory screenshot] used on the `labwc` website index page and GitHub |
| 13 | +repo README.md was created a long time ago and can not easily be re-produced as |
| 14 | +it was made with experimental tools and long lost config files. |
| 15 | + |
| 16 | +In response to frequent requests, this document describes a setup that brings |
| 17 | +you pretty close using tools that are maintained and readily available. |
| 18 | + |
| 19 | +[obligatory screenshot]: img/scrot1.png |
| 20 | + |
| 21 | +# 2. Background {#background} |
| 22 | + |
| 23 | +``` |
| 24 | +swaybg -c '#21333b' |
| 25 | +``` |
| 26 | + |
| 27 | +# 3. Tweaks {#tweaks} |
| 28 | + |
| 29 | +The window is an early version of the [labwc-tweaks] config tool. |
| 30 | + |
| 31 | +# 4. Theme {#theme} |
| 32 | + |
| 33 | +The GTK/Openbox theme is [BL-Lithium]. To use it, copy the [BL-Lithium] |
| 34 | +directory to `~/.local/share/themes/` and use [labwc-tweaks] to apply it. |
| 35 | + |
| 36 | +[BL-Lithium]: https://github.com/BunsenLabs/bunsen-themes/tree/beryllium/themes/BL-Lithium |
| 37 | +[labwc-tweaks]: https://github.com/labwc/labwc-tweaks |
| 38 | + |
| 39 | +# 5. Panel {#panel} |
| 40 | + |
| 41 | +Use [sfwbar]. |
| 42 | + |
| 43 | +Create a `~/.config/sfwbar/sfwbar.config` with the content below. |
| 44 | + |
| 45 | +Copy `{battery-svg,startmenu,winops}.widget` from [sfwbar/config] to |
| 46 | +`~/.config/sfwbar/`. |
| 47 | + |
| 48 | +``` |
| 49 | +Set Term = "sakura" |
| 50 | +
|
| 51 | +function("SfwbarInit") { |
| 52 | + SetBarId "bar-0" |
| 53 | + SetLayer "top" |
| 54 | +} |
| 55 | +
|
| 56 | +include("winops.widget") |
| 57 | +
|
| 58 | +layout "sfwbar" { |
| 59 | + include("startmenu.widget") |
| 60 | +
|
| 61 | + button { |
| 62 | + style = "launcher" |
| 63 | + value = $Term |
| 64 | + action = Exec $Term |
| 65 | + } |
| 66 | +
|
| 67 | + button { |
| 68 | + style = "launcher" |
| 69 | + value = "firefox" |
| 70 | + action = "firefox" |
| 71 | + } |
| 72 | +
|
| 73 | + taskbar { |
| 74 | + rows = 1 |
| 75 | + group = true |
| 76 | + group cols = 1 |
| 77 | + group style = "taskbar_group" |
| 78 | + group labels = true |
| 79 | + group icons = true |
| 80 | + icons = true |
| 81 | + labels = true |
| 82 | + action[3] = Menu "winops" |
| 83 | + } |
| 84 | +
|
| 85 | + label { css = "* { -GtkWidget-hexpand: true; min-height: 30x; }" } |
| 86 | +
|
| 87 | + include("battery-svg.widget") |
| 88 | +
|
| 89 | + label { |
| 90 | + value = Time("%k:%M") |
| 91 | + style ="clock" |
| 92 | + } |
| 93 | +} |
| 94 | +
|
| 95 | +#CSS |
| 96 | +@define-color lab_bg_color RGBA(0, 0, 0, 0.85); |
| 97 | +@define-color lab_active_color #bc4b4f; |
| 98 | +@define-color lab_hover_color RGBA(255, 255, 255, 0.1); |
| 99 | +@define-color lab_text_color #d1d1d1; |
| 100 | +@define-color lab_menu_bg_color #353535; |
| 101 | +
|
| 102 | +window { |
| 103 | + -GtkWidget-direction: bottom; |
| 104 | + background-color: @lab_bg_color; |
| 105 | +} |
| 106 | +
|
| 107 | +label { |
| 108 | + font-size: 14px; |
| 109 | + color: @lab_text_color; |
| 110 | + text-shadow: none; |
| 111 | +} |
| 112 | +
|
| 113 | +button, |
| 114 | +button image { |
| 115 | + outline-style: none; |
| 116 | + box-shadow: none; |
| 117 | + background-image: none; |
| 118 | + border-image: none; |
| 119 | + border-radius: 0; |
| 120 | + min-height: 30px; |
| 121 | + min-width: 30px; |
| 122 | + margin: 0px; |
| 123 | + margin-right: 3px; |
| 124 | + border: 0px; |
| 125 | + background-color: RGBA(0, 0, 0, 0.0); |
| 126 | + -GtkWidget-valign: center; |
| 127 | +} |
| 128 | +
|
| 129 | +button:hover { |
| 130 | + background-color: @lab_hover_color; |
| 131 | +} |
| 132 | +
|
| 133 | +button#taskbar_group_normal, |
| 134 | +button#taskbar_group_normal:hover, |
| 135 | +button#taskbar_group_active { |
| 136 | + border: 0px; |
| 137 | + -GtkWidget-valign: center; |
| 138 | +} |
| 139 | +
|
| 140 | +button#taskbar_group_active { |
| 141 | + background-color: @lab_active_color; |
| 142 | +} |
| 143 | +
|
| 144 | +button#taskbar_group_active:hover { |
| 145 | + background-color: @lab_hover_color; |
| 146 | +} |
| 147 | +
|
| 148 | +#menu_item, |
| 149 | +#menu_item *, |
| 150 | +#menu_item image, |
| 151 | +#menu_item label { |
| 152 | + -GtkWidget-halign: start; |
| 153 | + color: white; |
| 154 | +} |
| 155 | +
|
| 156 | +#menu_item image { |
| 157 | + min-width: 16px; |
| 158 | + min-height: 16px; |
| 159 | + padding-right: 2px; |
| 160 | + margin-right: 7px; |
| 161 | + margin-left: 3px; |
| 162 | +} |
| 163 | +
|
| 164 | +menu { |
| 165 | + background-color: @lab_menu_bg_color; |
| 166 | +} |
| 167 | +
|
| 168 | +menu arrow { |
| 169 | + background: none; |
| 170 | +} |
| 171 | +
|
| 172 | +label#clock { |
| 173 | + color: @lab_text_color; |
| 174 | + -GtkWidget-vexpand: true; |
| 175 | + -GtkWidget-valign: center; |
| 176 | + font-size: 18px; |
| 177 | + margin-right: 8px; |
| 178 | +} |
| 179 | +``` |
| 180 | + |
| 181 | +[sfwbar]: https://github.com/LBCrion/sfwbar |
| 182 | +[sfwbar/config]: https://github.com/LBCrion/sfwbar/tree/main/config |
| 183 | + |
| 184 | + |
| 185 | +# 6. Screenshots {#screenshots} |
| 186 | + |
| 187 | +With described tools and config: |
| 188 | + |
| 189 | +<a href="img/scrot2.png"> |
| 190 | + <img src="img/scrot2-small.png"> |
| 191 | +</a> |
| 192 | + |
| 193 | +Original: |
| 194 | + |
| 195 | +<a href="img/scrot1.png"> |
| 196 | + <img src="img/scrot1-small.png"> |
| 197 | +</a> |
| 198 | + |
0 commit comments