How To Build The Perfect Minimal Status Bar (hyprland + waybar)

Añadido: 2026-06-04

[00:00:00]In this video, we're going to be taking a relatively basic Hyperland setup and take it to a whole new level with a completely custom status bar with Way Bar that I think looks really nice, is functional, and has some really cool features like this awesome scrolling text animation for the currently playing media. This video is a part of a series.

[00:00:21]If you want to learn how to install Arch Linux or set up Hyperland, I recommend you check those videos out first. Also, if you want to follow along, I'll have a blog post linked in the description with specific code you might need. With that said, let's get started. I've configured Super T to open a terminal window. This is Ghosty. We're going to be using the Ghost Ty terminal emulator for several different things in this setup. So, I recommend you install it. Now, you're also going to need a code editor. I use Neovim, but if you want to use something else like VS Code, you can just do yay-code to go ahead and install that.

[00:00:57]Now we're going to go ahead and install Waybar with yay- capital S waybar.

[00:01:03]And then we need to create the configuration file for it in tilda/.config/waybar.

[00:01:10]We'll move into that directory like so. And then we need to create a configuration file for way. You can do this with your code editor of choice.

[00:01:20]You can do code config.json JSON C for VS Code.

[00:01:26]I'll use Neoim. And again, the name of this file is config.json C. Now, I recommend you get a default way configuration. Here I have Chromium installed for my browser. Make sure you have a browser installed. I'm going to go to workspace 2 and my keybind for opening Chromium is superb. Now we're over here in the way wiki. I'm going to click on configuration here. Then I'm going to get the minimal example config.

[00:01:52]I'm going to click on this link. I'm going to copy this. Go back to workspace one and paste it into my editor. I'll save the changes. Now you'll see that we have sway here for a lot of the different way modules. I'm going to replace these with hyperland in the to do a replace. I'm going to do colon% s/way and then slash hyperland and slashg to replace all of them. So on the left we'll have hyperland workspaces and the hyperland mode. This is actually supposed to be submap. In the center the hyperland window battery and clock on the right and these are settings for the different modules. I'm going to save this file. I'm going to close neoim.

[00:02:38]Now, a great way to work on the terminal is using T-Mox. I'm going to run T-Mox and just create a horizontal split here.

[00:02:45]If you want to learn more about T-Mox, I have a complete video on this on the channel. I'm also building a complete course on how I work on the terminal.

[00:02:53]You can sign up for the weight list with the link in the description. I'll also do a vertical split down here. Instead of doing this, you could also open several terminal windows with Hyperland.

[00:03:02]I want to start way by just running Wayar. So, now we have the bar up top.

[00:03:07]That's great. And then on this other pane, I'm going to maximize it here for a second. And what I want to do is install a package that will allow us to make changes to the way configuration and see the result of the change as soon as we do this. I'm going to install a package with yay called I notify-tools.

[00:03:29]Now I want to create a script that's going to be called auto reload.sh.

[00:03:35]I'll open this with Neoim. Use the editor you prefer. And I want to run while I notify wait- e close write. Then we want to specify what directory or file we want to observe for changes. This is going to be tilda/.config/waybar semicolon. And we want to do kill all- sigr2 waybar. As you can see in the docs, this is the recommended way to reload the configuration without actually restarting way semicolon and then done. Save this file with colon w and enter. Quit neoim. I'm going to make this file an executable with chov + x auto reloads.sh.

[00:04:23]And then I'm going to run it dot /auto reload.sh.

[00:04:28]Perfect. I'm going to minimize this again. Go up to the top T-Mox pane. If I open my Wayar configuration, if I do envim config.json C, make sure you're in the wayar directory. I'm going to maximize this. I just want to make a change here so that you can see it reload. Take this and delete it. And if I save that, it'll automatically remove the hyperland workspaces from Waybar.

