AwesomeWM Guide - Bar

In this post, we will turn

default eww

into this

wow

This guide will mostly about awm's widgeting system, if you wanna learn about other things about awm, check out this guide by Stella. I am assuming you are using awesome-git and know thebasics of lua. The code for this can be found in this repo. Let's just start with no bullshit.

Quick Setup

  1. Ensure you are using awesome-git.
  2. First remove the default rc.lua and replace it with this modularized config.
  3. Add your wallpaper to theme/wall.jpg
  4. Edit the contents of theme/init.lua

theme/init.lua
01-- Theme handling library
02local beautiful = require('beautiful')
03-- Standard awesome library
04local gears     = require('gears')
05
06local theme = {}
07theme.wallpaper = gears.filesystem.get_configuration_dir() .. 'theme/wall.jpg'
08
09-- Themes define colors, icons, font and wallpapers.
10beautiful.init(gears.filesystem.get_themes_dir() .. 'default/theme.lua')
11beautiful.init(theme)
  1. Add in colors, fonts and some gaps
theme/init.lua
01local theme       = {}
02
03theme.sans        = "Lexend"
04theme.font        = "Lexend"
05theme.mono        = "Iosevka Nerd Font"
06
07theme.bg          = "#181818"
08theme.altbg       = "#212121"
09theme.fg          = "#f8f8f8"
10theme.comment     = "#585858"
11theme.red         = "#ab4642"
12theme.blue        = "#7cafc2"
13theme.green       = "#a1b56c"
14theme.yellow      = "#f7ca88"
15theme.magenta     = "#ba8baf"
16theme.cyan        = "#86c1b9"
17
18theme.useless_gap = 5
  1. Create a helpers.lua file
helpers.lua
01local beautiful      = require("beautiful")
02local gears          = require("gears")
03
04local helpers        = {}
05
06helpers.rrect        = function(radius)
07  radius = radius or dpi(4)
08  return function(cr, width, height)
09    gears.shape.rounded_rect(cr, width, height, radius)
10  end
11end
12
13helpers.addHover     = function(element, bg, hbg)
14  element:connect_signal('mouse::enter', function(self)
15    self.bg = hbg
16  end)
17  element:connect_signal('mouse::leave', function(self)
18    self.bg = bg
19  end)
20end
21
22helpers.colorizeText = function(txt, fg)
23  if fg == "" then
24    fg = "#ffffff"
25  end
26
27  return "<span foreground='" .. fg .. "'>" .. txt .. "</span>"
28end
29
30return helpers

And now if you will restart awm, you will get something bland and tiny like this

eww

Looks bad, but a perfect canvas for us to work on.

Pro tip: Testing

If you do not want to restart your wm everytime to test a change, you can use Xephyr to test it. According to the arch wiki: 'Xephyr is a nested X server that runs as an X application.'

1$ Xephyr -br -ac -noreset -screen 800x600 :1
2$ DISPLAY=:1 awesome

The Bar

First lets remove everything from bar and delete every file in ui/wibar/module except ui/wibar/module/init.lua

ui/wibar/init.lua
01 --  ...
02   s.mypromptbox = awful.widget.prompt() -- Create a promptbox.
03
04   -- Create the wibox
05   s.mywibox = awful.wibar({
06      position = 'top',
07      height   = 50,
08    -- width    = 1920, -- it will automatically strech
09      screen   = s,
10      widget   = {
11         layout = wibox.layout.align.horizontal,
12         {
13          widget = wibox.container.place,
14          valign = "center",
15         },
16         nil,
17         {
18          widget = wibox.container.place,
19          valign = "center",
20         },
21         {
22            layout = wibox.layout.fixed.horizontal,
23            module.launcher(),
24            module.taglist(s),
25            s.mypromptbox
26         },
27         -- Middle widgets.
28         module.tasklist(s),
29         -- Right widgets.
30         {
31            layout = wibox.layout.fixed.horizontal,
32            awful.widget.keyboardlayout(), -- Keyboard map indicator and switcher.
33            wibox.widget.systray(),
34            wibox.widget.textclock(), -- Create a textclock widget.
35            module.layoutbox(s)
36         }
37      }
38   })

