 I3 is my favorite window manager and despite me betraying it a little bit by choosing to use Qtile for the last few weeks, I still really do prefer I3 in many areas. And I recommend that I3 be the beginner's window manager for a lot of people, simply because it's very easy to configure. And even if you are a longtime window manager user, I3 is fantastic because it has a lot of features and a lot of extensibility that you can build in yourself and you don't have to worry about messing around with Python or C or Haskell or something horrifying like that. So if you are in the process of starting to use I3, you've probably noticed that out of the box you do get a bar. Now I3 bar is very extensible, but despite that a lot of people don't actually use it. They cancel out the bar code in the configuration file and they then use something different like Polybar. I know I do this. I know many people who like to rice do this. But a lot of people just kind of want to use I3 as it comes. So today what I'm going to do is show you how to use a application called I3 blocks. Now basically what I3 blocks does is it allows you to put modules or widgets or however you want to say into your I3 bar. And basically what these modules, widgets, things are are things like the time, volume, control, whether basically anything, it can just be a regular bash grip, whatever you want. You can put that inside your bar using I3 blocks. Basically I3 blocks allows you to customize how your I3 bar looks, specifically when it comes to the things that are inside your bar. So let's go ahead and show you how to install I3 blocks and then how to customize I3 blocks. Let's go ahead and jump in. So here we are in a very brand new version of I3. And this is just vanilla I3. This is not I3 gaps or anything like that. And I've just installed I3 from the Ubuntu repository. So you can even see that I'm using Ubuntu by the lovely aborigine color scheme I have in my terminal. It's fantastic. I don't know why anybody would ever use any other color, but anyways. The first thing you'll want to do is install I3 blocks. Now there are two versions of I3 blocks that you can get. I3 blocks, the regular, which you can do pseudo app, install I3 blocks, something like that. That's the easiest way to do it, but there are certain limitations that you'll find by using this version of I3 blocks. And the main one is that the background property for each of the blocks that you use is not there. You can't use background, at least with this version of I3 blocks. I don't know if it's because this is an older version of I3 blocks or if regular I3 blocks doesn't have that option for you to use. So I don't actually recommend you use the I3 blocks that's in the Ubuntu repositories. Instead, the one that I recommend you use is one called I3 blocks gaps. Now, despite the name, you can use I3 blocks gaps with regular I3. You don't actually have to use I3 gaps in order to use it. And the reason why I suggest you use this one is because it allows you to change the background of the blocks. It may have other functionality beyond that, but that's specifically the option that I've went looking for and found lacking in the standard I3 blocks version. So if you're going to use the standard I3 blocks version, you'd find this right here. So how do you install I3 blocks gaps? Well, it is not in the repositories as far as I know. I've actually, to be honest with you, I didn't try. So actually, I could try that pseudo apt install I3 blocks. Oops, you got to actually spell right, Matt. Gaps like so. Nope, not there. I didn't think it was. So how do you install it? Well, it's really actually really easy. So I'm going to CD into my downloads folder so that I can do this from a regular directory instead of doing it from the home directory. And it's really just simple, simple. All you have to do is copy this line here. So you're just get cloning the repository. So you'll need get in order for this to work. We'll copy that line there. So I don't actually, actually you'll need, as I said, you'll need get in order to do this. So I'm going to do pseudo apt install get and Vim because I'm going to need both of those things. Now that we have that in, we can CD into I3 blocks. Actually, we can paste that line again because we'd actually clone it. Now we can CD into I3 blocks. I do know how to use Linux. I do know how to use Linux. And then if we do an LS here, it has all the stuff we need in order to make this work. So once you've cloned the repository, you'll want to do make clean all, but chances are on a vanilla version of Ubuntu or Debian, you're not going to be able to run this command at all. It's going to tell you that clean does not exist. So you can install just clean. But the best way to do this on Ubuntu is to do pseudo apt install build essentials or essential. Just like that. It will install all the stuff that you'll need in order to actually make this package. Now if you are on Arch, you're not going to need any of this stuff because you've already installed this when you install Arch. Actually if you're on Arch, you can just install I3 blocks gaps from there you are, which is what I would recommend you do. So once you've installed this package here, which I've actually already done, you can then do make clean all just like so it will give you an output that looks like this. And then you do pseudo make install. And it will give you an output that looks like this. Now you have I3 blocks gaps installed. That's all you need to do for installing it. Once you've installed it, the next part is actually really easy. So what we're going to do is CD into .config. If you can type, let me actually zoom in here so you can see, so you can see we're in the .config folder. And this is where my I3 configuration file lips. Now for you, it may be in different places. It may be in .I3 in your home directory. It may be somewhere else. It really depends on how you install I3. Chances are it's going to be in .config, however. So we're going to CD into I3. And if we do an analysis here, we see there's a configuration file. So if we them into config, now you can obviously use nano. I'm going to use them because I'm not a barbarian. Anyways, your Aledias is showing there. Use whatever you want. It doesn't really matter. Just whatever text editor you want to use. Stop judging people. It's okay. At the bottom of the file, go to the bottom of the file. You'll see these three lines here, bar, scrollie bracket, and then the status underscore command I3 status. I3 status is this default bar that you get out of the box with I3. It has all these modules here. You can use that. And if you're interested in a video on how to customize I3 status, make sure you hit that like button and leave me a comment. I'd love to hear from you. But to use I3 blocks, all you have to do is change this word here from I3 status, I3 blocks, and then do this, right? And then restart I3, which is super, shift, and R. You can see now the bar is completely different. It has mostly the same modules, but the font has changed. And you can just see it's different there along the bottom. So once you've changed I3 blocks and you've restarted I3 and got this, the next thing you'll need to do is start configuring it. So let's go ahead and go to another workspace here. We'll clear out of this and I'll zoom in so you can see. So I'm going to CD into .config. Now what I'm going to do is I'm going to make a directory, so mkdir. I'm going to make a directory inside .config called I3 blocks. And then I'm going to CD into I3 blocks, like so, and this is an MP directory. So if we do an LS, there should be nothing inside. Now the next thing you'll want to do is go to a browser somewhere and find this particular get repository. Now this get repository will be linked to in the video description. It is the I3 blocks can trip repository. And this is this works with both I3 blocks and I3 blocks gaps. So it doesn't matter which one you ended up using. And you'll need to clone this. So we're going to grab the URL. We're going to go back to our terminal here and we're going to get clone and then copy that URL. It's going to do its thing. And if we do an LS here, now we're going to see I3 blocks can trip. Now what I'm going to do next actually is going to be I'm going to move I3 blocks can trip to just scripts. And if we do an LS now, we can now see that that folder is now named scripts. And we want to CD into scripts and do an LS here. And now what we want to do is CP config.example into .slash, oops, ..slash, excuse me, config, just like so. So if we CD up whole level now, if I clear this into an LS, you can see now we have a configuration file. Now this is the easiest way of probably of getting the configuration file that you'll want to use. It does have a default configuration file somewhere in your root directory, but it's just easier to download this particular repository and use the example configuration here simply because you're going to want all those scripts anyways. So it just you're going to eventually clone this repository. You might as well just do it and then use this config file here instead of having to go splunking into your root files as defined the default configuration file for I3 blocks. So just do it this way, it's easier. So now if we do a refresh of I3, we're going to see that our bar has changed quite a bit. And that's because the only script by default that works with the way we have it set up right now is the clock. Okay, so once you have your configuration file here and you restarted I3 and you've seen now that there are basically no blocks down there, you need to create a script directory variable. And you can do this in several places. For me personally, I prefer to do it in the I3 configuration files. So if you go back to your I3 config file, you go back to where it defines the bar, just do something like this. So script underscore dir equals tilde slash dot config slash I3 blocks slash scripts. Basically this is just going to be the file that where all your scripts are stored. And your scripts are analogous to your blocks basically every block or item that appears in your bar is going to be a script of some kind. And you can use the default scripts that I3 blocks comes with, or you can download the repository like we did. I prefer using the repository simply because it comes with all the scripts you'll ever need. So once you've done this, write this, and then to make sure we don't have an error, we're going to restart I3. And we don't have an error. So that means we did it right. If you ever end up in a situation where your blocks are not showing chances are it's because your scripts aren't in the right directory as defined by this variable. So always make sure it when you're having problems in the future or if you have problems in the future to check this variable, make sure it's right. Okay. So now we can go back to the I3 blocks configuration file and we can them into that. So this is the I3 blocks configuration file. And now we get into the fun stuff. So there are a few things that you should know going in. So these are the properties that each module or in this case block can have. And there are a couple extras that aren't actually listed here, including the background one, which I talked about earlier. So we'll talk about that here in a few minutes. But these are most of the properties that you can assign to each block. At the top of the configuration file, there are a few global properties. If you want to change how far between each block, the separator is, you can change the separated block with here. You can also change the script directory from here as well. I prefer to have it in the I3 configuration file. Like I said before, it just seems to work better for me. After the global properties, we get into the fun stuff. So these are all the blocks that you have. So by default, you can see volume, memory, memory again, disk, network, so on and so forth. And these each correlate with one of the scripts that we downloaded earlier. So if we zoom into this here, cd.config, I3 blocks, scripts, and do an LS here, you can see each one of these is a directory that has a script in it. So if I CD into volume, for example, we do an LS here, you can see that there's a script denoted by the color green in this case, that will output the volume of the system. So if I just run that dot slash volume, like so, it's going to tell us that the volume of my system right now is at 100%. So you can do that with any of the scripts. That's basically all the blocks are are scripts that output something to the bar. So usually in the form of text or icons or something like that. So each one of these blocks is going to correspond with one of the scripts that is in this file. So you can use any one of these for your bar, or you can create your own. Remember that each of these just contain a bash script of some kind. You can also use Python if you wanted to, anything you want, you can go ahead and just create your own if you just follow the template of how all of these are done and you can make your own. However, we're going to just focus today on the ones that are available to us in this repository that we pulled down. So as you can see, the way this works is that the blocks are output onto the bar from top to bottom. So if volume is the number one block listed in your configuration file, it's going to be the first block that appears on the bar to the left hand side. Date is the last one that is not commented out. As we can see right here, I suppose they call it time that is going to be the last one that appears on the right. Now, as you can tell, none of these actually show up by default, even though they are uncommented. And you're probably wondering why that is. Well, the answer is because you have to have one extra line. So they don't put this in there by default. In order for this to work, you have to put this line in there by yourself. So you want to put this line here command equals. And then here's where you're going to use that script directory variable that we created earlier. So it's going to be dollar sign script underscore dir and then slash volume slash volume. So it's going to be the directory where the scripts at and then the scripts name itself. So as I showed you earlier, when we seeded into volume, there's a script in here called volume. And that's basically the path we want to go with. The path to the variable. So in this case, now if we save this, and then restart I three, we're going to see that we now have a module down here in the bottom at the bottom that says volume 100%. It's as simple as that. Now if we wanted to do memory, we'd have to do the same thing. So with the memory one, we go to here and we do command equals script underscore dir and then slash memory, I believe that's going to be the one that we're going to look for memory right here, probably. And then I believe if we seeded into memory, the script is just going to be called memory. So we can just do slash memory. And we save this, we're going to refresh. And we're going to now see we have a memory module or block right here. And it's really as simple as that. And you do that for every single module you want. So this one here is for swap if you wanted to do swap. So it's this one here uses the uses the exact same script. So we do command equals script underscore dir slash memory, memory. And we write that we start. And now we can see that the swap is exactly the same just like that. Now I don't think that that swap is correct, but it does show that it's different than this. So it's must be working fine. And you do the same thing for this use disk usage, you do the same thing for your network, the Wi-Fi, the bet the bandwidth, you would just always enter that command equals. So in this case, we're going to do command equals. And then script underscore dir, I believe Wi-Fi is also a script, which it is. So we're going to do slash Wi-Fi slash Wi-Fi, I'm pretty sure that's probably going to work. We're going to go ahead and write that reset. Now obviously, I do not have Wi-Fi in this virtual machine. So that's not going to show up, but that's how you would do it. You do that for each module. And if the module is not here by default, you just emulate how this stuff works. So each of those things that we saw at the top, these properties, you can put for each of the blocks that you use. So each of these blocks can have each of those properties. So probably the ones that you're going to want to mess around with the most is color. So for example, with this, you do color equals. And then let's just say you wanted to have red. So we're going to go find a color picker somewhere. So now we have the hex color for red, and we just paste that there. If we save that now, the volume color will be red. And if you wanted to have it have a background, and this is where using I three blocks gaps actually comes in, we just use background equals. And then this makes sure that's just for for giggles, make it white. I just happened to know the white code will do that. Everything will save it now that the background color should be white. And that's how you do that. Now, pretty much you now know everything that you need to know in order to use I three blocks. You have all the scripts you could possibly ever probably want. And you know, easily enough, if you want to create your own, just emulate the ones that are already there, copy and paste if you want to, and then just use your bash scripting skills, create your own script, and then put it in here as a module. It's as simple as that. Be sure to give the command equals scripter to your particular new script, and it should appear just fine. Now, there are a couple of things that you should know before we end this. So the first one is that you'll notice that in between some of these, there is a separator, not between all of them between some of them. Unfortunately, that's a little weird, and it's not great. So what we're going to do to change that is go to your I three configuration file, which we still have open here. So in order to remove that separator and just have a blank space, you would go back to your I three configuration file, and you copy this line here. So separator underscore symbol, and then two quotation marks inside of those you'd want brackets 200 B, that's just going to allow you to have a space. So if we save this now and restart I three, the separator is now gone. Okay, so that is taking care of one problem. Now, the next thing you'll probably want to know is how to do icons. So let's just say we wanted the volume icon for here. Now, you'll need an icon font of some kind in order to do this. So I recommend nerd fonts. You can download all the nerd fonts if you want, or you can just download the one that you want. So that's what I'm going to do. I'm going to go ahead and go to nerd fonts here. I'm just going to search nerd fonts in Google here. And we'll go here and then downloads. And we'll find JetBrainsMano, which should be in the jays. If you know your alphabet, which sometimes, not always, sometimes. So I'm just going to download that and now open up a terminal. We're going to make a directory called dot fonts inside the home directory. Like so, and I'm going to cd into downloads where we just downloaded that JetBrainsManoNerdFont. We're going to move JetBrainsManoNerdFont to tilde slash dot fonts. Like so, cd back into dot fonts again. Matt, I can't type with a dam and we'll see that's here. Now, in order to unzip that, it should be really easy. Most Linux systems are going to have the ability to just unzip this from the terminal. So I'm just going to unzip and then JetBrainsManoNerdFont, just like so. If you do not have the unzip command, you can easily install it just by using your package manager. It should be fairly simple. We're going to do that. And now if we do an LS here, we now have all the nerd fonts that we could possibly want in terms of JetBrainsManoNerdFont at least, we can close this now. So now that we have that, I can show you how to make a icon. So some of them already have it. So if we just uncomment that line there and then save the file, we can then see that the volume has, at least in theory, has a didn't actually work. Not sure why it didn't work. Oh, I know exactly why it didn't work. So that's going to use a different font. So first you want to go up here to markup where it says markup and change just pango like so. If your icons aren't showing up, try that first and then we'll refresh this and that still didn't work. And then we're going to go when that doesn't work. The next thing that you want to do is go back up here to into your i3 configuration file and change the font from mono space to something different. So in this case, it's going to be so we'll change this here to jet brains. Mono if it's type nerd font again, can't type or the dam. We'll make it a little bit bigger. So first that and there we go. Now it still does not show the icon probably because the icon is not in this particular icon pack. So we're going to go back to the browser. We'll go back here to go to icons, search for volume. Like so we'll just use one of these. It doesn't really matter. We'll copy the icon, go back over here to the i3 blocks configuration file, change this to this. Now this particular terminal doesn't use a nerd font. So it's just going to appear as a funky symbol. But if we refresh, we should and we don't. Why don't we see the, oh, you want to, I know why I'm an idiot. Okay, I do know how to use Linux. I do know how to use Linux. If we come out this line here, we cannot have two labels. You can only have one. It's, there we go. There you go. Now the icon is showing up. I did know how to do that. Okay, we can do the same thing with memory. Go down here to memory, change this one here from memory to a font icon of some kind. So we'll just search for memory like so. Ooh, there's an icon from memory and we'll paste that and then we'll write that if we can and then restart. And now memory has an icon as well. We can do the same thing for a date if we want. So we just go back here to this search for clock. And then we have a clock right here, copy that icon, go down to time. Oops, gonna make sure in the right one, time like so. And then here you can see that it doesn't actually have one already forced so we can change. We just create a line here, do label like so. Obviously spelling it right. Copy the icon, write that and then refresh. And now the time has its own icon. So that's how you would add icons. And obviously you can go through and make sure that each of these blocks has their own colors if you wanted to. So just do color equals pound EBB 258. I have no idea if that's a color or not. We're gonna find out. Yeah, it turns out it's yellow. That was just pulled, I knew EBB was yellow. I think I did that. Right, anyways, that's how you would do that. And it's really quite easy. Now, another thing that you'll probably wanna know about each of these blocks is that there are certain properties here that control how often the block updates. So the main one you wanna pay attention to is the one that says interval. Basically that's a fairly simple way for you to control how often each of these blocks that you have in your bar updates. So you can either have it like volume where it will control it so that it updates whenever the volume changes, which is interval equals once, or you can have it set to a second values. So you see that example in the memory module here where we have interval equals 30. Basically what that means is that it updates every 30 seconds. Like I said before, every single module that is here, every single block that is here can use every single one of the properties that are listed here up at the top of the file. Obviously this is just scratching the surface of what i3 blocks can do. So the best thing I can recommend for you is to go to Unix porn and search for i3 blocks. If you do that, you can see just some of what i3 blocks can do. And you can have bars that look like this if you want. This is i3 blocks just like I've been showing you but with obviously a whole bunch of customization. Now I'm again, not going to show you how to do this because this is a little bit complicated, but because most people share their .files online, you can go down here to this person's .files, see their i3 blocks configuration file, just like we have i3 blocks right here, config, and it shows you exactly how they did all of that cool stuff with those arrows, just like so. And there are tons of i3 blocks examples here on Unix porn, all you gotta do is this is one option. And by looking at other people's configuration files, that's a great way to actually learn how to do this. I've given you the basics, hopefully that gets you started. So that is a very brief tutorial on how to get started with i3 blocks in i3 window manager. i3 blocks is not my favorite way of making a bar. I find it a little bit limiting, but mostly because I'm more used to using something like Polybar, which I have made a tutorial on it. Also, I'll leave that link in the video description. So if you have comments about this, you can leave those in the comments section below. If you have questions, leave those down there as well. I will try to answer them. I'm somewhat constrained for time, but I usually try to answer the questions. And if I don't answer, someone else might as well. You can also join the Discord server and ask for help there. If you need help, I'm usually trolling around there most of the day. So you can follow me on Twitter, at the Linuxcast, you can follow me on MasterDown and Odyssey. Those links will be in the video description. You can support me on Patreon at patreon.com slash the Linuxcast, just like all of these five people. Thanks to everybody who does support me on Patreon and YouTube. You guys are all absolutely amazing. Without you, the channel would just not be anywhere near where it is right now. So thank you for your support. Thank you so very, very much. Thanks everybody for watching. I'll see you next time.