 So this is a video that I've been planning on for a long time and I've actually tried to do it three or four times I have like four hours of footage trying to record a ultimate guide to Customizing poly bar and it turns out that it's not an easy task It's something that is going to entail a very long and detailed video And I've tried to do it a couple different ways. They just haven't worked out Maybe someday those will be put into a blooper wheel or something because there's some really weird moments in those Those videos but the the point is this video turned out to be a lot harder to make than what I thought it was going to be But here we are we're finally going to do it I think I have a better plan than the previous times I've attempted it So what I'm going to do today is take you through the installation and setup of Poly bar as far as I can get you now There will be some things that I won't cover in this guide just simply because it would take too long But also because there are some things that are just too advanced for most users Do you even care about one of the things that I'm not going to cover that will probably affect some people and probably more People than I would like is that I'm not going to take you through the setup of multiple poly bars So if you're using this on a multi monitor setup, that's something that you're gonna have to look up on your own The problem with doing that is that it's a little finicky and it can be done in several different ways So I'm just not gonna cover it Maybe I'll make a future video if you're interested in that leave a comment in the sec in the comment section below And maybe I'll consider it so that's what we're gonna do today The thing you'll need to know first is that this is going to be a very long video I'm hoping to keep it under our so at this point at the beginning of the recording I have no clue how long this video actually turned out to be if I ended up being under an hour I'm gonna give myself a high five and it's gonna be awesome if I'm over an hour Which I probably will be if I don't shut my damn mouth then I will be quite upset But anyways the point is it's gonna be long I will try to include chapter markers in the video description as well as you know along the scrub bar there And that should make it easier to jump through the video as it is. So let's jump in to installation So here we are in BS PWM now as you can see I have no bar whatsoever Now the first thing you'll need to know about poly bar is that it's going to be configured differently Depending on what window manager you're using I chose BS PWM because poly bar really works well with BS PWM It also works well with things like I3 once you get into other window managers for example X-mone add things get a little bit dicey simply because poly bar really wasn't meant to work with them and the way that poly bar does work with them It's kind of hacky sometimes like there's a module You have to use an X-mone add in order to get the window the workspaces thing to show up It works, but it's not perfect same thing with awesome when a manager poly bar really wasn't meant to work with awesome And you have to do a lot of finagling to get it to work So for the purposes of this tutorial, we're gonna focus on BS PWM I will also try to point out the places where things will differ between this and I3 for other window managers You're going to have to kind of figure things out yourself unless I think to remember Where those things are different like I'll try to try to point out the things that are different for X-mone add But I may not remember so that's the first thing you need to know The second thing you need to know is how to install it. So let's go ahead and open up a terminal So how you install poly bar is really going to depend on what distribution you're on now. I'm on arco It's an arch space distro. So it's going to be easy for me. So pseudo pac-man dash s. Oops You're gonna have to give up. You're gonna have to live with me not being able to type It's just a thing a poly bar is how I'd install it here on arch That goes for any arch-based distro It doesn't matter what arch basis or you're on whether you're on vanilla arch Gerudo, whatever if you are on Say fedora you can do for pseudo DNF install poly bar it again can't type If you're on open Suza pseudo zipper install poly bar Where it gets a little dicey for installation is for if you're on a Debian or Ubuntu based distro Now you wouldn't think that that'd be the case right because Ubuntu is the most popular Linux distribution out there like period and Debian is pretty popular too. They're very associated and they have a lot of repos in common But the problem is prior to the most recent version of Ubuntu in the most recent version of Debian Poly bar was not in the repos So if you're on say Ubuntu 20.04 the last LTS You can't install poly bar without building it yourself You have to go through and build it yourself and refer you to actually get it It's not in your repository if you're on 21.10 You should you should be able to go through and install it using pseudo apt install poly bar Same thing for Debian 11 if you're on Debian 10 the only way you'll be able to get it is by tweaking your repositories If you're on previous versions of Ubuntu You'll have to build poly bar yourself or see if you can find someone who has put it into a like a PPA I've never found one. So if that does exist, you'll get luckier than I have been so a Ubuntu and Debian are a little not great when it comes to poly installing poly bar simply because they were not in the Repositories prior to the most recent versions Now that they are in the repositories. They're much easier, but so upgrade your Ubuntu. You'll be able to install easier And there's a reason why I am not showing you how to build poly bar from source And that's because I've never been successful at it every time I try to do it. I get an error it has something to do with Versioning of certain dependencies. I never really looked into it. I just gave up I just installed a newer version of Ubuntu and stole it from their repositories. It was easier that way So that's how you install now. I already have it installed. So that's really all I need to do Now once you have it installed the next thing you'll need to do is find yourself a config So in my case, I think I have a browser open here on three two Oh, it's two. I have a hard time finding the workspaces without a bar But anyway, so what you have to go to to this website here And I'll include this link in the video description and we need to find the configuration part So it's right here and we need to find where the default Configuration is stored and it's stored right here user share doc poly bar config And it also might be in this position here So we're gonna open up another terminal and we're going to do this CP slash user share Doc poly bar and then config. Okay, and then actually what we're gonna need to do is open up another terminal and go into cd.config And let me move my face here for a second so that you can actually see this So we're gonna have to create a poly bar configuration folder. So we just do make directory if I can spell poly bar Okay, and then we now we can close this now what we're gonna want to do is copy this full file into that directory Just care. We just created so doc config poly bar Okay, now if we cd into doc config poly bar, we should do an LS here We should have a config file and we do if we've been into that so in this case Well, I'm just gonna use and then if you see me use just V doing this. That's just an alias I have for Vim so I'm going to them into my config file that I just created and this is what it looks like now your Syntax highlighting might be different than mine because I have a whole bunch of Vim plugins that make it look cool So yours might not look like this at all in terms of coloring, but for the layout it should be exactly the same now The next thing we need to do is we need to create a launch script So to do this we're going to do touch launch SH and Then we're going to ch mod plus X Launch s H so what we did there is we made the script that we're going to need to use to launch poly bar every time we Refresh the window manager or open the window manager. We've made that executable So the next thing we need to do is go into that so launch that sh now We need to click on this link here and find the script that they recommend using and that's right here So what we need to do is copy and paste this part here and copy this and then paste it right here now This has some parts that we're not going to need because we're not going to actually have two different bars But if you were going to have two different bars, this is how you would kind of do it It's not the script that I would run if I for my multiple monitor setup But simply because it's not the most efficient and it doesn't always work I'd prefer an if statement if you want to know more details about that I would look up the arco linux poly bar config you can Google that They have a fantastic launch that sh that kind of covers every single window manager out there And you can just kind of copy the if statement for your particular window manager But that quick the reason why I do that is because the if statement that they use really works well with multiple monitors sometimes you write a Launch sh script and it just doesn't work well with multiple monitors, but that's beside the point today We're just going to deal with one bar. So we're actually going to delete this line here and the next thing we're going to want to do is Change the name of our bar actually what we'll leave the name of the bar the same But the name of the bar is right here bar one and we want to Make sure we keep that name in our minds or you can change it if you'd rather call it something different You can change it just change this word here do whatever you want. It should work just fine I don't think That you need to change any of this stuff here. I believe it would still work You can change those log file names if you want to so once we got that we're going to save that bike pressing shift ZZ or colon WQ if you're using them if you're using nano you'll have to do control X and then enter a couple times So now that we have that we need to go into our config file you've been to config and we need to change One line so what we need to do is change this line here from example to bar One oops, and I pressed the key because of course I did So we need to change this to bar one because that was the name in our script So if we now save this and we can actually write and quit out of this and then we do dot slash launch dot sh We now have poly bar. How about that now? You don't want to have to start your poly bar from the terminal It's not very good that way. It's just not the way it's supposed to do so what you need to do next is Call your script from an auto start file now This is the first place where we're really going to see a Differentation between window managers is the first place So if I'm gonna go ahead and hit control see out of this now Poly bar will stay up there, but I will actually kill it that way it goes away That we don't want to get confused. So what we need to do now is go into our BS PWM auto start file So I'm going to CD into my repo BS PWM and then them into auto start sh now. This is for BS PWM. You have an auto start file probably For your BS PWM config if not you can launch your auto start file from your BS PWM RC very easy I'm not gonna cover that here because you should know how to do that Chances are you probably already have it if you're using something like i3 go into your i3 Configuration file and write something like this exec underscore always and then the path to the exact path the full path to the script so till the slash whatever Dot launch the sh okay, and then save your file and restart i3 and it should work for us We're in BS PWM and actually let me go back here and turn on my camera again So you can see me and then we'll go get out of here up here You'll see that I actually have this line already But this is the line that you'll need in an auto start file. Just do dollar sign home slash dot config slash BS slash poly bar in this case. So we're actually going to change this so insert dollar sign home slash dot config Slash poly bar slash launch that sh and we want to put an ampersand behind that so that it continues on with the rest of the script and we're going to insert a Comment here because this is this is my my actual Launch that sh which is where I normally start store my stuff But we want to do the one that we're creating so we should do now is right quit this and now if I restart BS PWM We should get poly bar and we do This is the standard poly bar configuration. It's completely set up this way now you could stop here This is perfect a perfectly fine Poly bar what we're going to go into next is Customization so we're going to take this and turn it into this what you're looking at now is my actual Poly bar setup and we're going to take what we have now or what the example the Example config and turn it into mine and I'm going to show you how to do that step-by-step So what I'm going to do is take you through and just Rice this thing and that way you'll be able to learn along the way several things now There may be some things that I don't cover because I don't do those things in my config I'm hoping that for the most part you'll get a well-rounded idea of how the configuration works and I think you will there I'm going to cover so a lot of the technical details behind some of the stuff and We're going to talk about the modules and custom modules and stuff like that But this way I don't have to talk about every single module. So let's go ahead and do this thing So I'm going to go ahead and close this and I'm going to get rid of that stupid ad So what we're going to need to do is first we'll clear this we're a CD into dot-config poly bar and Then we're going to vim into our config file and we'll go back up here to the top now I'm going to go through and get rid of these first few lines You'll notice one thing that I do is I always get rid of as many superfluous lines as possible Okay, once you've deleted that text there at the top if you wanted to the next thing We're going to do is define some colors now I'm going to take the easy way out and use a theme that I already have prepared But if you were going to go through and do this the easiest way to do it is right here in the color section Now what basically what's happening here is we're defining variables to associate with certain colors So the background color is going to be this hex code the background alternative is going to be this hex code and so on and so forth Now there are several different ways you can go about doing this You can go through and define the variables like I'm going to or you can go through in each Module later on just put in the hex code for whatever value you're trying to use and I'll show you that more When we get there for me, I'm going to just define the variables now instead of me typing out 20 different hex codes On camera here and being here for another hour. I'm just going to delete this part And then I'm going to open up a vertical split and get my color codes. So I'm going to actually get it just copy these over Yank and then paste okay, and then we're going to close this out Now as you can see here, I just have a ton of colors defined and associated with variables So I'll show you how to call these variables later on But if we actually go through and do a right here and we start poly bar You'll see that we now have a different background color. It's not very it's the last time it was black Now it's blue now we can delete some of these extra spaces The next thing we want to do is change the position of the bar in in order to do that What we're going to do is first we're going to change the width So we're going to change the which width to 90% and we're going to change the height to 22 And you can change these numbers to whatever suits you. This is just the way I'm going to do it so and we're also going to go through and uncomment these two lines here and We're going to set the x offset to 5% so the way the x offset works is that it's the Whatever the difference between this number and 100 is divided by 2 So if you're at 90 the difference between 90 and 100 is 10 you divide 10 by 2 you get 5 Okay, if you had 80 here the difference between 80 and 100 is 20 divided by 2 then you'd use 10% here I hope that makes sense. Okay, basically what you're doing there is you're centering the bar on the screen Your bar is always going to go 100% across the screen unless you have it set as a different width Okay, and then if you make it smaller you want the differences between that 100 on each side So in this case the difference is between 100 split in two to center it is 5% each so it would add up to 100. I Explained that piss poorly, but hopefully you understand now. I'm going to go ahead and keep the Y percentage. Oops I'm going to keep the Y percentage at 1% and then I'm going to change the radius here to 9 Oops 9 and then I'm going to do fixed centered needs to be true Okay, and then we're going to insert bottom now that you don't actually have to have this here that Equals false this way if you want your your bar to go to the bottom you can I'm just gonna go ahead and put it in here And I'm going also going to include a separator Seper a tour and Spill that wrong separate or Good Lord Matt learn how to spell and I'm use a pipe today So I'm going to right and quit this or write this and restart poly bar now You can see we're there like this is we're very close already to where we were in that picture that I showed you All that's really left is changing the modules now I'm just going to briefly talk about some of the stuff that's here before we go to the modules So this background and foreground are calling the variables that are set up here So appears you see we have background foreground defined these variables defined as these two hex codes Basically, what is happening here is they're calling those variables and we're going to do that more often Later on when we mess around with the very with the modules the rest of the stuff here is going to be defining borders and Padding so what you're going to want to do so we're going to turn off borders So I'm going to actually comment this out and you comment things out in poly bar with a semicolon So I'm just going to comment those out and we'll write this and then we're going to go ahead and restart now That's just there wasn't a bar border on there to begin with but we just want to turn it off I don't need a border there at all and the padding left and right is going to change the padding before the workspace modules over here and after the system tray over here So if you want more padding, so if we change the padding on the left hand side to say like 15 and Then we do this we're going to see that there's now space over here I don't actually need any space over there. So we're just going to go ahead and keep that zero we're going to change just one and then this module Margin left and right is going to change the space between the modules here so let's just again changes to some really weird number and Write this and restart will now see that these are all spaced out really weird on one side So we're going to actually change just one or keep that as one and restart and it goes back to normal Okay, now the next thing we're going to do before we get into the modules is Fonts now the way poly bar does fonts is they define them Kind of like variables like we can define the colors and then they are called either in the code itself Which you probably will never see or as part of a module which you may end up seeing somewhere today I'm not sure if we'll end up changing a font that way or not But the point is this is the way you call fonts so you can call multiple fonts and the reason why you want multiple fonts is because You want your text to be one thing and then you also may want to call a font that has certain symbols so for example font awesome and That way you can go through and put symbols next to your modules You can go through and put symbols as your workspace things whatever you want to do so for us I'm going to go ahead and delete actually easiest way to do this is to Delete to the end of the line and then we're going to do is we're going to use jet Brains mono So I'm going to do quotation marks jet Brains mono nerd font and then colon and then we want size Equals the size of the font we want to use so in this case I'm going to use 10 and then we use semicolon and then here's something important You're not going to see this right now because we have no icons up there But the number that follows this so you can actually see there's a there's a a number that follows all of these The numbers that follow this is the padding of top and bottom of icons and that font So sometimes you'll notice that if you're going through and doing this you have Icons and the text sometimes the icons and the text won't be in line with one another So like the icon will be too far closer to the top of the bar But in the the text will be below that and you if you want to get them to line up so that they're you know in line With each other. This is the number you need to play with so in my case I'm going to use the the number two and then we'll get out of this and then once we get icons in there I'll probably show you how that number actually affects icons and stuff if I remember to do that so this next one and delete to the end of the line Insert quotation marks and this one's going to be font awesome size and then equals 13 and then Semicolon 4 Okay, and then we're going to need font dash to I'll just change that other one later on and then equals This one's going to be JetBrains Mono, and then we're actually going to just yank this one and change this to Three as well. So we're gonna and then we'll delete this Okay, so we've gone through and defined our fonts and you can use whatever fonts you want You'll just need to make sure you have that font installed Okay, if you don't have the font installed you'll end up with errors or things will just fall back to the default font I'm not sure which way will go sometimes. It's one way sometimes the other way But you'll want to go through and make sure you have that font install specifically if you're using icons From font awesome or nerd fonts or whatever you'll need to make sure you have that particular font installed Otherwise it won't work now the next spot is going to be the place where you do a lot of your playing So this these three lines are very very important So this defines where the modules in the bar are located so we have modules left and These are all this is the module before BS PWM and if you're using I3 You could get rid of BS PWM and leave the I3 one there So they have two different modules for those two end of manners now if you're using something like X monad you'll have a module that you'll need to include called MWH EW MH something like that. I don't really remember the order the letters You'll have to look that up on your own if you're using X monad and that will be the equivalent of the BS PWM And I3 modules it doesn't work the same and it doesn't work as well If you're using X monad and poly bar together, it just doesn't but you can set it up that way if you need to I would consult the X monad Documentation on how to do that. There is some there for you to look at so for us We're going to go ahead and delete the I3 one because we don't need it because we're not an I3 But if you were using I3 you delete the BS PWM one and leave the I3 one Now while this does here is put the workspaces up here. We can also do something like this X window Okay, so if we save this now and restart poly bar Well, we'll actually see and you'll see that because of our changed fonts. We're actually seeing more padding here We'll change that in a bit. We have now a new module here called X window and Basically what X window does is just shows the title of the window so we can leave that here We're going to go ahead and delete the MPD one Because I don't use the MPD one. I used one called music So we're actually going to go through and put in all of my modules right now So by default these are the modules that we have up there. So we have file system. We have X back like which react not actually going to see because I'm not on a laptop We have also which is this one here. We have pulse audio, which is this one here We have X keyboard, which is listing our keyboard right here. This is memory CPU The WLAN and the Ethernet are not showing for some reason. I'm not sure why I never use those modules Anyways, we also won't see the battery because then again, I'm on the laptop This is the temperature one then we have the date and then we have the power menu Which is also not showing because it's not properly set up. I don't have those scripts Actually, I'm not sure why I wouldn't show up because it should be included, but it doesn't matter I never use it. So we're going to just go and delete to the end of the line now if we save this and If I learn how to save in them and we start this all of our modules just go away except for the the System tray which while I'm here. I just want to Go down here to turn the system tray off go down here to trade ask position change just to none I'm just gonna turn it off. So if I save this now and we start the bar the system tray goes away Now I'm going to go and put in my modules now. There's some modules here that don't exist yet But that's okay. So I'm gonna write in music. I'm gonna write in mail. I'm gonna write it up time I'm gonna write in updates And I'm gonna write in weather and I'm gonna write in PA volume That's one module that is included I'm gonna write in memory to and I'm gonna write CPU to those are all included and we're in a date Now if I write and quit this of writing this now and restart the only one that's gonna show up is date Because these other ones aren't actually in our configuration file yet. They will be momentarily. Okay now Let's go through and change the BS PWM module. So if we go The rest of this stuff you can mess around with as you want But or you can delete as you want like so the X window one we use but the X keyboard We didn't so we can actually go through and delete this and we I'm gonna leave the file system one there Cuz I may use it later on now that the BS PWM is the thing that we want to change So the first thing we need to do is change the padding so change this to zero I'm gonna change the all these to zero Now if you'll notice when we restart this and it looks like we're gonna need some more padding there That was a little that was a little too enthusiastic with removing the padding. So we're gonna change all this Write this and restart. Yeah, that's better. Okay now Let's say we wanted to change those numbers to icons So we can do that by inserting some code here. So what we're gonna want to do is do W space Dash icon dash zero All right, and then I'm going to go through and do equals One okay, so this is for workspace one and then semi colon and then the icon So what I'm actually going to do is just go to the beginning of this line Yank it and then go through and copy it a few times So I'm gonna go and change this here to one and this here to two and this here to three It's here to four. It's here to five six seven eight Nine, okay, and look at that. I copied the right number of lines. So we have ten lines We have start because this starts at zero. So we had nine entries. So we'll change this one here to two Changes here to three and then ten. We're also going to need a icon default So we're just gonna yank this again changes to W's WS dash icon dash Default and then change this to delete to the end of the line that way that we do that now So the next thing we're gonna want to do is go find us some icons and we can do that by searching for font awesome cheat sheet and I actually have that in my history So we're just gonna go here. This is what the cheat sheet looks like. So let's search for say web browser and Let's see if we can find an icon for web a web browser. I don't I don't have Firefox installed I don't really want the Firefox logo, but I don't see it Let's search for internet. Oh, you want to just just to troll people. We'll go ahead and use the internet Explorer icon Why not? So we'll go back to our Configuration file here and we'll change this word here. Oops To this we'll so copy and paste the icon in so now if we go through and Write this and restart that actually didn't change anything. Why didn't change anything? Oh, I don't know why okay? So in order for your icon to show up, we're lucky that I actually got that, you know quick. We need to go up here and do percent Icon percent and then delete the index part I believe and then we need to do that for all these so just change this word Oops icon and then change this here to Icon and then change this here to icon now now if we save this and restart now We have our icons up here So we're gonna go fed and go through and find icons for all these why not so we're going to wherever our browser was Say the next one say we wanted to have a terminal icon So terminal and then we'll select this one here copy the glyph go back to Three I believe that was two and then change this word here to this and then go back to Here and let's say the next one you wanted to have was chat So we'll do a chat icon Make sure we're in the free only because I don't want to go through and see any other pro stuff So we'll go back to two and change word here and go to Chat and then go into the next one back to here. Say the next one we wanted to go through and do is Video it doesn't really I mean it doesn't even now. I'm just making stuff as I go You just choose the icons that you want to choose and I'll go back to this and you kind of get the point here I will speed up the video here so that you don't have to watch me go through and do this All right now I'm going through and put icons in for every single now somewhere during there You saw me copying icons and then the icon that I thought I copied didn't show up right usually that happens because you're copying from a Version of front awesome that you don't actually have installed and the numbers that they're trying to copy and paste don't actually You know match up just go back and find yourself a different icon. It's the easiest way to do this So if I restart my pie bar now, I now have icons up there How cool is that now the next thing we want to do is change some colors I said I was going to go through and point out the differences between I3 and BSP WM really all the that's going to be different between what I'm doing and what you do in I3 is that instead of editing the BSP WM module you'd be editing the I3 module for the most part. They're designed exactly the same way So they all they both have this section here where they're going through and basically telling the bar what to display they have They can both have a section exactly like this and You just would have to go through and put that in by yourself because it doesn't actually go You know include this by default, but they would look exactly the same now this last one here before I move on and do the colors I should go through and put a a Default icon the default icon basically is just like a fallback icon in case you add a workspace or something You didn't define an icon for it. So I'm just gonna go back here and we'll find a random icon It doesn't really matter. It doesn't matter I mean really it you're not gonna see it anyways because we don't have any non defined Icons and again, that's another one of those icons or that's not what I copied, but that's what showed up That's a battery icon not a happy face But it again It doesn't matter that the default one is a picture of a computer anyways again You won't see that unless you have a workspace that doesn't have a defined icon so if you were to go through and add a workspace see say that you had like 20 workspaces or something and You didn't define all the workspace to a different specific, you know icon Then you'd have the default one show up the just remember that if you just want to keep the the numbers like we had at the beginning You don't have to put this part in there at all, but it's cool that it's there So the next thing we want to do is change some colors now I'm gonna actually open up a another terminal here in cdintedocconfig Polybar again. Oops. That's not where I wanted to go. Good Lord, Matt. I can't type with damn All right now We'll actually going to open up another version of our config file and that way we can have the colors Right here in front of us. So if we Change this so that it's just really small and then what we're gonna want to do is change some colors. So these colors here define the colors of your workspaces, so the focused one is Going to be for the workspace that you're on that the one that's in front of you So the underline is going to be what's underlining. These are fairly self-explanatory If you don't want to underline like I don't want to underline. I'm going to comment that part out So for the background we pretty much want to keep this The proper background so we're gonna just keep this colors dot background Now in order for the foreground to change what we're gonna want to do is put in label dash focused Dash foreground and then equals now Here's where we get to use some of our variables that we called earlier So let's say for example any workspace that is focused. We want it to be let's just say orange So ff9e64 we don't want to have to type that off. So what we're gonna want to do is do dollar sign squiggly brackets, and then we're going to do colors dot orange Okay, and then we'll save this and Restart now you'll see we're on workspace number two, which is the little code Icon thing and it now is orange. Okay, let's just say we wanted the background to be something different, too So if we wanted to the background to be let's just say we wanted it to be oh I don't know how about this bait really ugly beige color. It doesn't really matter We're not gonna keep it that way, but we'll just go ahead and do this be Eig I'm sure I spelled that wrong But it doesn't really matter. We'll save this restart poly bar and now you'll see that it now has a really ugly a Beige color behind it. We're gonna undo that but you can see how that would work, right? So we'll write this again and get rid of that and we start that way We just have orange. So the next one we want to do is the Occupied so what this one indicates is when there's windows on a on a workspace, but you're not focused on it So like right now we have something on workspace three But we won't be able to know that because there's no differentiation in color for the third workspace we can change that so what we're gonna want to do is get into this do label dash Occupied this time dash background and Then equals and In this case, we're gonna keep the background the same. So we're gonna do dollar sign squiggly brackets colors dot background Okay, and then we're gonna do label dash occupied dash foreground Equals and then dollar sign squiggly brackets and now let's see. Let's choose a color Let's make it this blue color. Let's do colors dot blue And then we'll save this restart and now we'll see that's not really differentiated enough But you can kind of see up there We have windows on first and third and we also I also have one on this one here and That's gonna be audacity or a dacium in this case and that's gonna be our browser But the point is now those icons that are unfocused but have windows on them now have a color So the next thing we're gonna want to do is do for urgent So I'm just gonna go ahead and leave this the same But if you wanted so when like you press a link you're on one workspace and it opens up in a browser That's on another workspace This code is the color that would kind of flash in that browser to let you know that something open happened on that workspace I'm just gonna leave it the same. It's just gonna be red red is fine The empty icons we just want to have be the regular foreground So we're gonna delete this alt part and save this and see what that looks like Yeah, that looks better so Now we've gone through and you know you could go through again and add if you wanted to empty ones to have a Different background or a different foreground. You just go through and do label dash empty dash background Equals yada yada yada, you know, I mean you can also change the foreground to whatever you want it to be whatever I Hope that you get an idea of how you go through and change colors So you this part or on this side here is always going to be Whatever you're changing so in this case you're changing the label icons are almost always called labels Okay, and then the second part of it is usually the name of the label So in this case or the the defining nature of the label So in this case, it's the empty labels that we're talking about and then you're doing the what the specific part of label that you Wanted to find so background foreground underline Those are the things you wanted you want to play around with and that's what you'd change And then on this side of the thing you'd change the colors now Just while we're here. Let's go back up here to the Focused one. Let's just say we wanted to change this focused one and we didn't want to use a variable So we changed to the the dollar sign here and we could go through and just do f f f f f f and save that and quit Now we'll see that the focused ones instead of being orange are now just really white Okay, you don't have to use The variables that we defined earlier you can just use the hex code works Exactly the same you can do either it doesn't really matter. I choose to use the variables You can just use the hex codes in these positions. It doesn't matter and that works for every single module in poly bar So I'm gonna actually go ahead and do that so that we can keep our change. Okay, so we're back to orange now That is that module there. So the next one we want to change is the X when X window one So let's say we want X window to be a different color. So in this case, let's do label dash foreground equals and Then dollar sign Squiggly brackets and let's just say we want it to be pink. So colors dot pink and We'll have to spell that right so we save this reload now. We have that being pink. I call it pink It's probably red. I don't know why I called it pink. It doesn't matter Anyways, that's how you change the X window one and you can do this for pretty much any module or rat So the next one we're going to do is just search for date Okay, so we have the date module here All right, so there's a lot of stuff here that we we can change and This is where things get a little bit more complicated and this is also where the of Videos that I recorded before kind of went off the rails because I tried to go through every single module and Unfortunately every single module is going to be different. That is the sad just sad sad state state that you're gonna find yourself in because Sometimes modules will do things one way Other times modules will do things a different way and in the previous videos I tried to go through each module and explain How those differences affect things and how you should change the things and it just ended up being a panacea now this video here Before editing it's already at an hour long and I'm hoping that we're almost done, but I You know I doubt it. Unfortunately, we're just getting into the modules but what I've decided to do is just take you through a couple more modules and Kind of give you a feeling for how this is done The good news about poly bar is that each of these modules does have its own documentation So if you go to the website, which I closed earlier because I'm a tool Anyways, if you go to the website and go to the wiki here and then you scroll down here You see how these modules here along the side each of these have their own documentation So you can go through and read the documentation and see how these particular modules differ from each other And you can also every single module here is included with poly bar So you can actually add these things to your configuration file if you want to Now there's a couple things that I'm before we get out here There's a couple things that I'm going to show you how to change So first we're gonna go back to this and we're gonna change this date one So we needed to define an icon. So in this case, it's format dash prefix Okay equals and then quotation marks and then the icon so we're gonna go back here and And we're gonna go back to font awesome, which of course I opened this up in it in a the same tab because again, I'm a tool We'll search for this again, and it will go to clock Okay, we'll search for a clock. We got a clock here. We'll grab that icon We'll go back to to we'll copy and paste and of course that's it didn't show up the correct way So we'll get rid of the non-free ones now. We should be able to see this one here Pretty positive. That's the right icon. Anyways, we'll try this again. There we go. That's works now if we write this restart We now have an icon up there next to the clock so the next one we want to do is just delete or Comment out the underlying because I don't want it underline and then we're going to want to go through the foreground We want this to be Change word and this can be let's just say Green so let's colors green and we'll write that now If we restart now we have the icon as a green color if we want to change the color of the text we do format dash foreground Equals dollar sign Squeakly brackets and let's just make this purple colors dot purple and Write this and restart now. You'll see how the text has become purple now Notice what I did there format prefix. So we did Format prefix is always going to refer to them to the icon And then we wanted to change the foreground for the text. It's just format Foreground where this gets difficult is that that's not always the case So some modules will use in fact most modules are going to use this nomenclature right here You'll have format prefix will refer to the icon Format foreground and background and whatever will refer to the text itself the vast majority of them do that some things like some of The volume modules don't have a prefix defined at all You can if you want to use that if you want to but you have to put in that that in yourself I know it's very confusing and again This is my fourth time trying to do this video and I have still not come up with a good way of saying Hey, you want some of the modules are just different from each other That's just the way it is and I can't spend even more time going through each and every single one of them If you're interested in a video where I do just go through all those single modules I suppose I could do that make sure you drop a comment for that in the in the comment section below If you're still watching this if there's anybody still watching at an hour long bless you seriously I mean, I don't even want to be here at this point And another stupid ad just go away brave. This is why Thinking about going back to un-google crummy those ads are ridiculous. I know I can turn them off, but still anyways Let's go through and add a module So I'm gonna if you remember here up here at the top where I went through and put in all of my modules I have a whole bunch of modules here. They just don't exist. So let's just go down to the bottom and We're gonna create ourselves a custom module called music so in order to create a custom module will do module actually what we're gonna have to do it is Go back up here. It has been in front of these settings. Sometimes these settings are at the top of the The document sometimes are at the bottom, but they have to be either at the top or the bottom So we'll do module don't worry about those settings half of those things you'll never have to deal with anyways So let's do module slash music and then we're going to do is do type equals custom slash script Okay, and then we're gonna choose the interval of which it's going to refresh so an interval Equals in this case we can just use 120. You can use any number of seconds that you want to use Uh, I believe that's in seconds, but that's just the way I've used this so format dash prefix Equals and then this is going to be an icon. So we'll go back here search for music And then this one here is fine grab the icon go back to two And then copy and paste that we're going to actually put a space in between there if we want to Oh, that's another thing that you can do if you want space in between The icon and the text you can just add a space here in between here and it will show up on the bar So the next thing we want to do is format dash prefix and then foreground equals dollar sign colors Dot I don't really care. It doesn't really matter. Well, let's just call it cyan Okay, and then we'll do now we need to tell it what script to Execute so in this case what you're going to do is if you say you have a script that you use for another bar So like d w m bar or whatever it doesn't matter you can use that here So what we're going to do is exec equals and then bash in this case because it's a bash script We're going to do slash user slash local slash bin Slash mpd.sh that's what that's my mpd script And then what we're going to do next is going to go and add a click event now I've done a video. I think it'll already be posted On how to do a click event. So I'm not going to cover that here We're going to click left equals alacrity dash dash class and then muse m u s comma m u s quotation marks dash e n c m p c p p okay now We write this and we start poly bar. We now have My mpd script if I click on that we'll have the music player come up And that's how that's done now. I'm going to go through now and add the rest of my modules Okay, and I'm going to do that on like 300 or 400 speed Unless I come across a part where I feel like I have to go through and explain it And I'm going to do it this way because there's like a tum It's just going to be repetition work but at this point everything else is going to be basically the same We're going to go through we're going to add a couple a couple more scripts We're going to go through and add icons. We're going to go through and change colors That's all we're going to do so format prefix foreground is going to change the color of the icon format Format dash foreground is going to change the color of the text. That's what you need to know So watch me go through and do this really really fast Okay, here's a part where it's going to be a little bit different. So I thought I'd cut in here instead of Using a bash script here What I'm actually going to be doing is just using a bat a command that you normally use on the bash Or on the command line So in this case, I'm going to use tail dash one and then attack a path to a file And that's the reason the reason why I'm doing this is because the the script that you would normally use for this for Pac-Man can only be run once. They can only be running in the background one time. So if you have multiple bars One bar is going to be giving you an error. So in my case, what I've gone and done is taken that Script piped it into a file and then poly bar just goes through and checks the file So in this case, it's going to be dot config slash updates And then we'll write that and now if we reload we actually have the number of updates I have So that's how that's done. And while I'm here. I'll also show you how to do The weather one. So in this case, we're going to do module slash weather Okay, and then we're going to do a type equals custom slash script And then we're going to do interval And this one's going to refresh a lot quicker. So I'm going to do it have 10 Um, just remember though, the more you have an update the more cpu heavy this is going to be. So I just have it at 10 Uh, you can set the number to whatever you want. I'm going to format equals and in this case We're going to do label now. Basically, though, this is just going to be defining what the what is being shown later on You don't have to have this part. I just happen to have that part So format dash prefix equals in this case, we're going to need to go through and find a weather Icon so in this case, we're just going to look for cloud and paste that in there And we're going to put a space in there in case we need it and we'll do format prefix foreground equals dollar sign squiggly lines colors dot green because reasons Okay, and then what we're going to do is we're going to use the same exec Line here, but instead of a bash script or a Command we're going to use python because this is a python script and we're going to do dash u because we have to And we're going to do the path to the script. So user usr slash local Slash bin slash weather dot pi and this is my script now you can find a link to My git lab page in the video description and you should be able to find all my scripts there So if you wanted to use these scripts for yourself, you could go through and do that now I believe the weather one that is up there Does not have an api key or any of that kind of stuff there So you'll have to go through and get your own api key. You won't be able to use mine I think that I have that set up that way if I don't I shouldn't be you know giving up my api key So i'm just going to head and um, actually I need to add one more line here tail equals true In order for that to get direct to work. So we're going to refresh here Now we should have weather up here, which we do we have weather right up there. That's cool, huh? All right, so I believe Now we need uh, just two more things So the next one is going to be we're going to search for cpu We can actually go up here back up here to a cpu and change this to one So we don't actually so the polybar comes with three different cpu modules The only one that's in the the standard configuration file is the first one I'm just going to go ahead and use that one for time Sakes and then that way I can show you one more of me editing one that comes up here So if we save this and reload we now have the cpu thing there So if we do see go go to that cpu module right here We're going we need to change the icon. So if we go back to three and type in chip I believe we can find a a computer chip here or something. Why would that be easy, right cpu? Maybe not about work micro micro chip. We would have got there eventually and then we'll go back here We will Paste this in yep, that's good and we'll change this color here to let's just say Light blue and we'll get rid of the underline and then we're going to go ahead and save this and restart Now we'll see that the underline is gone. We have an icon here Now the one thing about the cpu one here is this number here by the label where it's Basically telling the module what to output you can change this number here Which was two to something different and you'll change the space between the icon and the text So if we restart this now Well, you'll see that there's now more space between the icon and text and what basically what this does Is because that number changes so often you don't want it to have to go through And to be really close to the icon it will just look bad So you change this number here that kind of changes the padding between those two The icon and the text so i'm going to go back to two two is fine But that kind of gives you an idea of what that does now that also kind of shows you How some of these things are different so some of these things have things that are dedicated for labels so things that have Different things that can be displayed. So for example the the memory one here can be memory two If you want to include the second memory module and that one has different tokens that you can display so it can Do gigabyte use gigabyte free gigabyte total gigabyte use megabyte use megabyte free megabyte total and so on and so forth And that would be defined in this label line right here It can get really complicated in every single module that's like that So the cpu one the memory one the volume one Those all have things like that and they're all done a little bit differently So I highly recommend you going to that modules documentation to make sure you know what you're doing In in this case I'm just kind of ignoring this because these first modules the cpu ones which is basically the cpu one Don't have that functionality. These are just really simple They don't they don't have the extraneous stuff that you include at least out of the box You can go through and include those if you want to but again, you'd have to find that in the documentation So that is cpu and I believe we also also did memory up there as well So if we go up here to memory up here and then change this to just that And then restart we'll also now have the memory one up here and we can change that as well So if we go to down here So we want to get rid of the underline and change the color to let's just say Dark orange and then we'll have to go find a an icon for that so for memory I believe there is a memory icon There is Awesome Copy that go back up here change this to this and of course that's not the right one that came up So find awesome is crap and then we'll just delete that and that's better Now restart that and now we have that so that is our bar and that's where we're going to end this video So that picture that I showed you before looked something like this Whether or not I chose the same colors along the line I don't know because the picture that I showed you earlier was a picture of my actual bar Actually, so if you remember back to the beginning of the video, I showed you a picture of this And now we're here now I hope you've learned something from this because this video took ages to record just like freaking forever Like I'm about an hour and a half. I'm assuming that I'm going to be able to pair that down in editing I really hope so because nobody's going to watch an hour and a half video on poly bar But I hope like I said, I hope you learned something from this now Obviously, I didn't cover everything that I could have covered I could have been here for four or five hours going through every single module How every single module differs from all the others and so on and so forth I could go through all the settings that you could Potentially set that will change certain things I'm not going to do that in this video that'd be more for an advanced user So I'm also and I'm also not going to cover how to do this on multiple bars That is it for this video if you have questions you can leave those in the comment section below I will try to answer them if I don't get to everybody. I apologize for that, but I'll try You can also contact me on twitter at the linuxcast if you have questions and you would prefer to contact me via twitter Sometimes youtube deletes stuff. So twitter is probably the best way to do that You can also jump into the discord server link for that is in the video description below I'm pretty much always online there and you can ask questions there You can support me on patreon at patreon.com slash linuxcast before I go I'd like to take a moment to thank my current patrons Thanks everybody who's watching this still at the end I truly do appreciate it. Thank you for watching. I'll see you next time