`wibox.container.place` is used to set the `valign` and `halign` properties on widgets. `halign` can be set to left, center and right while `valign` can be set to top, bottom and center.

wibox.layout.align takes in exactly 3 elements, first for the left, then the center and then the right, as we do not want anything in the center of the bar, we will put nil there.

We have also increased that height of the r to 50px.


```lua title="ui/wibar/module/init.lua" del={4-7} -- Return a table containing all r modules, with a name attached -- to each. return { launcher = require(... .. '.launcher'), taglist = require(... .. '.taglist'), tasklist = require(... .. '.tasklist'), layoutbox = require(... .. '.layoutbox') } ```

Right Side

First of all, let's create a module for showing time in the bar. Let us create the file

ui/wibar/module/time.lua
01local wibox     = require("wibox")
02local beautiful = require("beautiful")
03local helpers   = require("helpers")
04
05return wibox.widget {
06  {
07    font = beautiful.sans .. '12',
08    format = "%I : %M",
09    widget = wibox.widget.textclock
10  },
11  widget = wibox.container.place,
12  valign = "center"
13}

Awm has a built in widget called wibox.widget.textclock to display the time. Now:

ui/wibar/module/init.lua
1return {
2  time = require(... .. ".time")
3}

And the last step to add it to the bar.

ui/wibar/init.lua
01    widget   = {
02      layout = wibox.layout.align.horizontal,
03      {
04        widget = wibox.container.place,
05        valign = "center",
06      },
07      nil,
08      {
09        {
10          {
11            module.time,
12            spacing = 10,
13            layout = wibox.layout.fixed.horizontal,
14          },
15          widget = wibox.container.place,
16          valign = "center",
17        },
18        widget = wibox.container.margin,
19        margins = {
20          top = 3,
21          bottom = 3,
22          left = 15,
23          right = 15,
24        },
25      },
26    }
27

As I will have multiple modules on the right side of my bar, I have wrapped it in a wibox.layout.fixed.horizontal, which is essentially a horizontal line, also I have wrapped the entire right section in a wibox.container.margin to the section some margin.

Test/Restart awm to see a tiny clock on the right.

Making the clock look better.

Well we got our clock, but it still looks a bit boring. So let us make the hour bolder and blue in color and also give it a background color as well. For this we will use the helpers.colorizeText() from our helper functions. It takes the text and a color.

ui/wibar/module/time.lua
1local time      = wibox.widget {
2  {
3    font = beautiful.sans .. " Light 14",
4    format = "<b>" .. helpers.colorizeText("%I", beautiful.blue) .. "</b>" .. " : " .. helpers.colorizeText("%M", beautiful.fg),
5    widget = wibox.widget.textclock
6  },
7  widget = wibox.container.place,
8  valign = "center"
9}

format in textclock and markup in textbox allows the use of Pango markup so, <b> and < /b> gives bold text.

Now modifying what we return we get:

ui/wibar/module/time.lua
01return wibox.widget {
02  {
03    {
04      time,
05      spacing = 15,
06      layout = wibox.layout.fixed.horizontal,
07    },
08    widget = wibox.container.margin,
09    margins = {
10      top = 5,
11      left = 10,
12      bottom = 5,
13      right = 10,
14    },
15  },
16  shape = helpers.rrect(3),
17  widget = wibox.container.background,
18  bg = beautiful.altbg,
19}

This is just a background widget, which uses one of our helper functions to give a suble rounded rectangle. Inside this background widget, we have a container for margin, which is 5, and inside the margin container their is the time which is placed in a horizontal layout.

Wifi and Bluetooth Symbols

First, install svg icons of wifi connected, disconnected and bluetooh connected and disconnected from any icon set you want. My choice is Phosphor Icons. Now we will define them in the theme/init.lua file and also recolour them to white.