[00:04:52]I'll save this. And as you can see, the workspaces are now gone. This is because of the script we have running. It's just useful so that we can automatically see any changes we make as we work on our configuration. I'll undo this and save.

[00:05:05]Now the workspaces are back. Now what I want to do is to add a style.css file.

[00:05:10]I'm going to open my file explorer here.

[00:05:13]Create a new file. I'm going to call this style.css.

[00:05:17]This is the name of the file you'll need to style way bar. It's interesting that with the auto reload because style.css CSS is empty. We automatically get a change to the bar.

[00:05:29]I've opened this file up. I'll go back to workspace 2 where I have my browser open. And again, in the wiki, you should look for styling. Click on it. And then I'm going to click here on the default style. All I want to do is copy the contents of this file. I'll click on the button here in GitHub. Go back to workspace one. Paste that in. Save the changes. And we get the styling back.

[00:05:52]All right. I also recommend you install a nerd font. I'm going to close neoim.

[00:05:57]I'm going to do yay-s. We're going to install tdf-jetbrains-mono- nerd. I found this font to be really nice for configuring way. Let's install it. Perfect. I'm going to go ahead and open the style.css file. And then I'm going to replace this text here so that we can use that font family. This jet brains mono nerd font propo. And I'm going to increase the font here quite a bit so that you can see way bar better.

[00:06:25]I'll do 18 for now. If I save the changes, we'll see that reflected immediately. Let's actually do 20. This is larger than what I would normally use. It's so that you can see the tutorial clearly. If you're watching this video, you might be a developer like me or interested in learning more about software development. Scribba, today's video sponsor, is one of the best ways to do that. Scrimma is a really unique learning platform that has a ton of different software development courses with complete paths to learn front-end, backend, full stack development and AI, all designed to make you a hirable dev in no time. I've recently been brushing up on my data structures and algorithms, and I've been super impressed with their platform.

[00:07:04]They have a really awesome format where basically the video and code editor are meshed into one. As you're watching a specific video, you can jump straight into the code editor, make changes, and see the result live. It's a really great hands-on experience that I hadn't seen before, and an excellent way to learn.

[00:07:21]30% of their courses are completely free, and with a pro subscription, you'll get access to everything, including their entire course catalog, certificates, unlimited challenges, AI feedback, and full access to their Discord community with over 70,000 devs.

[00:07:35]You can sign up for the pro plan with a 20% discount using the link in the description. Thanks again to Scribbla for sponsoring this video. Now, the CSS that we can use here to style way bar is a specific variant of it for GTK.

[00:07:50]Something cool that we can do with GTK is define variables for our colors. Up here, I'm going to add the following.

[00:07:57]I'll have this code in a blog post linked in the description. We're going to be using these colors throughout our configuration. Down here in window #waybar, we're able to configure the overall styling of the bar itself. I want to change the background color to my darkest color at dark-9.

[00:08:16]Let's save that. If you want to add some opacity to the color over here in dark- 9, you can change this one to a decimal.

[00:08:24]If I do something extreme here, like 0.2, so you can see it, you'll have 80% transparency. If I save that, you'll see the change immediately. I'll change this back to one. I don't want my bar to have a bottom border. So, this line here, I'm going to delete it. This is for the color of the text in the bar. This is just white text. And I really don't care about these either. I'm going to delete them as well. And save.

[00:08:47]Nice. Now, the styling section of the Way Bar wiki has specific instructions on how to style everything. If you're ever wondering about this, you should check this out. And to style specific modules, you can click on the module.

[00:09:01]For example, over here on the right hand side, I'm going to click on hyperland.

[00:09:05]Then I'm going to click on this first one for workspaces. On the bottom here, you'll see a section called style, and it'll let you know what you need to target to style that specific module.

[00:09:15]Right now, I want to style the workspace buttons. So, we're going to use #workspaces button. I honestly really want to start all of this from scratch.

