i3wm: How To "Rice" Your Desktop (3/3)

hey what's up everybody my name is Alex welcome back to my series on the I free window manager in this third part of the series I'm going to teach you how to rice your eye free installation ricing for those of you who have not yet encountered the term refers to changing up the UI of your desktop in order to better suit your taste it refers to making visual improvements and customizations to your desktop and in this video I'm going to show you how like I said all that time ago in the first video when you first install life 3 it looks very regressive and pretty damn ugly in this video we're going to make a free look a lot better we're going to focus entirely on the aesthetics but not much on functionality what we're going to aim to do in this video is take the ugly desktop you see before you and make it look something a bit more like for desktop I showed you in the first video just to refresh your memory let me quickly go into my other desktop to show you what we're going to try and emulate so what you're looking at here is actually my personal Linux distribution you saw this in the first video but like I said just to refresh your memory this is what it looks like as you can see it looks a lot different and arguably a lot better than the default installation of I 3 as you can see the bar at the bottom has been customized so have all the colors and fonts in general there's also a custom icon theme and gtk theme installed I've also replaced the menu with an alternative program launcher called Rafi Rafi looks a bit better in my opinion definitely looks a lot more interesting but like I was alluding to previously it functions in exactly the same way this video is all about making non functional but aesthetically pleasing changes you'll also see that as I switch between workspaces but there's a slight transition as I switch between workspaces or as I open windows that's thanks to the fact but I'm using an application called Compton Compton enables those transitions that sort of fade effect and also enables Rafi to have an opaque background in this video I'll teach you how to accomplish all those things but first we'll need to go back into the virtual machine alright now we're in the virtual machine we can get cracking the first thing I want to configure is these system fonts the system font will affect the fun of the bar which is this black strip at the bottom it will also affect the fonts of the window titles which is this text in the top left with the blue background it will also affect the fonts used by any gtk applications such as ribbon bugs or Firefox or any other kind of graphical user interface but users gtk as you can see i've preemptively loaded a Firefox page with a link to the fonts I want to download namely Yosemite San Francisco font this font was originally released for OS X I really think it looks good so I'm going to install it on Linux to download the phone's head over to this page they'll be linked in the description and at this time of recording you can find the download link beneath the manual install header in the readme click on it and you'll be prompted to save the zip archive once the font is downloaded you can open the terminal and navigate into your downloads directory you should see a file called Yosemite San Francisco font - master does it - and zip it use the unzip command type in the first few letters of the file name and hit tab and they should be also completed all of the files will then be extracted into a folder of the same name which we can then navigate into if you list the files in this folder you can see there are a bunch of TTF bonds here let me make the window a bit bigger so you can see the text more easily as you can see there are a bunch of variants of the system San Francisco phone just like I showed you in the previous video to install these fonts we can move them into the home directories dots fonts subdirectory we'll do that using the Move command aka mV and the easiest way to take only the TTFN fonts is by using a wild card will basically say take any file that pens with t TF or any file the t TF extension and move it into V dot fonts directory in the home directory if we CD into our home directory now and then into the fonts directory you can see Vinh addition to the fonts or some font we installed previously for our icons we also have all the system san fransisco fonts now to set these system fonts we're going to open our trusty eye free config file slamacow up a directory and open the config file in the i3 subdirectory now changing the font is as simple as coming down to this line hair prefix with the word fonts and changing the default font from mono space - system San Francisco display and then specifying the font size I'm going to make it really big just to prove that the change is taking effect so if I save this file and we start I free you can see that the window titles have a updated fonts as does the bar the gtk applications will not pay attention to this particular change we'll deal with that in a second but first let me assign the more reasonable font size I think maybe 13 would be decent yeah 13 is quite a sensible font size it might be a bit too big for you but you can customize the size to be whatever you want just like you could if you wanted to install a completely different font now that we've configured the title fonts and the bar fonts it's time to configure the gtk funds to do that I'm going to use an application called Alex appearance which I can install by going to a terminal and writing studio app - get install Alex appearance once Alex appearance is finished installing you can open it by ad menu like so as you can see LX appearance is a heap of options relating to the look and feel of your system we're going to use this application later on to change the gtk theme and default icons but for now we're just interested in this default font option if I click on this button I'll be presented with a pick a font dialog it's from this dialog but I get to choose the default fonts for all of the gtk applications however if I scroll through here or even go as far as the search for the San Francisco phones it's nowhere to be seen this is a problem I've encountered a few times before for which I can never find a solution it's kind of bizarre because the font is clearly installed in fact is demonstrably installed because we're using it for the ìfree theme however for some reason the pick up font dialog just does not register it I've tried clearing the font cache obviously we starting the system all kinds of things and I can never get the picker font dialog to detect it fortunately the workaround is fairly trivial you need to understand that when you make changes by OLX appearance what LX appearance does and ever hood is Right settings - configuration files similar to how the a Rando application emitted a command using the x-rounder application internally we can just go into one of those configuration files and edit the font manually the trouble is those configuration files for gtk don't exist by default you have to either create them manually or generate them we can generate them using LX appearance there isn't a big button that says generate config files but it's fairly easy to trick LX appearance into generating your config file let me show you I'll close the pickup on dialog and open a terminal and then list all of the files in the home directory as you can see there is no file pertaining to gtk there is no gck configuration file however if I go back to LX appearance and make any kind of change for example I'll make beef on just a little bit bigger and hit apply and then we list all of the files in the home directory you can see there is now a file called GT KRC 2.0 this is one TCK configuration file if we open it up in bed or you can use your editor of choice you can see with it setting the fonts to Suns we actually want this to be setting to system San Francisco and we want to make the font size 13 just like we did i free now like i say that is just one of the configuration files there is also a configuration file in the doc config subdirectory under the gtk - 3.0 subdirectory called settings dot ini' you'll want to open button your editor and change the font name here as well from in my case sandy Levin - system San Francisco display I will make the font size 13 now if I restart Alex appearance you can see that it's detecting the default font to be system San Francisco display and the size is 13 now you might be wondering why did I need to change by in two places well basically you burn to has two different versions of gtk installed some applications use gtk - others use GT k3 each of those particular versions of gtk have their own configuration files so if we want that font to be applied consistently we'll need to edit the phone in both places have you been able to simply choose the font from the LX appearance application it would have done that automatically as you make changes in the future it will do that automatically it's just for changing the fonts in my particular case it's a bit more work than I would have liked you by the way might not have to do that your font might appear under the bigger font dialog but oh well while we're on the topic of fonts I want to give an honorable mention - in finality this is an application I would like to show you how to install but it's slightly outside the scope of this video basically it's a program that enables better font rendering in Linux if you go to this link there'll be a link in the description you can see a comparison of what fonts look like with and without in finality one thing I really like about in finalities but it enables you to emulate OSX bonds rendering which makes a ton of sense in my case because I'm using the system San Francisco phones which was originally intended for OSX next I'll teach you how to configure the color of your bar and of your window titles I'll be talking about those two things together because as you're about to see the configuration is closely related now to make changes to these colors will do so from within the familiar ivory configuration file so I'm going to open that in my editor preemptively and scroll to the bottom rather than picking out colors randomly as I record this video that might not look very good I'm going to use the colors I already chose for my personal desktop environment what's more rather than typing out all the commands by hand I'm going to save time by copying and pasting them from my personal configuration file now I'm the kind of person to upload all of my configuration files to get up this way if I do a clean installation of Linux I can reliably access them as an added benefit people can also go into the public repository and learn from my configuration files there'll be a link to this repository in the description if you want to follow along go into the i3 subdirectory and open the config file somewhere towards the bottom you'll find some variables for define the colors for my windows and for my bath as well as settings for the window color there are also some settings with but welcome back and copy those later but for now let's just copy the variables and the window configurations don't worry I'll explain this in more detail in just a second for now though let's paste these in above the bar block the block by the way refers to these braces these braces define a block so we'll paste it above that bar block and then save the configuration file and watch carefully as I restart I free in particular pay attention to the colors of the window borders and titles notice how this window has focus and therefore it has a blue background but the wind over doesn't have focus has a black background and a faint looking text well watch as I press mode shift in are the colors changed to adapt to my color scheme now there's much subtler difference between the windows that's what I like but you can configure it however you like and obviously the colors are just generally different so let's examine what's happening here in order to sort of explain this I'm going to refer to the documentation this is the format for the colors so we have a color class then we have the color of the border the background the text and the indicator where the color class can be any of these so for example when the window is focused we're going to make the border color equal to the value of this variable the background equal to the value of this variable and the tax color equal to the value of this variable just the demonstration purposes let's change this text color variable to the color red so let me actually just copy this real quick paste it and change it to be red let me just fix the indenting real quick as well so now what I'm doing is I'm saying that when a window has focus the text should be red so let me save this and restart I free and notice how the terminal which has focus as a red text color if I open up a second terminal notice how the terminal no longer has focus and therefore it's text is not red hopefully you can start to see the pattern there just like I could change for example the background or the border now in addition to specifying the properties when the window has focus you can specify the properties when the window does not have focus I unfocused as well as when it's focused and active I would just consider these two to be the same thing they're slightly different but if you don't set them both you might notice some sort of weird behavior there's also this idea of an urgent window let me explain that now this is a little bit hard to demonstrate so I want to take a little pause there what I'll do to demonstrate this is go into my documents directory and create a file called index.html and I'll open it in Firefox by passing as an argument to Firefox now firstly notice how the Firefox workspace is turned red in the bottom left that is the equivalent of an urgent window but for workspaces we'll come back to that when we look at the bar configuration because we can configure that color but pay really close attention here because it's only going to be visible for just a second you see how the window was read before it just got focus for what that property that urgent property is configuring is the color when the window has focus so in that case I opened up a HTML file and Firefox and then Firefox was in another workspace so it was sort of bringing my attention to the fact but I had a sort of notification via Firefox you'll see that a lot if you use a chat application say your chats application is on another program on another workspace story or you have a program that has an error you'll see it turn red briefly before you give it focus and that's the idea there I just noticed for the text it's sort of red so let's restart I free and make sure that's all good and the indicator is a little bit actually it's actually very very interesting it's something I only learned about recently but it might be hard to demonstrate on video now this color here I happen to know is the color for just a very bright green because what we're specifying here is in hexadecimal the red the green and then the blue and FF is just the highest possible value for the green value which means it's definitely going to be a bright green and the indicator is this green bar on the right-hand side I really hope you can see that on video and what that is doing is indicating where the next window is going to be tiled if I press modern enter the window is going to be tiled where the indicator is so it will be tiled horizontally if I press more than V notice how the green bar is now you should definitely be able to see this notice how the green bar is now beneath the window first when I press modern answer he indicates it was telling me if it would be open vertically if you're not sure if you're about to insert a window vertically or not you can look for that indicate and I'm like oh actually I want to insert horizontally so I press modern age and then it goes to the right hand side again indicating what the windows going to be inserted horizontally now whilst that seems really useful and frankly it kind of is I don't really like it I also don't like the fact that there is sort of a border on the edge of the windows and I can disable both of those things by setting the hide and the score edge and the score borders property to both when I save the config file and restart I free you'll see where that green bar is no longer there also there is no borders on the left or right hand edges it just doesn't make sense to have them in my opinion so I disable them because I know I'm going to disable them I just assign it a really stupid color like green if you want to use them you might pick out a more sensible color now let's configure the color of the bar by coming back to Firefox and copying the colors block from within the bar blog and you know this is also very similar we're going to share the same variables because I want my system to look consistent what we're specifying here firstly is the background color of the bar then what we're doing is we're specifying the colors for the workspaces let's save this real quick can we start ivory and I'll talk about this in a bit more detail now notice how the focus workspaces editor in this case it's got white text then its background is the same no matter if it's focused or in focused or whatever the antonym of focused is I'm not sure and the text color is equal to the same text color as we used for the title bars when it has focus you can definitely tell there's a difference between editor which is focused and Firefox and music which aren't focused again we've got this idea of an urgent workspace I can demonstrate that again by going to my documents file excuse me document folder and opening up in dogs dot HTML what's happened here is by foxes on workspace number two as the label would suggest and rather than sort of snatching focus is simply alerting me but there's something to look out on that workspace so when I click it as you saw the window is red so was the workspace and after it's obvious that I've seen it it goes back to its default state you know it's all fairly intuitive especially with the help of the variables excuse me with the help of the comments that I've added these comments make it really easy to understand what's happening if you didn't have them you know you'll be looking at this and you'll be thinking well what is this the text color or the background color it just so happens that I'm also using variables which have a self identifier basically you can stop by the name of the variable what it's doing but just out of the box it can be quite confusing so yeah as long as you've got these comments it should be fairly straightforward you can think of this next little bit of information as a sort of bonus because it's not strictly related to eye three but just so you know I didn't randomly pick these colors I actually borrowed them from the Ark gtk theme will be installing this particular theme in just a second but I didn't just copy them from the gtk theme I copied them from the Firefox theme as you can see the parts of Firefox that would sort of meet the title bar is the exact same color as the title bar color but I chose if you want to install this Firefox Beam click on the link in the description click on the releases page and then click on one of the three different versions of the theme just to make that a bit clearer there is the arc Firefox beam but are darker Firefox beam and the arc dog Firefox theme I like to use the darker theme so on the releases page I'll click on the arc darker Firefox beam file it's an X bi extension which Firefox will recognize and prompt you to install as I okay heck apparently my version of Firefox is not recent enough rather than updating Firefox right now I'll just download an older version as you can see this release was obviously changed with Firefox 42 I'm using Firefox 41 so let's take my darker theme again improvise here and click allow and now it should install I'll restart Firefox and just like that my theme just looks great like with such it's just like things are all coming together now you'll probably agree while we're on the topic of the arc theme I think now would be a really good time to install both a gtk theme and a custom icon pack before I do that though I want to address a small issue of is going to prevent me from easily demonstrating water gtk theme and icon theme impacts ideally I would open up a file explorer and show you the file icons and what the file explorers interface looks like but for some reason inside of my virtual machine Natalia's doesn't load so I'm going to install an alternative file explorer called thunar and if you're having issues with Natalia's as well i recommend you do the same thing so i'll install that by the command line now real quick and then I'll explain what gtk theme will impact once v-not is installed you should be able to open it by the menu as you can see it's basically a file explorer there's a small issue which is but the icons on even so much is displaying you can fix that by writing sudo apt-get install the gnome icon - be my thankful yep that looks like it might be correct I really did just remember that off the top of my head so if it's correct I'll be very impressed yep that's it you can see that that's fixed the icon so we've got Jim through a little bit of hoops in my case the other file explorer' working but now I can easily explain why or rather what the gtk theme impacts also what the icon theme in bugs so the gtk theme is going to well but let me put it this way right now this window looks like windows bloody 98 it looks really really old-fashioned and really outdated and it's not just the file explorer applications like jet it's also look consistently like they were from windows 98 so would for example ribbon bugs all of these interfaces look like that from windows 98 it's because they're using the sort of default gtk skin they all look kind of similar because they're all using gtk what we can do is update the ttk theme to make them look a lot more modern now the gtk theme i want to use is obviously the arc gtk theme so it's accessed that I think you'll be in the best guys gets a profile yes you can see he's uploaded the code to the arc beam it's actually mostly just CSS apparently but nonetheless we can make our windows look a lot more like this now even though there is sort of a consistent process to installing themes and icons on Linux in this particular case there is I think a guide on how to install it yes as you can see there is a package available for Ubuntu that we will be using there's absolutely nothing wrong with using a package it's just that from my perspective as a teacher in this case it's unfortunate that every theme has a slightly different installation process in this case there is a package in many other cases there are packages but you might encounter a theme that you really want to install that doesn't have a package in which case I advise you to carefully read the instructions and that particular projects readme if they have one or project website if they have one and just take it step by step okay let's install this theme even though the instructions are kind of backwards we need to run these commands first one of the really nice things about using i3 is that when you're following a tutorial you can open up your browser in one window and your terminal in another and just get on with it it's really quite nice so I'm going to copy these two commands one after another like so and to my password in this case and then I'm going to add the repository to my packages list and then update my local package index just by copying each of these commands in order so this one first then this one then this one then this one and then finally once the local package index has been updated I'm going to install the argh theme it will ask me if I want to confirm I do and just like that the art theme should be installed if I open lax appearance you can see that we now have the option to choose either the arc of dark or arc darker color scheme I want the arc darker color scheme so I'll hit supply with that beam selected now if I open for example funa you can see within no longer looks like it's from windows bloody 98 the same is true if I open Jeddah they both look a lot more modern now what's more if I go to my tenth workspace and show you ribbon bugs you can see that it actually doesn't look any different that's simply because we have to restarted for the change to take effect as you can see ribbon box now looks a lot better great mission accomplished so yeah the theme looks much better but we do still have sort of ugly icons so let's rectify that now a particular icon theme I like is called maca so I'm going to search for that now and yes this is the link I want specifically I want to click on download maca and then I want to get the maca icon theme I want the instructions when you burn - so let's copy and paste those into a terminal and then we'll do the same for the second that as you can see is actually wearing two commands updates and install so that's going to take care of updating our local packaged index forest you'll be asked at some points if you want to allow the download to proceed I recommend you press yes obviously if you want to use the icons once the download is complete you should be able to go to the LX appearance application and under the icon theme tab you'll see the maca icon theme click on it it's apply and now if you open just for example funa because remember these icons will propagate in other places you can see that the icons are taking effect you know when I say the icons will propagate in other places just look at the LX appearance application for example look at the close button down here as I flick between the different icons you can see that the icons are applying to those buttons as well throughout gtk applications one thing that hasn't really changed at all since the first video even is the menu as you can see it looks exactly the same as it always has I'm not going to tell you how to customize ìfree in this video because in just a minute we're going to replace it with an alternative program launcher called rafi I will actually show you just quickly the general gist of how you would go about configuring the menu just in case is something you want to do so if you open up your config file and find me lying the configuration that binds the mod Plus D key to D menu run you need to understand the basically when I free encounters a key binding like this right when you press mod + D it will simply take the command on the right hand side of the Exe C word and simply paste it into an imaginary terminal or an invisible terminal see how when I run within the terminal D menu gets launched just as though I pressed mod + D the reason why I'm telling you this is because you need to understand but you can optionally supply command line arguments the d menu if I type in D menu - H for help you can see some example usage of D menu I can then for example write D menu in the score run and specify maybe the normal background color to be by the node tomato and then the selected background color to be green now when I run this as you can see it looks horrible but it just goes to show you can for example configure the colors you can actually Lynch before I go on and we just make that look a bit more sensible you can for example change the fonts with the FN option but that could actually be quite involved that's one of the reasons why I don't like Dean menu it's not as simple as simply specifying the font name you have to jump through a hoop or two in order to make that work but you can quite easily for example specify the amount of lines to be displayed I'm not really trying to make fiscal eesof and show you how to make them and you look nice I'm just proving firstly that you can customize the menu and secondly helping you to understand you don't just have to specify a single program name like this you can specify a program name and additional arguments so I could for example come here and replace this bit of info duration with the arguments and then save the config file and we start I free now when I press mod + D see how it is basically adhering to those arguments one other things you do maybe a specify the line numbers to be really high and then you sort of get like a full-screen effect when you launch the menu that's actually pretty cool but I don't really like the menu I much prefer to use Rafi and I'm going to show you how to install it and how to configure it next installing Rafi is either really easy or really hard depending on which operating system you're using if you're using ubuntu 15.10 which at the time of this recording is for latest version of ubuntu you can install it very easily by app gets like so remember how I started this video I said for this is all about making your system look better but not functioning any differently well if I launch Rafi you can see that it is fundamentally the same as the menu it just looks a bit different if I wanted to launch for example jelly I would just type jet it's and jet it would open in addition to looking a bit different out of the box I think Rafi is a lot easier to customize you can take your customization a lot further and also you know like I was mentioning earlier about D menu not understanding fonts very easily with Rafi it's very easy now rather than sort of explaining every single possible option which you can readily read in the man page anyway I'm going to simply go to my dog files and copy and paste the configuration that I've already established in my personal system so I'm going to go to the config violence search for Rafi as you can see I'm binding mod + D not to D menu but to Rafi and I'm specifying a bunch of additional arguments one of those arguments is the font which is system San Francisco once I've got that on my clipboard I'll head over to the configuration file and paste it instead of D menu now when I save this file we start I free and press mode + D you can see tha instead of being presented with the menu I'm being presented with Rafi it's sort of the same as the default a Rafi Runner you saw just a second ago as you can see the program launcher is kind of in the center and at the top like the menu is just I've configured the background color according to my variables for my color scheme and I've set the font to system San Francisco and various other things that make it look consistent for my system you should feel free to copy and paste this into your own configuration file if you want to understand it just use the man page for example say you don't really understand what vbc flag does go to the man page so type man Rafi to do that and then search for - BG and you'll see here though it's quite clever - setting the background color if you need more information you can scroll down or press + to go to the next search results and you'll see here that there are a few different options with the same description that says set the background text color x11 named such as red or green or blue or you can use the hex value I'm sorry if that's this satisfying to anybody I know sometimes when I'm watching a tutorial the author might just paste a bunch of code and not really explain it I just don't think it's worth mine all your time to explain Rafi in detail when the man page already explains it better than I could one thing that bothers me a little bit is that we're specifying this opacity argument to 85 but if we load the menu by pressing mod + D excuse me excuse me if we load Rafi by pressing mod + D you can see that the background is not remotely or Paik this is because I free doesn't really support transparent windows to do that you'll need to install a third-party compositor like Compton to do that open a terminal and write sudo app - gets install compton enter your password and then simply type in the program name to launch it so I'll run compton now when I press mod + D the window is opaque that was stupid easy right the trouble is is the compton is actually hogging the input buffer so I have to cancel it if I want to reuse my terminal as soon as I do that it's no longer a peg what's more it'd be kind of stupid to have to manually load compton every time you start your computer and have a terminal open so a possible solution to that is to go to your config file and write HCC content I would honestly just use the exe C command in this case I explained the difference by the way between HCC and exe C always in the previous video but be the fit for the purposes of this tutorial I'm going to write exe C always so that I can demonstrate it by saving the file and restarting i3 as you can see as soon as I restarted i3 executed content and now I've got that sort of opaque background you remember the start as well I showed you you can make it so you had a sort of fade effect as you open windows and transitions between workspaces well you can enable that by Compton by simply specifying the F flag it's really by easy I'll save the config file restart i3 and now as I switch between Windows oh I'm not actually getting in this case the transition effect so I might have to log out and log back in for that sake of bag now you can see as I for example open rafi vs. old fade effect if I open Firefox this is sort of a defect by switch between workspaces there's a kind of theta fact it's kind of cool you know there's a lot more I could talk about when it comes to compositors in general and Compton but it's a little bit outside the scope of this video one thing I want to show you real quick is how to customize the lock screen you'll recall in the previous videos I taught you how to use an application called eye free log and how to associate that application with the mod shift and hex key binding unfortunately when you lock your screen you just presented with a white screen which doesn't look very good at all at the very least we should be able to configure the background color to do that go to your configuration file and locate the line of configuration where you associate every lock with that particular key binding just like we give the Rafi and D menu we can specify a color flag and then a value for the flag in this case we'll set the color to be the value of the BG color variable which is part of my color scheme I'll save the config file and we start I free now when I press mode shift and eggs the lock screen has a consistent background color it doesn't look great but at least it's consistent that's a very minor cosmetic change you can actually take your customization of ivory lock a bit further check out this Brad there'll be a link in the description this person sets up a script to make his or her lock screen look like this yeah that looks really cool and you can do that as well just head over to this link and there is a link to the script amongst the comments other people have contributed improvements to the script readability and also functionality I think with regards to dual monitors the last thing I want to teach you in this screencast is how to configure the i3 bar the bottom of your monitor earlier in this video we actually configured the bar a little bit by changing the colors of the bar and the workspace indicators do you remember how he went into the i3 configuration file like always and then family block hold bar and then within that block we specify the colors blog within that we specify the background color for the blog as well as the colors for the workspaces aside from that though we haven't really touched the bar at all it looks the same as it did in the first video as far as these sort of sections in the bottom rites are concerned and its position and behavior and that sort of stuff well we can change that what I firstly recommend you do when it comes to configuring the bar is go to the documentation and look for the section on configuring VI free bar this will give you information on all of the available options for the bar I'm not going to belabor them all I'll just show you quickly how you can change the position of the bar using this position option as you can see according to the documentation the syntax is the right position followed by the words top or bottom the example posts the bar at the top will do the same thing so what we can do is we can come to the bar block and I have a beneath or above the colors blog we can write position top now when we save the configuration file and we start I free the bar is at the top understand you can put the bar at the bottom here beneath the colors blog or you can put it above the colors blog you can even put it above the status command it doesn't really matter but you cannot put it inside of the colors blog I free will not understand what you mean when you do that so make sure you paste it in an appropriate place setting the position of the bar is just one option like you saw there actually a bunch of different options for example you can configure which monitors to output the bar on obviously you can change the colors you can also choose whether or not you want to enable the workspace indicators in the top left at the moment you can't see any tray icons because none of the applications I have opened have tray icons but you can if you want to enable or disable the tray icons they are enabled by default but like I say you can't see them because no applications have tray icons I'm not going to belabor any more of the options because I think at this point in this series you should be able to understand the documentation for example if you want to change the font of the bar specifically a lot of people like to give the BIOS off mono space pod while you'd find the font property look at the example and then you see how it says font span going on the font name well that's exactly the same syntax that we used at the start of the video remember when we set the font right here see so you should be able to take the information that I gave you previously and apply it to configuring the bar and other parts of I free something I do think you guys might benefit from though is an explanation of how to configure the blocks which are these sections on the top right here as you can see there is a block for the date and time for the battery for your local IP address for your VPN and also a blog that tells you how much disk space you have left there are other blocks but honestly they're the only ones I understand without more appropriate labels the waiver you configure the blocks on the bar and i3 is actually really interesting if you go back to the config file and look up the bar section again you'll see that there's this option status command and it specifies the status command to be I free status like I've referred to many times in this series a command is simply simply you enter in the terminal so we write for example the I free lock command about locks I free similarly I free status has a command of the same nature if we type in I free status into the terminal do you see how it essentially returns text it says no ipv6 as a pipe symbol then specifies in my disk space available and can you then see how about precise outputs is also placed in the top right there is part of the bar when the I free bar is loaded it basically runs this I free status command takes its output and puts it in the bar it's but simple watch this I can for example go into my I free directory and create a file called BA the SH and I'll open it in vim bear with me for just one minute as I write a little small little scrip to demonstrate other status command works okay it's a very simple shell script I basically printed the console the text hello and then I have an infinite loop which prevents the program from exiting if I close this application and firstly changes permission to be executable I can then run the body SH file and as you can see aside from the syntax errors which I'll address in a second you can see which it prints hello let me quickly fix my syntax errors I think I need a space here now when I run it we don't get too narrow and as you can see the program has an exit state if I want to exit the program how to press control C now what I can do is I can go to the config file and rather than running I flee status I can read my custom command by specifying a path to the home directory the i3 subdirectory then my bar Doh ice age script now when I save the configuration file and restart I free you see in the top right there how it's printing the text hello is because the I free status command is simply returning text and placing it on the bar it's interesting though because that seems like it's far too limiting but in practice it's actually quite good for example I can go into the border SSH file now and say I want to print out the current date and time what I could do is I could replace the text hello with dates and now when I restart I free you can see that it's printing the dates in Suva table right there I could take this one step further I could say echo the date and time is and then I'll have some surround this in parentheses and we start I free you can see we've got a label associated with the date and time we can take this one step further by going to the browser and then going to the font awesome cheat sheet we used in the previous video and taking some kind of icon and then instead of the text the date and time is we could paste the icon save the script and then we start I free and as you can see there is now an icon associated the Dayton's home there is a problem though right now it's telling me that is currently 34 minutes and one second past 1:00 o'clock in the afternoon but it's stuck on one second it's not actually updating another interesting part of the way that this status command works is that it basically takes the continuous outputs and continuously updates the bar so at the moment what I'm doing is I'm printing out the tags and then just never exiting what I could do instead is like it actually print the tags as part of this loop I'll run this personally inside of the terminal to show you what the effect is as you can see it's going to print the value every second but any value this program prints will then be placed into the bar as soon as I restart I free as you can see now in the top right the seconds are constantly incrementing this is just an example to demonstrate how the status command works but it's not something that I recommend you do I don't recommend that you write your own bar script like I have here for example it's not that simple to change the colors also you know getting the date and time is kind of easy you just use the built-in day program and there are by the way arguments that enable you to change the formatting but imagine if you want to get the amount of space left in the desk or if you want to get the volume level you'll have to write your own scripts it will be much better if we were to use an existing program designed for this now you do get a free status installed by default but I prefer to use an application called eye free blocks I think it's much better and that's the program I want to teach you how to use today to install ivory blocks simply write sudo app that gets installed hi free blocks enter your password and just like that I free blocks is installed now when you type in IV blocks into your terminal you get a textual output notice as well how every few seconds the output is refreshed in particular you can see down here at the bottom every five seconds the time is being updated just like we did with our script this is kind of contrary to what I just said I said that any text output by the program would be placed inside of the bar but you'll see that if you go to your I free configuration file and make the status command i've reblogs the in reality is not just spitting out all of those braces and colons is actually interpreting the as a special formats to denote the colors and also the limiters and wit fifty particular blocks already I think this looks nicer but we still want to be able to customize it the first step to configuring I three blocks is to take the default ivory blocks configuration file which was generated when you installed ivory blogs and making a copy of it's in your eye free directory to do that we can use the CP command by default the ivory blocks configuration file is located in the e.t.c directory we want to move it to our current directory now when I list all the files in this directory you can see the I free blocks file you can open this inside of them and get an idea about what's happening in fact we'll come back to this in a second before ivory blocks will detect this configuration file you have to specify BC flag inside of your status command here which instructs ivory blocks where to find the configuration files is no longer in the default location so we're going to specify this it's in the i3 directory and it's called I free blocks calm now we can go back and open the I free blocks configuration file in our editor and start to configure the output for our free blogs for example you can see here there is a volume block just to prove that these configuration files and commands are linked if I delete this entire block and save the configuration file and then we start I free do you see how the volume block isn't there anymore if I add it back watch carefully in the top right specifically to the left hand side of the blocks when I restart I free the volume block comes back this is now a really nice place to start configuring our configuration the first step I think is to sort of remove the properties you don't care about so let's remove this now and remove this stuff we don't care about I personally don't really care about the memory usage I don't really care about this particular memory usage Ivor I'm quite interested in how much disk space I have left so I'll keep that I don't really care about this network interface monitoring I don't have a Wi-Fi card or anything so I'm not interested in that's the bandwidth I don't think that's even working at this point not to mention I don't really care about it so I'll remove it the CPU usage is pretty interesting I'm actually more interested in the load average which is disabled by default welcome back and enable that soon the battery indicator well I'm gonna desktop I don't need that but if you are in a laptop or you have a battery attached then this is probably something you definitely want to have I hope for your sake it works outside of the box I've never used it so I can't tell you for sure if it will work but I've got a strong suspicion that's the kind of thing we should work stabili obviously I want the date and time there are a few other options all of these are commented outs which means that they are not going to be interpreted by the configuration file and just like in the ivory configuration file comments are denoted by these pound symbols anyway I'll save the configuration file now and restart I free it will re execute that I free blocks command basically and as you can see now we've got the date and time we also have the amount of disk space left in the home directory and the current volume level now if you look at the clock in the top right there you can see that it's updating every 5 seconds that's because if we take a closer look at this time block in addition to specifying the command to execute we're also specifying how frequently we should execute that command which at the moment is 5 seconds I want to make it one second I'll save the configuration file and we start I free and now every second the date and time is being updated which is much more suitable in my opinion here we are specifying the format for the date and time so you can see for example it was best playing the year the month then the day and then was best buying the hour the minutes and the seconds you can see that for example the M here is lowercase B here it's uppercase it's because the lowercase M refers to the month and the uppercase M refers to the minutes there are other options fundamentally though all this command is doing is executing the date program which comes pre-installed on Ubuntu remember if you look at the dates help page you can see a whole bunch of options right here see for all of the possible formats so if you want to configure that you absolutely can unfortunately we've got a bit of a problem or should I say I've got a bit of a problem but I also think people running on Ubuntu were likely to encounter this problem as well about problem is that when I change the audio level using my keyboard you might not be able to tell that I am but rest assured I am actually changing the volume the volume indicator at the top right isn't changing at all the treble hair is with the script for i free blocks users doesn't work on ubuntu by default it may not work on most distributions by default let me show you what's happening here if I open another terminal and navigate into the user share I free blocks directory and list its contents you can see there a handful of scripts used by I free blogs for example here's the script that it uses to detect the volume here's the one it uses to detect the amount of disk space if I run the disk script you can see that it correctly returns 9.8 gigabytes and that is correctly emitted in the top right there if I run the volume script you can see that it prints out 100% but if I for example install a program called Pavan control which stands for pulse audio volume control something like that I think and then open it by rafi you can see that the current volume level is actually 43% if I increase it to like 80% say and when the volume script that still says that the volume is 100% to fix this you need to specify an additional argument to the volume script for tells if it should look for the volume according to pulse audio which is simply 2 firstly specify the default value for the first argument which trust me is 5 and then to specify the word pulse so now it says 80% and if I decrease my volume a few notches it says 55% so to do that as far as the configuration file is concerned rather than just lighting I free blocks kind of well let me make this clear firstly that when you call excuse me let me explain the syntax quite briefly you firstly specify a name for the block if the name is volume ivory blocks automatically the text but you want this block to represent the volume level and makes its command property which you saw earlier for the date and time blog the default path to be volume script in this case we need to refer to the volume script manually because we need to specify additional arguments so remember it's in the user shared directory in the ivory blocks directory it's called volume we specify the number 5 and then in our case holes now when I save this file and restart I free you seen Chapra how says the volume is 55% if I open up the bathroom control application you can see that that matches that's good the trouble is though is if I continue to change the volume level using my keyboard buttons it's not updating can you see the problem it's that the interval property is set to you once what this tells I free blocks is that it should only run this command once when it's first loaded but in reality we want to pole B value every one second or so which we can do by setting the interval to one now when I restart I free and start to increase the volume you can see that it actually takes effect one more thing we can do to make the bar just look a lot better is go to that font or some cheat sheet and pick out an icon for it actually I already have an icon in mind for my personal computer so I'm going to go to my dog files and look at the ivory blocks quantify 'el also use this as an opportunity to show you guys that if you want to you can refer to my configuration files and I want this sort of disk icon here I can copy it and then in place of the label home I can just paste the icon now when I save the configuration file and restart I free can you see that now the nine point eight gigabytes label is a disk you can obviously do this for the clock and for the volume as well I'm not going to bother in this particular video because it's not really that instructive one thing I will show you though quickly is that if you disable these wherever if you remove these comments you can rien a belowed average which at the moment is like 0.49 I can also specify label I'll just copy it from the configuration files again because I quite like this one I'll save this now and restart I free and now you can see a sort of label value on the interval to be a lot more frequent than 10 seconds I'll make it one second and well the load average basically gives me some kind of indication of how hard my computer is working so yeah that is roughly how you configure the bar it's a shame really because everybody's going to have different requirements for example if you want a laptop you'll definitely want to show your Wi-Fi and battery status but I can't really show you those things because I'm in a virtual machine on a desktop computer but I really really do hope that through watching these videos you'll have learned enough that you can now have confidence to browse blog posts an article and questions and answer websites and be able to confidently find the information but you need because the reality of the matter when it comes to I free and frankly Linux in general is there are just so many possible combinations of things to do and from the perspective of an tutorial office just myself in this case it's very difficult to address everybody's needs so I'm trying to be specific about certain things so that you can use that information to help you get the results that you want with that said I think that wraps up this series on the i3 window manager thank you very much to all of you who've watched especially those who have watched videos that are ridiculously long like this one I didn't originally plan for them to be this long but this is just that long it takes to explain that stuff I guess again thank you to enjoy the videos I really appreciate it if you comment like and also subscribe also feel free to follow me on social media goodbye

Channel: Alex Booker

Views: 722,528

Keywords: GNU/Linux (Operating System), Linux Kernel (Software), Linux Distribution (Software Genre), Ubuntu (Operating System), Window Manager (Software Genre), i3, i3wm, i3 Window Manager, Operating System (Software Genre), Computer Keyboard (Computer Peripheral Class), Productivity (Literature Subject), Software (Industry), Tutorial (Media Genre), Help.

Id: ARKIwOlazKI

Length: 52min 47sec (3167 seconds)

Published: Mon Nov 16 2015