theme/init.lua
01theme.wallpaper         = gears.filesystem.get_configuration_dir() .. 'theme/wall.jpg'
02
03theme.iconpath          = gears.filesystem.get_configuration_dir() .. "theme/icons/"
04
05theme.wifi_connected    = gears.color.recolor_image(theme.iconpath .. "wifi-connected.svg", theme.fg)
06theme.wifi_disconnected = gears.color.recolor_image(theme.iconpath .. "wifi-disconnected.svg", theme.comment)
07
08theme.bluetooth_on      = gears.color.recolor_image(theme.iconpath .. "bluetooth-on.svg", theme.fg)
09theme.bluetooth_off     = gears.color.recolor_image(theme.iconpath .. "bluetooth-off.svg", theme.comment)
10
11-- Themes define colors, icons, font and wallpapers.
12beautiful.init(theme)

Before using these images, we need some sort of signal to indicate whether wifi/blueooth is on or not. Here is how to make one for wifi.

signal/wifi.lua
01local awful = require('awful')
02local gears = require('gears')
03
04-- Network Fetching and Signal Emitting
05---------------------------------------
06local function emit_network_status()
07  awful.spawn.easy_async_with_shell(
08    "bash -c 'nmcli networking connectivity check'", function(stdout)
09      local status = not stdout:match("none") -- boolean
10      awesome.emit_signal('signal::network', status)
11    end)
12end
13
14-- Refreshing
15-------------
16gears.timer {
17  timeout   = 2,
18  call_now  = true,
19  autostart = true,
20  callback  = function()
21    emit_network_status()
22  end
23}

The code above is fairly easy to understand, every 2 seconds, a function is called which executes the following process bash -c 'nmcli networking connectivity check'. If the output of the command does not has none in it, it emits a signal called signal::network with the value true, if the output of the command has none in it, the value is false.

Now lets make one for bluetooth

signal/bluetooth.lua
01local awful = require('awful')
02local gears = require('gears')
03
04local function emit_bluetooth_status()
05  awful.spawn.easy_async_with_shell(
06    "bash -c 'bluetoothctl show | grep -i powered:'", function(stdout)
07      local status = stdout:match("yes") -- boolean
08      awesome.emit_signal('signal::bluetooth', status)
09    end)
10end
11
12gears.timer {
13  timeout   = 2,
14  call_now  = true,
15  autostart = true,
16  callback  = function()
17    emit_bluetooth_status()
18  end
19}

And now to call them in the main file

signal/init.lua
01-- Allows all signals to be connected and/or emitted.
02return {
03  client = require(... .. '.client'),
04  -- NOTE: The `tag` file must be loaded before the `screen` one so that
05  -- the correct layouts defined in `config.user` are appended to the tags
06  -- upon creation.
07  tag    = require(... .. '.tag'),
08  screen = require(... .. '.screen'),
09  wifi   = require(... .. '.wifi'),
10  bluetooth   = require(... .. '.bluetooth'),
11}

We can now finally start creating the actual widgets. Let's create two image boxes

ui/wibar/module/time.lua
01local wifi      = wibox.widget {
02  {
03    forced_height = 18,
04    forced_width  = 18,
05    image         = beautiful.wifi_connected,
06    widget        = wibox.widget.imagebox,
07    id            = "image",
08  },
09  widget = wibox.container.place,
10  valign = "center",
11}
12
13local bluetooth = wibox.widget {
14  {
15    forced_height = 18,
16    forced_width  = 18,
17    image         = beautiful.bluetooth_on,
18    widget        = wibox.widget.imagebox,
19    id            = "image",
20  },
21  widget = wibox.container.place,
22  valign = "center",
23}

You will notice their is an id prop in the imagebox widget in both of them, we will see in the next step as to how to use them to change the image. Now we would like to connect to the signals we just made so to change the image. For that we would use awesome.connect_signal.