[00:09:25]I'm going to select from this line 19 here to the end. And I'm just going to delete everything and save. And then I'm going to do #workspaces button. And I'm going to paste the following. My CSS file is in my GitHub repo. And you can copy all of this code from my blog post. I want the padding for each button to be three pixels. This is the top margin, the right margin, the bottom margin, and the left margin. It's top right, bottom left. The background is going to be transparent. They're going to have a border radius of 2 pixels and the text color is white. And save. Now to style a button when it's active, we can do workspaces button.active.

[00:10:06]I want the background to be my highlight color. The text color is going to be black. And I want to increase the font weight to 700. I'm going to save this.

[00:10:20]It'll look something like that. That's awesome. You can see that number one is active. We change to two or three, it'll automatically get highlighted. Now, I also like to style when the button is urgent, like so. I'm just going to add the following to set the background to a red color. I'll save this. It's just to let you know that there's something that's happening in that workspace. I'm just going to save and quit for a second to give you an example. If I paste a URL here with Ghosty, I can open URLs with control shift. If I click on it, you'll see that the two here turns red. That's because it says it's urgent. If I switch to it, we'll see the opened link now in the browser. All right. Now, we can start styling and adding more modules to the bar. Again, in the way bar wiki on the right hand side, we have a bunch of different modules that we can use. There are some really great starting points.

[00:11:11]I'm going to click here on battery. And then, usually somewhere near the bottom, there's some nice examples. And I want to copy the second one here. I'm going to click on the copy button. Go back to workspace one. I'm going to open the config.json C configuration file on modules-right.

[00:11:27]The first one here is for battery.

[00:11:29]Whenever you want to use a module, you just need to check what it's addressed by.

[00:11:34]And as you can see down here, we have the settings for the specific battery module. What I'm going to do is replace this with what we copied. Now, if you're using a nerd font with your terminal emulator, you should see these icons here. And the format for this will be the capacity, percent symbol, and the specific icon. Again, if you need to see more information about what each of the options does, you just need to go to the wiki, go to config, and you'll find more information. This line here, I'm going to delete it because I just wanted to autodetect the battery, and I'll save this. You'll see the module here on the right hand side with the capacity, percentage, and the icon. And for right now, I want to also delete this. We're going to add something for this later.

[00:12:17]Over here in modules, right, we're going to delete clock and save. Now, I want to update the styling for battery. I'm going to open the file explorer. Go to style.css.

[00:12:29]Down at the bottom, we can modify the styling of battery with # battery. I'm going to do a border radius of 2 pixels.

[00:12:37]Add some padding. I want to do five pixels for the top and bottom and eight pixels for left and right. And for the background, I want to use my second to last darkest color, which is at dark-8.

[00:12:50]I also want to add a margin to this.

[00:12:53]Let's do 5 pixels for the top, 10 pixels for the right, 5 pixels for the bottom, and 0 pixels for the left. I'll save this. That looks pretty good. I'm going to increase the border radius here.

[00:13:04]Let's do 8 pixels instead.

[00:13:08]All right, I'm going to go back to the config.json C file.

[00:13:12]Go back to the browser in Workspace 2.

[00:13:14]I'm going to click here on Bluetooth.

[00:13:18]Then go down and I'm going to copy this first one.

[00:13:23]Go back to workspace one. And at the bottom, paste it. I'll remove this first line. For the format, I just want to display the Bluetooth icon. If disabled, show nothing. When connected, I want to show the number of connections. But I don't want this connected string here.

[00:13:38]We also need to go to the top and on modules right add Bluetooth and then save.

[00:13:47]We'll fix the styling for that in a little bit. Let's add some more. For the CPU, I want the following. Again, all this code will be in my repository and blog post. This is the format and how quickly it should update. I'll add another for the memory here. I want it to update every 30 seconds. This is the format and the format of the tool tip. I got most of this just from the wiki and making slight modifications here and there. Next, I'll add the following for the network. It has different icons for Wi-Fi, Ethernet, or disconnected. This is for the tool tip and max length.

