In this part of the series, we will look at how to set up different bars in the Polybar configuration. Last time, we finished adding new colors to our bar in the Color section. However, we could only change colors that were already defined because we couldn’t see where the actual colors would be called. Some colors on the bar may be unchangeable because they are hard-coded and not defined in the color section. We can change this behavior when we get to the actual styling of modules.
Back to the Action
If we take another look at the next part of the configuration file:
[bar/mainbar-herbstluftwm]
monitor = DP-1
;monitor-fallback = HDMI1
In here, we define a new section. This section is especially important because it describes the layout and shape of the actual bar. If you look at the section header, you will notice that it has a different look from the color section [colors]. The first part defines the section as the bar section, and the second part is the name (right side of the /).
Since I’m using HerbstluftWM, I named it “mainbar-herbstluftwm.” Creative, right? You can name it whatever you want. That said, I don’t believe special characters are supported. The next line defines which monitor the bar will be displayed on. If you don’t know the name of the monitor(s) that are plugged in, use the xrandr command to find out. The command is:
xrandr -q | grep " connected"
The output should look something like this:
As you can see, the output matches the options I selected (DP-1). You can also define a fallback monitor, but I skipped that step. You can comment that back in and select a backup if you like. You may be wondering, “What if I have more than one monitor?” That’s a great question, and it will be answered later. The short answer: we will create a second bar that we will bind to the second monitor later in the tutorial. Now, let’s continue with the configuration:
width = 100%
height = 30
;offset-x = 1%
;offset-y = 1%
radius = 0.00
fixed-center = true
bottom = false
separator = |
Here, we can define the width (as a percentage of the monitor’s viewable area), the height (in pixels), and the offset (also in pixels) of the bar. Try out the options and see what works for you. I commented out the offset because I don’t need it, but you can uncomment it if you want. The radius option defines the corner radius of the bar at the outer edges. I like it square, so I left it at 0. I fixed my bar in the centered position, and I want it at the top of my workspace. Therefore, I set bottom to false. Again, see what suits your taste. You will see the separator in action a little later, but know this: it separates modules, as the name implies. You can choose any symbol you like for that, and some font-specific symbols are also rendered.
Styling the Actual Bar
You can use the next part of the configuration to define the appearance of the taskbar. In the previous section, we saw the “radius” option. This setting could also be described here. The part of the configuration file I am talking about looks like this:
separator-foreground = ${colors.foreground-att}
background = ${colors.background}
foreground = ${colors.foreground}
line-size = 2
line-color = ${colors.primary}
override-redirect = true
; Enable support for inter-process messaging
; See the Messaging wiki page for more details.
enable-ipc = true
border-size = 0
;border-left-size = 0
;border-right-size = 25
;border-top-size = 0
;border-bottom-size = 4
border-color = ${colors.background}
padding-left = 0
padding-right = 1
module-margin-left = 3
module-margin-right = 3
This is quite a large section of settings, so bear with me. The separator-foreground relates to the choice of separator from the previous section. However, since we defined the colors beforehand, we can now use them with the ${section.setting} notation. Since we defined it in the Colors section, that is the section name that is used there. This works not only with colors but also with every setting defined. This is useful if you want everything to be consistent and like switching some settings around. The foreground and background settings determine the color of the bar. Play around with these colors until you find a combination that suits your taste and is readable enough. The next setting is very cool, and I secretly showed it in the previous post. Remember this picture?
Do you see the thicker line below the symbols? This line is referred to in the line-size setting.
I chose to color it in the primary color. If you misspell a color or the color you want to use cannot be found, the fallback colors are used instead. I have the override-redirect setting in my config to prevent the window manager from handling the Polybar “window” and to leave it in its intended place. In some cases, this can lead to the bar overlapping full-screen windows. For me, this was not the case. The enable-ipc setting is needed by some modules to interact with the bar, so I have it in my configuration. In my configuration, it doesn’t hurt.
The next part is more interesting: the border size. You can define an all-around border by simply setting the border-size to a value greater than zero.
For more fine-grained control, you can define each of the four border parts individually. Using one of the border-xyz-size settings overwrites the all-around border in this part. The padding-left and padding-right settings define how much space is on the left and right before something is displayed on the bar. The padding space is colored in your background color of choice. Do not confuse these with the offset setting, which describes where the bar starts. In the offset space, you can see parts of your wallpaper. The module-margin-setting is basically the same as the padding option, except it applies to the free space to the left and right of every module on the bar. If you set both, the first module will start at a length equal to the sum of the padding and margin from the start of the bar.
Fonts, Fonts, Fonts
Today’s final section is all about fonts. There are a thousand and one possibilities to choose from. Which one you use is entirely up to you. However, if you want special features, such as special ligatures, characters, or symbols, then you are limited to fonts that have those features. In general, I recommend using nerd fonts because they are good and feature-rich right out of the box. The next code block shows how fonts for Polybar are defined:
font-0 = "FiraCode Mono:size=10;0"
font-1 = "Symbols Nerd Font:size=13;0"
font-2 = "Noto Sans:size=10;0"
font-3 = "Noto Sans Mono:size=10;0"
I like the Fira Code font, but I am also a fan of the Druid Sans font family, so normally I use one of those. As I mentioned before, though, everything works as long as you have the font you want installed on your system. Otherwise, it won’t work. The second font (font-1) is reserved for displaying special characters and symbols. At least, that’s how I use it. Since FiraCode does not support all symbols, I load the Nerd Fonts symbol font for more support. You can check out the Nerd Font and the supported symbols here on the Nerd Font website. There, the font installation process is detailed. That’s all for today. Next time, we will take a look at the most important part of the configuration and the bar: the modules.