Django Tutorial - How to Add a Sidebar

Key Takeaways

hey guys and welcome back to a Jiang go tutorial so in today's video it's gonna be a little bit shorter and what we're gonna be doing is simply adding a sidebar to our website and making things look just a little bit nicer now in the next video we're gonna go on to add bootstrap to our website and then be able to make something that looks pretty well like this and I'll show you guys some more of this example in a second but for right now we're just gonna be adding this nice sidebar with some hovers and kind of showing you how to go about doing that so anyways let me give you a quick preview on what our website is going to look like in the next two maybe three tutorials so for example we have these links on the side here we can view all of our different to-do lists so if I go to a new list you can see that we go there we can go to create which will allow us to create a new to-do list and then obviously if we go inside of a to-do list we can see all these nice check buttons we can hit save we can add a new item for example by doing that and this is just kind of the basics I haven't gone crazy with this I could obviously make this look a lot better be a lot more dynamic but this only took me about 15-20 minutes just to style and make everything look decent so anyways that is kind of what we're gonna be working towards in terms of using bootstrap which is just some CSS that's pretty much already made for us and adding a sidebar today okay so let's get out of this and let's go into our what do you call it file here and all we're gonna be doing to add this sidebar is working inside of this base HTML file now because all of these files inherit from based on HTML this makes it really easy to add stuff like a sidebar to our website because all we have to do is add it into the base template it will automatically be added to all of the other ones now what I'm gonna start by doing is just setting up a div here that's gonna represent our sidebar and if you're not familiar with HTML and CSS and all this stuff I'll try to explain how some of this stuff works but it is pretty straightforward you should get it pretty quickly so I'm just gonna say the class is equal to and in this case side now like that and then we will end that div and inside here I'm just gonna put a few links which will be our sidebar items so in this case I'm gonna say slash home and this link name will be home like that and copy these a few times okay so home we'll have create and then we can add one more link if we want to but we don't actually have anywhere for this to really go to yet let's just do like / - and just call this view okay so it needs what I'm doing right now guys in case some of you are confused essentially is this href just stands for where this link is gonna go when we click on it a stands for link tag and this div is just a way that we can style a bunch of different elements at once by doing for example class equals side nav and now what we're gonna do is up here in our head tags is we're going to create a CSS kind of script or style sheet within our HTML file here and define what our side nav is gonna look like now we also need to add a class here to our main div because I'm gonna add some stuff in here in this class will just be called what does it mean like that okay so anyways what I'm gonna do now is go up top here and I'm just gonna add a bit of styling stuff to make this div here that we've added of links appear on the side of the screen and a certain color and then add some hover effects and stuff to it as well so this is really just gonna be adding some CSS at this point so I'm just gonna add some style tags here I will close that style there and in here I'm gonna do type equals and in this case text slash CSS like that and now I'm actually just gonna copy off my other monitor because I can't remember all of the styling I've done on this but essentially if we want access or change the side now the class what we do is we use a period representing a class and then we type the name of our class which is side nav we can add these brackets like this and then inside here is all of the styling we want to apply to our side nav so for example we want the height to be equal to 100 pixels which herbs are in all hundred pixels a hundred percent which means that it's gonna take up the entire height of the screen so you saw that on my left side it took up the entire height we're gonna say width and in this case we'll just give it a pixel value so 160 pixels and you can modify this value if you want we're gonna say position and in this case it's gonna be fixed we could make this a dynamic sidebar but I'm not gonna do that in this part we're gonna say is that index and in this case one which means that it's gonna stay all the way at the top of our screen we're gonna add top which is zero we're going to say the left zero like that which just means again stay in the top left-hand corner of our screen we're gonna say background and in this case is it even there it's not background I believe color and we're gonna say this is pound 1 1 1 which will give us that kind of dark black-ish gray color you guys saw before we'll say overflow X and this is hidden and I don't even remember what this one does oh it does say make sure that we don't go horizontal with our sidebar and then we'll do padding from the top of 20 pixels now just to as a disclaimer here I did not create the sidebar I just found this on some like CSS website and modified some of the attributes so that's what I'm going off of here if you guys want to create a different kind of sidebar you can feel free to modify these kind of properties change the color like they're pretty straightforward and how they work or you can just look up like nice sidebar a nice title bar online and we'll probably give you the CSS and even the HTML on how to do that so now I'm gonna set up what my links inside of my sidebar are going to look like so whenever you want to specify a certain tag from within a class you do the class name and then the actual tag itself so in this case side nav a which means if I highlight this you can see it's actually highlighting all of these a tags here that are inside of my side nav so what I'm gonna do here is say padding and in this case we're gonna say 6 pixels no 8 pixels 6 pixels and 16 pixels and again feel free to mess with these numbers we're going to say text and in this case decoration and this will just be none for now and then down here we're gonna say font and you guys can mess with this as well you have to look up the fonts if you want to know what these mean is 8 1 8 1 8 1 and display in this case is gonna be block style so is that all oh sorry what am I saying this is color and the font I must have misread this here the font is gonna be eat just we're gonna do the font size which is 25 pixels like that okay so that's it for the side a tag and now all that's left to add is actually what happens when we hover over our eight tags so for example if we hover on these we want to change the color so we can do that from within CSS so to do that what we're gonna do is literally just copy this except we'll add this what we call it property here called hover and then all we're gonna do is just simply change the color when we hover so to do this we'll just change this color to f1f1f1 and yeah there we go okay so we've done that now and the only thing left to do actually is move this what do you call it this main content here over to the right because right now what we are actually gonna have you're gonna have the sidebar and then this content will go below the sidebar we don't want that so to move this content block or I guess this class main over that's pretty straightforward it'll do dot main like that and then in here we'll just say margin - left and in this case is 160 pixels did I spell margin correctly no I did not and we'll just add a bit of padding here so say padding and that in this case we'll do zero pixels and ten pixels like that now that should be about it actually for our sidebar and by applying this to our based on HTML file this will apply to our entire web site so let me actually get back into my wouldn't call it file here so I can run this for you guys so a CD Django tutorials CD my site and in this case we'll just do Python manage top I run server and let's grab this link here go to google chrome and let's see how this looks okay so there we go so we've created a nice home page here you can see we have home create view if I go to home so slash home doesn't exist that's just my bad I don't have a slash home page here uh-huh and if I go to create you can see we have this nice little create now and if I go to view it brings me to list item number two or whatever it is or to do list number two so that is precisely how we add a sidebar and you can see that this is a really nice thing that we have essentially is the fact that we have this based on HTML file because look I just applied the sidebar to my entire website really easily so now I actually I feel like I must have forgotten some kind of font size here because on my other website the font looks better but you know what for now that's just fine so anyways I that is actually gonna be it for this tutorial I know this was a bit shorter but this shows you how to add a sidebar it also kind of shows you how you can style some of your different items if you want to add some more content blocks or you want to add classes to specific things you can do exactly what I've just done here inside of your other files as well you can add some style tags or you can add the style tags here and then add the classes on stuff like this and yeah so in the next video we're gonna be adding bootstrap to our website which is a nice CSS styling and we'll make it look a little bit nicer to change some of the fonts and just make everything look a bit cleaner so anyways that has been it for this video if you guys enjoyed please make sure you leave a like and subscribe and I will see you again in [Music]