[00:14:18]Then, I'll add the following for the clock. This is the format for it. It uses a specific syntax where each of these letters means a different thing.

[00:14:28]in the wiki. If you're in the clock module over in format, you can click on this link here to get more information on what each of the letters does. For example, lowercase A is an abbreviated weekday name and lowercase D is the day of the month as a decimal number. This is for the tool tip. It'll show a small calendar. And I just want today to be highlighted in blue for the calendar tool tip. Then let's go back to the top in the center instead of the window name I want to change this to do the clock. Then on the right I want to do battery Bluetooth then the network CPU and memory and save.

[00:15:11]That's looking pretty good. As you can see the formatting for the clock gives us the abbreviated weekday name of the month the month name and the time in 12-hour format. And then the tool tip, which is what we see here when I hover over the module, just shows me a calendar of the month with today's date highlighted in blue. On the right hand side, we have the new modules as well.

[00:15:33]They don't look that good because we need to style them. Going to open the file explorer. Go to style.css.

[00:15:39]Over here in battery, I'm going to add those other modules we just added to the bar. I'm going to do Bluetooth, network, CPU, and memory.

[00:15:53]Perfect. They look way better now.

[00:15:55]You'll see that each of them have tool tips, too. If you hover over them, you'll get more information.

[00:16:02]The icons and everything looks proportional because of the nerd font that we decided to use, which is the Jet Brains one we added up top here earlier.

[00:16:11]Let's go back to the configuration file.

[00:16:14]Go to the bottom. Now, I want to add something for the volume levels. The pulse audio module is perfect for this.

[00:16:20]I'm just going to do something simple with the following. We'll have the volume percentage and the icon. This is how it'll look like when muted. And these icons will depend on the volume level.

[00:16:32]If I go up top in modules, right beginning, I'm going to add pulse audio and save. You'll see it up there. If I change the volume with my keyboard, the percentage will change and the icon will change as well. I'll go back to the bottom. Way bar also has a really nice audio slider. I'm going to add it down here. It's pulse audio/slider and I'm just adding the following options. I'll save this as well. Now, before I actually add it to the bar, let's add some styling for this. Let's open the file explorer. Go to style.css.

[00:17:06]Go to the bottom.

[00:17:09]Then, I'm going to add the following here. This is to hide the icon for the slider itself. Over here, we're configuring the trough of the slider.

[00:17:18]I'm using dark 7 for the background. And this is the highlight color, and the color of this will be my highlight variable. I'm going to save this. Go back to config.json, go to the top, and in modules-right after pulse audio, I'll add pulse audio slash slider and save. Perfect. So now we have an audio slider here. If I click down and drag, I can change my volume levels. If I use my keyboard, I also see the change reflected. Now, what I want to do is to actually group these two modules together. It's really easy to do this with way bar. I'm going to go down to the bottom to create a group. You do group slash and the name of the group.

[00:18:01]This is going to be volume. Then you need to specify the orientation.

[00:18:06]I want this to be horizontal. And then the module. So this is going to be an array and I want this array to include pulse audio and pulse audio slash slider.

[00:18:19]Now if I go back to the top in modules-right, instead of listing pulse audio and the slider separately, I'm going to select these two, delete them, and we're going to change this to group slash volume.

[00:18:35]I'll save. So now we can style the group. If I open the file explorer, go to the style. What I want to do is to go up here where I'm styling all of the different modules on the right. I'm going to add here the name of the group which is # volume and save. Now I also want to add #pulse audio slider. I want to remove all padding for it. I want margins overall to be 0 pixels and margin left to be 8 pixels and then save.

[00:19:12]All right, so the bar is looking really good right now. We're going to add a custom module for the currently playing media. I'm going to close Neoim. Then we'll need to install a couple of different things. Make sure you have player ctl installed so that we can get information about the currently playing media. It's a really good tool for this.