ui/wibar/module/time.lua
01awesome.connect_signal("signal::network", function(val)
02  if val then
03    wifi:get_children_by_id("image")[1].image = beautiful.wifi_connected
04  else
05    wifi:get_children_by_id("image")[1].image = beautiful.wifi_disconnected
06  end
07end)
08
09awesome.connect_signal("signal::bluetooth", function(val)
10  if val then
11    bluetooth:get_children_by_id("image")[1].image = beautiful.bluetooth_on
12  else
13    bluetooth:get_children_by_id("image")[1].image = beautiful.bluetooth_off
14  end
15end)

We cannot directly access the imagebox element of wifi/bluetooth, to do that we need to use get_children_by_id(id) which returns an array of all elements with that id.

Progress bars

The next thing we will be making would be a ttery and a volume indicator. Let us create a new file for that called ui/wibar/module/progress.lua and also include it in the module/init.lua file

ui/wibar/module/init.lua
1return {
2  time = require(... .. ".time"),
3  progress = require(... .. ".progress"),
4  }

We should also just create a sic progress file and we will add elements in them later.

ui/wibar/module/progress.lua
01local wibox = require("wibox")
02local helpers = require("helpers")
03local beautiful = require("beautiful")
04local awful = require("awful")
05
06return wibox.widget {
07  {
08    spacing = 20,
09    layout = wibox.layout.fixed.horizontal,
10  },
11  widget = wibox.container.place,
12  valign = "center",
13}

and then also add this to the bar.

ui/wibar/init.lua
1          -- ...
2          {
3            module.time,
4            module.progress,
5            spacing = 10,
6            layout = wibox.layout.fixed.horizontal,
7          },
8          -- ...

Services for Battery and Volume

For battery, we will read the file /sys/class/power_supply/BAT0/capacity to get the charge of laptop and /sys/class/power_supply/BAT0/status to get the status of charging of laptop. And then we refresh it like the other signals with gears.timer.

signal/battery.lua
01local battery_script =
02"bash -c 'echo $(cat /sys/class/power_supply/BAT0/capacity) echo $(cat /sys/class/power_supply/BAT0/status)'"
03
04local function battery_emit()
05  awful.spawn.easy_async_with_shell(
06    ttery_script, function(stdout)
07      local level     = string.match(stdout:match('(%d+)'), '(%d+)')
08      local level_int = tonumber(level)                 -- integer
09      local power     = not stdout:match('Discharging') -- boolean
10      awesome.emit_signal('signal::ttery', level_int, power)
11    end)
12end
13
14-- Refreshing
15-------------
16gears.timer {
17  timeout   = 20,
18  call_now  = true,
19  autostart = true,
20  callback  = function()
21    battery_emit()
22  end
23}

For volume, I will be using the program pamixer to get the level. You are free to use your own program.

signal/volume.lua
01local awful = require('awful')
02local gears = require('gears')
03
04local function volume_emit()
05  awful.spawn.easy_async_with_shell(
06    "sh -c 'pamixer --get-volume'", function(stdout)
07      local volume_int = tonumber(stdout)               -- integer
08      awesome.emit_signal('signal::volume', volume_int) -- integer
09    end)
10end
11
12gears.timer {
13  timeout   = 1,
14  call_now  = true,
15  autostart = true,
16  callback  = function()
17    volume_emit()
18  end
19}

Finally, inlclude these in your init.lua

signal/init.lua
1  -- ...
2  wifi      = require(... .. '.wifi'),
3  bluetooth = require(... .. '.bluetooth'),
4  battery   = require(... .. '.battery'),
5  volume    = require(... .. '.volume'),
6}

Using the services

For battery we will use the in builtin widget wibox.widget.progressbar. If we closely see the shape of your battery, it is actually a horizontal layout with progress as the battery and a little stick as the bulb. To recreate that in awm, we can do

