 Hey everybody, welcome back to the channel. Today, we're going to take a look at how to rice i3 if you're a beginner. Now, I will say that I am a long time user of i3, but it's been a long time since I've been a beginner. So it's going to be hard for me to pretend that I am one, that I are one. So just we're going to try to go about doing this in a way that's easy to understand. So I've installed i3 on Manjaro and I've made no customizations to the configuration file at all. The only thing I've done is had it generate a configuration file and chosen the windows key as the modifier key. That's all I've done. There was a i3 config error, which I'm going to fix here in a second. I'm going to show it to you before I jump into that. I will just want to say the three things we're going to focus on theming today are the bar, the wallpaper and the borders and titles and stuff. So just the basics. There are several other things that you can do. I'm not going to focus on theming your terminal because everybody uses a different terminal. I'm not going to focus on theming D menu or any of those things. That'll be for another video or another time. So let's just go ahead and jump in to the main view here. Now this is the i3 simple terminal, I believe is what it is. That's actually we can actually look. I think it will tell us here. It's actually the XFCDE terminal, interesting. Okay, so we just clear that out. As you can see, I have an error up here. This is because for some reason there's two key bindings for mod D. I'm not sure why because this is the standard i3 config file. So let's just cdn to .config i3. If we do an ls, there's just a config file in here. So we're going to let me zoom in here actually. I'm going to them into the config file and this is the config file. There's lots and lots of comments here. The first thing we're going to do is search for that error and fix the error. It's going to actually the first thing is how we're here. We're going to change this to that this is termite. Okay. And let's see here, and we're going to change this to mod q so that it's more convenient for me. See, for whatever reason, we have two D menus here or two mod Ds here for some reason, we're going to need to comment out this one here. Okay, and then just save this. And I want to make sure that when I restart i3, I don't lose the video. So I'm just going to do mod ctrl r. And it looks like it's still recording just fine, which is good. And we got rid of the error, which is good. That means we should be able to quit this by hitting mod q, which we can. And then if we hit mod enter, we get termite good. Let's see you back. This is person back in CD back into dot config i3 and then config. And the first so the first thing we want to do is change the wallpaper. Now, there are many ways you can do this. One of the ways probably the easiest way I would say is use a program called fat, you can use fat or you can use something called nitrogen. Either one will work fine. I'm going to use fat fat f e h today, mostly because it's just easier and I can do it right from the command line. So let's go ahead and actually quit this because we don't need actually we can just move to another. We just moved to another workspace and do this now. If you don't have fat installed, it's just pseudo pacman dash s fat. Oops. Okay, it should also be in the Ubuntu repository. It's probably in you probably can download it from get or something and make it yourself. That's something that you're interested in doing. I'm just I've just already installed it via I cannot type my password for whatever reason. And see, I've already installed this. So I'm just going to cancel out of this. No, so the cool thing about fat. So right now if we look at the wallpaper, we have this wallpaper. Now you probably don't have this wallpaper, it's probably just a black screen. Because on Manjaro, it's going to read a file that has the default system wallpaper in it. Chances are you if you've just installed this like on Ubuntu or regular R or something, you probably just have a black screen. We'll we go back here to workspace three and do fat dd bg fill I believe. And then we just do I don't know. We can if we do this and do open up Nemo, which is my file manager and look for a picture in the wall walls. Walls. It doesn't really matter. We'll just do one will do one three one JP JPG. So do three. So pictures, walls, one three one. There we go. And if we know if we change to a rank screen, we've changed your wallpaper. That's step one. That's the easiest way to customize I three job done, right, as they say. So if the problem here is how do we get this to be your wallpaper every time we reset I three. So if because if I go through and do mod shift R, I mean it stayed this time. But sometimes for probably for you, it'll actually go back to the black screen. So we need to be able to reset or restore this every time. This is where the configuration file comes in. So if we go to your to the bottom, there's probably not a section in here that actually has a spot for auto start. But so we need to create one. So if we just do insert and go to the bottom here and do exec underscore always fa dash BG dash fill dash dash BG fill. And we're going to do colon sign home slash pictures slash walls slash and then whatever that the we're just going to call this dash dash dash dash 131 can never I should have chosen one with an easier. We just go here and do it was this one here. Let's do apparently a Nemo. You can't we should be able to this control C V. There we go. And that will make sure that every time we restart the computer or every time we restart I three, the same thing the same wallpaper will come up every time so we can just exit out of insert mode and save this. Okay, now that we have the wallpaper set, which I want to make sure that we still do which we do. The next thing we want to do is customize the bar which is that little thing down there at the bottom which you can barely see probably on the screen. Now there are many different status bars that you can use in I three. You can use I three status, you can use I three bar, you can use I three blocks, you can use poly bar, you can use lemon bar. There's just dozens of these things, which one you use really depends on which one you have the most experience with and I've decided today to choose one that I have no experience with at all is called bumblebee status. Now, let me go to the GitHub page which I have open up here. This is bumblebee status, it's on GitHub. I have no experience that I have no experience with this at all. So we're just going to be winging winging it. I done a little bit of tried to do a little prep work here, not necessarily been so successful, but we're going to give it a go anyways. So we're going to try this from the AUR bit. Instead of using an AUR helper, which will install this thing and like user share, I'm going to try to make it so that it installs it in my I three config. So I'm going to open up another terminal here and CD into config to I three. And we'll get on now in order to do this, you will have to have get installed. So I'm just you control C, V, and we're going to get clone that. And then we're going to CD into the bumblebee status. And what we should be able to do now is do this one here. And we need a password. Okay, and then yes. Yep. And we're installed. So we can just clear out of that. Now, if we do another LS, we should be able to think we have nothing actually here. This is the problem. If we do a locate now a bumblebee status, and do CD, CD, and we do a will do find do a find one will be so that found nothing will CD up a level or two levels, I guess, and do an FD bumblebee status. Yeah, see, it moved it to bin. Oh, I bet you could use. All right, because the reason why I'm trying to find this is because we need the location of bumblebee status, which should be this here. So we're just going to copy and paste this controls or see, we'll go back over here. Actually, I'm not quite done with this, we can close this though. And we can go through and do what let's see. We need we need this here. Of course, I'm going to end up I don't have my clipboard manager here, so I'm gonna end up having to go back through and find that again. So we we're not I three config now, we're going to want to delete these lines here here. And control should be and paste this here. Alright, and we want to delete from here on. So this was you slash user slash bin, I believe slash bumblebee status. I believe we'll see if that works. It's probably not a slash afterwards. So the modules we want to use are these up here, we're just basically copying from these, you can use whatever modules you want, we're just going to copy these. Actually, copy this to delete this part here. And control should be. Okay, and then the module parameters are these ones here, which just basically tells it how the deform at the time. All right, delete this part here. Control should be and then the theme we wanted to use. I'm going to scroll down here. And we're just I just use this one here, the solarized one. See, control one, control should be. Now I don't think it actually has to have a brackets, have brackets around it. But so I'm going to go look just see, it has an example up here. Yes, it doesn't have brackets around it. Okay. I probably could have just copied and paste this whole thing. Now that I'm thinking about it, it doesn't matter. Go back up here. All right, now let's see if this works. The only reason why this wouldn't work is if they have the path wrong. So we'll save this. Control shift R. It doesn't in fact work. Click down here. If we want to move this to the top, we're going to have to go and look at the I three window manager. I three window manager.org. And we're going to look for the docs user guide. And we're going to search for bar. Figuring the bar. I three status. And then one of the things we can do here, I believe it's going to be allows to put it at the top. Get position top. Here we go right here. Control C. Go back here. Save this. My shift R. And it's at the top. Huzzah. And that's how you do the bar. Now, like I said, there are a numeral number of bars out there. This like I had no experience. And that was how quickly this one is. I like this because you do all of your configuration right here. And it has a whole bunch of predetermined pre made themes that you probably, you know, would have to spend hours upon hours making yourself. And like I said, if we go back to three here and go back to the number of things, you can just see how many themes there are here. We're just tons and tons of themes. Most of them are pretty similar. I will admit, but they're quite a few themes here. And they're just kind of awesome. You can also make your own. There's a way all the documentation on making your own theme is right here. It's really cool. It's really easy if it's something that you want to delve into if you don't want to use one of the pre made ones. That's cool. All right. Now, we've done the bar, we've done the wallpaper. The next thing we want to do are fonts for the title bar and colors for the title bar. When I'm talking about the title bar, I'm talking about this part right up here. It's kind of ugly out of the box. This will also take care of the colors for this. So the way we do this, so let's search for colors here. I think we're gonna, yeah, this is what we need right here. Actually, you know, I'm not actually sure this might not be the right one because this is part of the bar. Let's go to the title. Fonts, changing colors right here. All right, good. Color class. So this is gonna give us border. Okay, this is what we need to copy and paste this into our config file, which is after, so we need to put it after the bar, but before our auto start file stuff. So these are just regular hexes. So we've went with the Solarize thing. So if we go through and actually Google Solarize, Solarize Color Palp. And I obviously spelled Palette wrong. And I spelled Solarize wrong. Who needs to know how to spell? Here we go. What I needed are the decimal, the actual colors. And you're not actually gonna, of course, you're not gonna actually give me the codes. Why can't I, for the love of goodness, why can't you just give me the codes? I'm sure the codes are here somewhere, right? You would think, no, why would, hold on a second. Of course, you're not gonna label them which one's which, of course not. Why would you label them the properly? A few moments later. Yeah, okay. Well, that's completely useless. We're just going to go to use one dark script. When in doubt, always use one dark. As you can tell, I had no plans. So this actually gives me the code. So how about that? Holy crap. Let me change to a different workspace. And I'm going to move this over to there. You're not going to be able to see it anymore. But that's okay. We'll go to one here. Now, we want client focused border to be read. So this is going to get into insert mode, which we are already in insert mode. Where's the cursor? We want this E06. Actually, I believe it's E06. E06. Oops, can't type. Good Lord. I might as well just retire. This is dumb. C 75. Okay. And text can stay the same. And we'll just see how that works. Troll shift R. And we have a red border around the title. Around the title. Wonder why I didn't go all the way around. So let's, I believe this is because we need this one here to be also the same thing. Let's change this. E06, E06, C75. And you refresh refresh. I just did the background. Okay, so that's just the title. Okay. I thought this would also do the border. But I was wrong with that child border maybe. Change this. E06. This has been a long time since I've actually had to do this site. Like I said at the beginning, it's been a long time since I've been a beginner. Usually I just copy and paste my own config and I've never changed these, never changed these. Yep, that changes. So, you know, we have the red all the way around, except for this one side. Now, if you're new to two I three, that blue side there, that indicates where the next window is going to spawn. It only does it for the first one. But you can change that by just changing the indicator color here to the same color. So we do E06, C75. Okay. And now it is read all the way around. Okay, now, so that takes care of the border and the titles. We want to go up here to do the fonts. Oops, we're already at the top. I can only go to the top so many times. So this is where you do the fonts right here. This is only, I believe this is only going to work for the titles. It may not work for the bar. So if we just do, we just change this hack, nerd font and change this to 12 or 13 and do control R. There we go. It actually did do all this. So now we can see how it's bigger and it's changed the font. That was easy enough. Obviously it has to be a font that you've installed. It can't be a font that's not installed. So next, the last thing I want to do is change the color of this stuff here. So let's jump to the top here. Go to the bar. Where's the bar bar font? See bar colors right here. All right. So what we're going to do here is copy and paste this stuff here. Troll shift. Oh, we're going to need that last squiggly bracket. There's a reason why you copy and paste this stuff is because this is work. This works. Right. So just go here and go back to the bottom. And within this squiggly bracket here, control V. Okay, so the background, we want to change to let me go back over here and get my color codes to 282C34. Okay. Now we want to change this to so the way this works is color class, which is so that this is the first part here, focus workspace, border, and background and the text. Okay, so border, let's actually go through and border, back, be ground, text. Okay, very good. Now, if we change, let's see, we want the background to be, I don't care. Let's just, I mean, we don't really want it to be red. Let's make this one here the purple one C678DD. And the text can stay white. And the border would probably be best to be just the same C678DD. If we do right this and control shift R, and we have it purple with white. Now, we want that's the focused and inactive one. So it would be like three here, we can change that to, let's see, let's change that to change where ABB to BF. And we'll change this to 282C34. We'll change this to be the same as the background. ABB to B, I think I messed up. It doesn't matter, we can go down here and change it. So we, this is the one that we wanted to change those two things to ABB to BF ABB to BF. Oops, 282C34. Now if we write this control shift R, now we have changed the background. Now this also did looks like it changed some of the, oh no, I guess it didn't really change the things here. Alright, so that is a very, very brief guide to customizing I3. Now I'm going to call this part one. Eventually we'll come back in here. We'll make our own bubble beam, bumblebee status theme. Maybe we'll go through and show you how to customize a terminal or something to match it and actually have a plan for what the rights we're going to do is. I just wanted to go very briefly and show you how to write I3. I think I've done that. I've showed you the wallpaper. I've shown you how to do the bar and I've shown you how to change the font colors and fonts. Those are really the three main things you need to know. The best part about I3 I think is that it's very easy to customize. So there are just so many different ways to do it and it's easy to do. It's not something like I3. You don't have to go through and recompile it every time you've made a change. You don't have to patch it to get things. Plus the documentation is fantastic. I'm going to link to both the documentation for bumblebee and for I3. If you have any questions, you can either leave them in the comments for me. I'll probably be able to answer them. Or you can just look at the documentation because the documentation for I3 is just fabulous. It's awesome. Anyways, if you like this video, give it a thumbs up. If you didn't, give it a thumbs down. Make sure you subscribe to the channel. We're trying to get to 1,000 subscribers by the end of the year. We've made some really good progress. We're in the 170s now. I'm very happy with that because we only started in November. Go me. It's good stuff. Anyways, thanks for watching. I'll see you next time.