[00:19:32]Then I'm going to create a new directory called custom_modules.

[00:19:37]I'll also do one under custom modules called media.

[00:19:44]I'll open neoim. Open my file explorer.

[00:19:47]Should look something like this. I'm going to add a new file here called media-now-playing.sh.

[00:19:55]This is going to be a shell script. I'm going to add the following shebang line and the following with playerct. We're going to output the title and the current artist. Let's save this.

[00:20:07]Now that I've created this shell script, I'm going to open the file explorer. Go to config.json C. Go to the bottom and I'm going to add custom custom module and then slash and the name will be media now playing. And then we need to do exec and the path to our shell script which is located in tilda slash.config/waybar/custom modules media and media now playing. Now because we don't know exactly what the output of this is going to look like. It might have some special characters and such. We want to set escape to true. And I don't want a tool tip. So I'm going to set tool tip to false. And we can also set an interval so that it updates every certain amount of time. Let's do 1 second. We're going to change this in a little bit. Something went wrong here.

[00:21:00]It's because of this missing comma. I'll save again. And then I need to open my T-Mo panes and run way again.

[00:21:09]All right.

[00:21:12]I'll go back to the top and on modules left I'm going to add custom slashmedia now playing and save. Now I also forgot that we need to change the permissions of the script. Let's close neoim. Then we're going to do chod plus x custom modules media and media now playing.

[00:21:37]I started playing some music on YouTube.

[00:21:39]It'll work with most media players. And I'm getting this output in my bar for the title of the video and the artist.

[00:21:46]Now, what I want to do is to limit the length of this text and make it scrolling. To do this, we need to install two different packages. We'll do yay-ash python- setup tools and zcroll. The package that we want is zcroll, but it also needs this other python package.

[00:22:07]I'm going to open Neo Vim again. Open the file explorer. Go over here to media now playing. I'm going to replace this text with the following. We're going to use Zcroll. The max length is going to be 20. It'll scroll with a delay of 0.3.

[00:22:22]This will make it so that it checks for updates automatically. We won't have to use the interval option. Then, and here we're using the same command that we used earlier. We'll ignore errors. And I don't think we need this and sign at the end. Then down here at the bottom, we use wait to keep the script running. I'm going to save this. Open the file explorer. Go back here to config.json C.

[00:22:48]Go to the bottom. I'm going to remove this interval here and save.

[00:22:54]And there we go. Now we have the same text, but it's scrolling with Zcroll. If you change your media to something else, it'll automatically reflect the change.

[00:23:04]Now, I want to add a couple of more things to make this even cooler. I'm going to open the file explorer. Under media, add a new file. This is going to be a new script. I'm going to call it media animation.sh.

[00:23:17]I'll paste in the following. This is a bash script that I wrote that uses these animation frames and a while loop to loop through each frame to get a nice media animation when we have media playing. I'm going to save this file.

[00:23:33]Open the file explorer. Add another one.

[00:23:35]This is going to be media time.sh.

[00:23:39]And this one is going to be very simple.

[00:23:41]It'll look something like this. This will just output how much has played of the song and the total length. I'll save this. Close Neovim. And then I'm going to do chmod plus x custom modules/media starst star to just do this for everything in that directory.

[00:24:01]Then I'll open neoim again. Open my file explorer. Go to config.json c. Go to the bottom.

[00:24:11]I'm going to select this and copy it twice.

[00:24:17]Add the missing commas. The second one is going to be custom slash media animation and the location is under media media animation.sh.

[00:24:30]We don't have to use escape for this one as we know what the output will be and we won't have any issues. Now this last one will be called media time and the script is under media. It's called media-time.sh.

[00:24:46]We'll keep escape here and the tool tip will still be false. I'm going to save this. I'm going to create a group to group all of these together. It's going to be called media. Orientation is horizontal and the modules. The modules will be an array with the three custom modules we just created. We'll have the animation first, what's now playing, and the time information.