ui/wibar/module/progress.lua
01local battery = wibox.widget {
02  {
03    {
04      bg = beautiful.fg .. "99",
05      forced_height = 10,
06      forced_width = 2,
07      shape = helpers.rrect(10),
08      widget = wibox.container.background,
09    },
10    widget = wibox.container.place,
11    valign = "center",
12  },
13  {
14    {
15      max_value        = 100,
16      value            = 69,
17      id               = "prog",
18      forced_height    = 22,
19      forced_width     = 45,
20      paddings         = 3,
21      border_color     = beautiful.fg .. "99",
22      background_color = beautiful.altbg,
23      bar_shape        = helpers.rrect(3),
24      color            = beautiful.green,
25      border_width     = 1.25,
26      shape            = helpers.rrect(5),
27      widget           = wibox.widget.progressbar
28    },
29    direction = 'south',
30    layout    = wibox.container.rotate,
31
32  },
33  spacing = 3,
34  layout = wibox.layout.fixed.horizontal
35}
36awesome.connect_signal("signal::battery", function(value)
37  local b = battery:get_children_by_id("prog")[1]
38  b.value = value
39end)

At this point, I think the code is self explantory. The progress bar on default goes from left to right, to make it go right to left, we use wibox.container.rotate and set the direction to "south", whihch essentially rotates it by 180 degrees.

For volume, we will be using circular progress bars. This is also an inbuilt widget in awesome called arcchart, here is how we will implement it.

ui/wibar/module/progress.lua
01local volume = wibox.widget {
02  {
03    max_value     = 100,
04    value         = 69,
05    id            = "prog",
06    forced_height = 23,
07    forced_width  = 23,
08    bg            = beautiful.altbg,
09    bar_shape     = helpers.rrect(3),
10    colors        = { beautiful.blue },
11    border_width  = 0,
12    thickness     = 3.2,
13    shape         = helpers.rrect(5),
14    widget        = wibox.container.arcchart
15  },
16  widget = wibox.container.place,
17  valign = "center",
18}
19awesome.connect_signal("signal::volume", function(value)
20  local v = volume:get_children_by_id("prog")[1]
21  v.value = value
22end)

And now let us add them into the widget we return

ui/wibar/module/progress.lua
01return wibox.widget {
02  {
03    battery,
04    volume,
05    spacing = 20,
06    layout = wibox.layout.fixed.horizontal,
07  },
08  widget = wibox.container.place,
09  valign = "center",
10}

Quick Profile Picture

Also let us add a profile picture at the end of our bar. Since we may use it multiple times on many widgets, it is best to define it in the theme itself.

theme/init.lua
1theme.wallpaper         = gears.filesystem.get_configuration_dir() .. 'theme/wall.jpg'
2theme.pfp               = gears.filesystem.get_configuration_dir() .. 'theme/pfp.jpeg'
3
4theme.iconpath          = gears.filesystem.get_configuration_dir() .. "theme/icons/"

Let us define the widget at ui/wibar/module/profile.lua. Here instead of shape,we will be using clip_shape to make our images rounded.

ui/wibar/module/profile.lua
01local wibox = require("wibox")
02local helpers = require("helpers")
03local beautiful = require("beautiful")
04
05
06return wibox.widget {
07  {
08    forced_height = 30,
09    forced_width  = 30,
10    image         = beautiful.pfp,
11    clip_shape    = helpers.rrect(100),
12    widget        = wibox.widget.imagebox,
13  },
14  widget = wibox.container.place,
15  valign = "center",
16}

I will leave it as task for you to add it to the end of the bar. Now lets add a systray to wrap up the right side of our bar.

ui/wibar/module/systray.lua
1local wibox = require("wibox")
2return wibox.widget {
3  {
4    base_size = 22,
5    widget = wibox.widget.systray,
6  },
7  widget = wibox.container.place,
8  valign = "center",
9}

Yup, that is basically it, it is that easy to create a systray. And from now I will leave it upto you to add these modules into the bar.

This is how out bar looks right now. right done

Left Side

Launcher Button

Lets create a launcher that can be later used to open the appmenu, dashboard, whatever you want. It is basically circle in a circle, To create it

ui/wibar/module/launcher.lua
01local wibox = require("wibox")
02local helpers = require("helpers")
03local beautiful = require("beautiful")
04
05return wibox.widget {
06  {
07    {
08      forced_height = 22,
09      forced_width = 22,
10      shape = helpers.rrect(100),
11      widget = wibox.container.background,
12      bg = beautiful.blue .. '33'
13    },
14    widget = wibox.container.margin,
15    margins = 6,
16  },
17  shape = helpers.rrect(100),
18  widget = wibox.container.background,
19  bg = beautiful.altbg
20}

Be Sure to add it to the LEFT SIDE of the bar.

Taglist

First configure the tags in config/user.lua, I'm going to numbers 5 tags. Clone this folder from my repo called mods/animation in module/animation. It is going to help up with animations. The taglist uses some colors from our theme/init.lua to color the taglist. As we do not need text, we will only set the background colors

theme/init.lua
1-- ...
2theme.taglist_bg_focus    = theme.blue
3theme.taglist_bg_empty    = theme.comment
4theme.taglist_bg_occupied = theme.comment
5theme.taglist_bg_urgent   = theme.red
6-- ...

How the animation module work?

"Animation
01local animation = require("module.animation")
02
03-- making a new animation
04local anim = animation:new({
05  duration = 0.15, -- how long the animation should be
06  easing = animation.easing.linear, -- timing function, see module/animation/tween.lua
07  -- what do to on update
08  update = function(_, pos)
09    print(pos)
10    some_random_element.forced_width = pos -- this animation changed the width of some element
11  end,
12})
13
14-- to make an animation work 
15anim:set(100) -- Make the width 100
16
17anim:set(30) -- make it 30

Now let us actually create the taglist. The file will return a function that takes in screen as a parameter.

ui/wibar/module/taglist.lua
01local awful = require("awful")
02local wibox = require("wibox")
03local gears = require("gears")
04local helpers = require("helpers")
05local animation = require("module.animation")
06local beautiful = require("beautiful")
07return function(s)
08  local taglist = awful.widget.taglist {
09
10    -- THIS IS THE LAYOUT OF ALL TAGS, YOU CAN SET IT TO 
11    -- WHATEVER YOU WANT, HORIZONTAL, VERTICAL, GRID 
12    layout          = {
13      spacing = 8,
14      layout = wibox.layout.fixed.horizontal,
15    },
16    -- THIS IS THE SHAPE OF EACH INDIVIDUAL TAG
17    style           = {
18      shape = helpers.rrect(9)
19    },
20    screen          = s,
21    filter          = awful.widget.taglist.filter.all,
22    -- ADDING CLICK EVENTS 
23    -- LEFT CLICK GOES TO THE TAG
24    buttons         = {
25      awful.button({}, 1, function(t) t:view_only() end),
26    },
27
28    -- THE ACTUAL WIDGET FOR EACH TAG
29    -- THE 'background_role' USES THE BACKGROUND COLOR WE JUST SPECIFIED IN THEME/INIT.LUA
30    widget_template = {
31      {
32        valign        = 'center',
33        id            = 'background_role',
34        shape         = helpers.rrect(1),
35        widget        = wibox.container.background,
36        forced_width  = 18,
37        forced_height = 10,
38      },
39      widget = wibox.container.place,
40      -- THIS RUNS WHEN 1 TIME AT THE START
41      create_callback = function(self, tag)
42        -- CREATING A NEW ANIMATION THAT CHANGES THE WIDTH
43        self.taganim = animation:new({
44          duration = 0.15,
45          easing = animation.easing.linear,
46          update = function(_, pos)
47            self:get_children_by_id('background_role')[1].forced_width = pos
48          end,
49        })
50        self.update = function()
51          if tag.selected then
52            self.taganim:set(45)
53          elseif #tag:clients() > 0 then
54            self.taganim:set(30)
55          else
56            self.taganim:set(15)
57          end
58        end
59
60        self.update()
61      end,
62      -- FUNCTION TO RUN ON EVERY TIME THE TAG CHANGES
63      update_callback = function(self)
64        self.update()
65      end,
66    }
67  }
68  -- WRAPPING THE TAGLIST IN A BOX
69  local widget = {
70    {
71      taglist,
72      widget = wibox.container.margin,
73      left = 10,
74      right = 10,
75      top = 3,
76      bottom = 3,
77    },
78    shape = helpers.rrect(10),
79    widget = wibox.container.background,
80    bg = beautiful.altbg,
81  }
82
83  return widget
84end