[00:25:14]I'll go back to the top and in modules left, we'll go to the end instead of custom media now playing, we're going to do group slash media and save. If it's paused, we have the pause icon. But if I play the media, we'll get the animation.

[00:25:31]The time isn't updating. That's because we need to set an interval for this. If I go to the bottom and in the media time module, we'll do interval of one and then save. And I'm going to resume the media and the time will now update accordingly. That's awesome. We just need to apply some styling to this.

[00:25:52]I'm going to open the file explorer. Go to style.css. Click to the bottom. Then we'll add the following. This is the text color for everything in the group.

[00:26:01]The margins, it'll have 80 pixels of margin to the left. font size and margin for the animation, the margin for what's now playing, and a different color and font size for the time. I'll save this.

[00:26:13]That looks awesome. If I resume, it'll look something like that. Really cool.

[00:26:20]A final styling thing I want to change is the following. This is just for the tool tips. I'm going to use the variable dark 9 for this with a 5 pixel border radius and a color of white. And then save.

[00:26:33]Now the tool tip should look something like that. Pretty nice.

[00:26:37]The final thing I want to do here is to open specific applications that will help us whenever we click on one of these modules. I'm going to open the file explorer. Go to config.jsonc and I'm going to look for the clock module. All right. And then you can add a click handler by doing on dashclick.

[00:27:00]And I'm going to do execu open chromium.

[00:27:05]I want to open it as an app. Google calendar.

[00:27:10]If I save this now, if I click on the clock module here in the center, it'll open up Google calendar over here in Bluetooth. When clicking on it, I want to open up Ghosty.

[00:27:26]Specifically wanted to open up Blue Tuy.

[00:27:29]This is a tui for managing Bluetooth connections. You'll have to install it.

[00:27:33]If you want to use this, you need to use the - e option. And then I want to provide a title to this window like so.

[00:27:40]And it's going to be called blue tuy.

[00:27:42]I'm missing a comma here. Save again.

[00:27:45]And I need to restart way bar.

[00:27:50]For the CPU, I'm going to add the following. It'll open up ghosty with btop. giving it a title of Btop.

[00:27:58]For the memory module, I want to open up HTOP instead. Again, you'll have to install these. When clicking on my network module, I want to open up NMRS, which is a nice guey for network manager. You also need to install that.

[00:28:14]Now, for pulse audio, when clicking on it, I want to open up Pavle Control.

[00:28:19]And then down here over in the media now playing module, I'm going to add the following three lines so that we play pause when clicking on it, go back when clicking on the scroll wheel, and go to the next media when right clicking.

[00:28:35]Let's save that.

[00:28:37]Let me show you these changes in action.

[00:28:40]If I click on the volume module here, it'll open Pavo control. If I click on Bluetooth here, it's supposed to open Bluetooth. I have a syntax error. When you're writing this, make sure that this title argument goes right after ghosty.

[00:28:57]Like that. All right. I click on it again. There we go. So that opens blue TUI. If I click on the network one, it'll open NMRS.

[00:29:06]The CPU one will open BTOP.

[00:29:11]And this last one will open HTOP.

[00:29:15]over here. If I click on the scrolling text, it'll resume the media or stop it.

[00:29:20]If I right click, it'll change songs going to the next one. And if I middle click, it'll go back.

[00:29:28]All right, that's perfect. I'm going to close Neil. So, I'm going to navigate into tilda.config/hyper, open the hyperland.l file, and I'm going to look for hyperland.start.

[00:29:43]And in here I'm going to add the following three lines that we start way and we should also start the player CTL Damon whenever Hyperland starts.

[00:29:56]All right you guys, that's it for this video. I hope you enjoyed it. If you did, don't forget to leave a like down below, subscribe to the channel, and let me know if you have any questions or feedback in the comments. See you guys in the next one. Peace.