Now you know a lot of things already, so I will be giving you the challenge to create a layout box by yourself. No worries, if you cannot do it, It would be in the repo. Here are some things additional things that would be used:

  1. beautiful variables
  2. layoutbox

If you successfully did it, we would be left with a bar like this:

the bar

Bonus: Titlebars

The titlebars look bad, do let us make them look good and minimal at the same time. But first we will need to download icons. I will once again use phosphor for this, you are allowed to use your own icons. Then we need to add them in our theme.lua

theme/init.lua
01theme.titlebar_close_button_normal              = gears.color.recolor_image(theme.iconpath .. "close.svg",
02  theme.comment)
03theme.titlebar_close_button_focus               = gears.color.recolor_image(theme.iconpath .. "close.svg",
04  theme.red)
05
06theme.titlebar_maximized_button_normal_inactive = gears.color.recolor_image(
07  theme.iconpath .. "maximize.svg",
08  theme.comment)
09theme.titlebar_maximized_button_focus_inactive  = gears.color.recolor_image(
10  theme.iconpath .. "maximize.svg",
11  theme.blue)
12theme.titlebar_maximized_button_normal_active   = gears.color.recolor_image(
13  theme.iconpath .. "maximize.svg",
14  theme.comment)
15theme.titlebar_maximized_button_focus_active    = gears.color.recolor_image(
16  theme.iconpath .. "maximize.svg",
17  theme.blue)

Now let us edit modify the existing titlebar in ui/titlebar/normal.lua

ui/titlebar/normal.lua
01local awful = require('awful')
02local wibox = require('wibox')
03
04--- The titlebar to be used on normal clients.
05return function(c)
06  -- Buttons for the titlebar.
07  local buttons = {
08    awful.button(nil, 1, function()
09      c:activate({ context = 'titlebar', action = 'mouse_move' })
10    end),
11    awful.button(nil, 3, function()
12      c:activate({ context = 'titlebar', action = 'mouse_resize' })
13    end)
14  }
15
16  -- Draws the client titlebar at the default position (top) and size.
17  awful.titlebar(c, {size=40}).widget = wibox.widget({
18    layout = wibox.layout.align.horizontal,
19    -- Left
20    {
21      layout = wibox.layout.fixed.horizontal,
22      {
23        awful.titlebar.widget.iconwidget(c),
24        widget = wibox.container.margin,
25        margins = 8,
26      },
27      buttons = buttons
28    },
29    -- Middle
30    {
31      layout = wibox.layout.flex.horizontal,
32      {    -- Title
33        widget = awful.titlebar.widget.titlewidget(c),
34        halign = 'center'
35      },
36      buttons = buttons
37    },
38    nil,
39    -- Right
40    {
41      {
42        layout = wibox.layout.fixed.horizontal,
43        spacing = 10,
44        awful.titlebar.widget.floatingbutton(c),
45        awful.titlebar.widget.maximizedbutton(c),
46        awful.titlebar.widget.stickybutton(c),
47        awful.titlebar.widget.ontopbutton(c),
48        awful.titlebar.widget.closebutton(c)
49      },
50      widget = wibox.container.margin,
51      margins = 8,
52    }
53  })
54end

Restart the WM and you get some rather good looking titlebars! And your basic tutorial is complete.

sexy

This could be a series but these are very time consuming and energy draining tasks. But it could be one series. Thanks for reading this, I hope it made your awesome journey easier.

Credits

  1. gw for their starter config. (give him a follow, great guy)
  2. naina_ on unixporn discord from whom this rice is loosely copied.
29 May 2024
By Namish