Django Static Files CSS Stylesheets | Django Project | djblogger | 24

welcome to the Django project DJ blogger this tutorial is part of a YouTube Django Project Playlist which you can access in the video description you can watch the whole course from the very beginning if you enjoyed this course and would like all the updated tutorials and Associated Kodi samples and more you can check out this course and other courses this project features at udemy the link to the course is in the video description static files as the name suggests are generally files that won't change throughout our application now imagine we created a dynamic web page that page or that code on that page might change in order to change the color or features on that page so static files might include for example CSS stylesheets it might include JavaScript files so here in our application we're going to need to build an area within our application where we can store static files which can be served as well as our web page to the user in order for us to style or ADD code which is going to be needed by our website in order to work correctly so it seems like a good idea because everything in our project is inside the DJ blogger folder let's go ahead and add in our new folder called let's just call it static so inside of here we want to serve static files so a static file in this case in our case will be a CSS file so a cascading style sheet so here we're going to Define styles that we want to apply to our web page so let's go ahead and call this main.css we will need to tell Django where the static folder resides so in order to test this let's go ahead and just type some CSS here so don't worry if you're new to CSS I will explain this shortly but it is really simple to follow and pick up so we're going to just change the background color notice that Visual Studio code here has also given us a helpful hand here so let's just pick a color for example so basically what I'm going to do is what we're going to do is set up static folder and by actually changing something on our web page we can test to see if this working correctly so what we have here then is a CSS file we're going to use this to create Styles or change styles on our web page it's a static file this is going to be served as well as the HTML template to the user so on the user end in their browser everything gets styled correctly now what we're going to need to do here in our base let's go back to our templates and base here what we're going to need to do is we're going to need to include this static file in the actual base template so it actually loads up so this is going to go inside the head section you can see that there already is a CSS file here from from bootstrap so to add a new to add a new style sheet we're going to use this link so inside this link it doesn't have a start and end tag so it's just linked so there are some tags that don't have a start name but most HTML tags has a have a start and you can see that they end with the same name and a forward slash but not a link so our link here as row so we're going to Define this as a style sheet and then what we need to do then is to find where we're going to find this style sheet so href and then echoes and then we need to Define our style sheet so here we're going to have or we're going to Define our static so in a minute when we set this up it's going to make sense so we need to call our static folder so what we're trying to do here inside of here is to create a link to it now what we need to do in Django is set up where the static folder is so we're going to grab that location and which we're going to set in a minute and then we need to Define where it is so in our project we're going to find it in DJ blogger inside of there it looks like oh no play it again it's uh we're defining now inside the static folder here so apologies Let's uh go inside of our static folder here let's create a new folder let's call this um let's just call this the um CSS folder so I'm just going to create a folder called CSS here and let's put main inside of a CSS that's just in case for example in our static folder we wanted to add other files just makes it nice and logical and easy to understand where our files might reside so CSS is going to be inside of our CSS folder inside of static so let's go to static so that refers to this folder here and then inside of static our CSS is going to be in the CSS folder and then inside of there we're looking for main.css okay so hopefully that's going to make sense of course this static is a little bit abstract at the moment because we haven't set that up but like I said that's the link that we're going to to find in a minute to tell Django where to find this folder and then once it's found that go into CSS folder and then open up main.css so on this page what we need to do up the very top here first thing is to load we're kind of doing this backwards almost but we're going to need to load the static okay so that will load static and then that will give us the option then to go to that folder and then access our main.css now it's also worth noting that this is going to be utilized predominantly here in development when we go to production we might make some changes to this right but let's just familiarize ourselves with this process and now what we need to do is Define our static folder so that is all going to be in the settings file so let's go into our DJ blogger let's go into our settings we can find them I can't find him okay let's just bring everything down TJ blogger um TJ blogger settings folder there we go right so inside of his base so inside of it we go down a little bit we can see we have some template options and right at the bottom here we have something called Static URL so we have initially placed static inside of our inner DJ blogger folder here because it kind of makes sense the fact that this these files are going to be needed for our app obviously we're placing everything inside of here so it makes perfect sense but in addition to that ultimately my static files they are probably going to be placed somewhere else for example on another service online and they're going to be then served from that service so static folders and files aren't necessarily going to be naturally placed in my opinion inside of our app here although it is attached to this folder ultimately they are going to be a folder which I want to manage separately when I actually deploy my application so I'm going to drag this out and put it into the upper DJ blogger area so we have a static right here now which is in the outer DJ Builder I've just dragged it out it's no longer in the inner DJ blogger so you can see the static URL here it's going to look for the main project folder DJ blogger and then potentially at the moment it's going to look for this static folder so let's just test this out now I'm making the Assumption you have made some changes here to the body we're trying to change the background color so let's go back into our code it just refresh and you can see that isn't necessarily working at this point so I'm going to open up Chrome at this point so I've now opened up Google Chrome here because it's probably likely that you're using Google Chrome so let's utilize some of these tools you had to diagnose what's going on if I press F12 that's going to bring up this panel here and we can take a closer look at the code so here in the elements you can see that it shows me all the code and this corresponds if you take a look at it it will correspond to the code that we've already written in our templates so up top here in the body we should find our style sheet it's right here and you can see the link to it so potentially we could for example copy this and we could navigate to it if static was working correctly it's likely that we would be able to see our static file here or it would be downloaded so let me show you with the if we just go back with this link here this is the style sheet from bootstrap if I were to use that link you can see it shows me all the CSS indicating that we can access it so clearly we can't access this static file at the moment so now we have a way of checking our static files from the front end let's go back into the base here and just show you the different settings that need to be configured potentially before we can set up static files so it might change or it might you might have a different experience on your build and I want to try and make sure that you have enough information to fix any problems that you might have now it's important to make sure that these static files is in the installed app now if you have just created a Django project that will be automatically added by default so that's the first setting for static files so next up at the bottom here you've seen that we have this static URL which defines where we're going to serve the static files from when we're in the browser it's going to be slash static slash so that should then navigate to the static folder now what we can do here in Django is we can Define other static folder or we can tell Django where to look for other static files so static files directory and in here we can then tell Django to look for something so we can use the base directory that's the base directory that we set at the top here and then we can tell Django to look for the base apology space directory and then look for a folder so in this case it's going to be static now what we need to remember here is that we have a slightly custom setup here in actual fact in terms of how we're setting up our project in comparison to maybe how others or others you may have seen have set up their project being that we're trying to put everything inside of this DJ blogger in a folder now what we've done earlier is we took these static folders out of the main DJ blogger folder and we've added it here in the outer DJ blogger area so it's in this outer DJ blogger area and I did that for reasons that you know eventually the static folder will reside somewhere else when we deploy this maybe on for example Amazon services so I'm going to serve them from a different place so I'm going to move that back now into DJ blogger okay so I'm going to move that folder back now into DJ blogger and add it in to the inner DJ blogger folder because here our base directory is the DJ blogger folder now if I were to add static to the the outer DJ blogger folder I would need to add another parent here and this would now refer to the base directory being this outer TJ blogger folder so because I'm working inside of this DJ in a folder I have defined my base directory inside of this folder so that's where I'm looking for static folders at this point so what I've done here is I've taken the base directory which is this folder here DJ blogger and then I've looked for a folder called Static so I have now successfully connected this static folder up so everything should work now so let's go back into my um CSS is so make sure you've got some sort of color set here so let's just change this to Blue Violet okay so that's in my main CSS so just make sure you've got background color set there and let's go back into Chrome I'm now going to refresh and my site can't be accessed because I haven't got the server on always a good thing so let's go back and we're now going to refresh and you can see they're still not working right so let's try this out again you may have heard the surprise in my voice so we still can't find our file okay so I can see the problem here apologies static files duh with an s on the end we're going to need an S here so let's go back to our code let's refresh and there we go so we can now access our CSS page so it should work and there we go so a quick recap then first of all make sure that the base directory is pointing in the right place otherwise it won't work at all so here we have parent parents so currently we're inside of this DJ blogger folder so that's the first thing second thing just make sure you have a static file app installed third we're going to need to make sure our static URL is set so that's set the name is the same as the the folder that we're using and then we have told Django to look in some additional places so that includes the static folder that we generated here so Django looks for the base directory path which is inside of his D in a DJ blogger folder here and then inside of that we have a static file folder sorry and that's where all of our static files are going to be placed and then for the front end we need to tell Django to load static in our template then we use static to refer to the URL that we're building here for the style sheet and then inside of that folder we have CSS and inside of that folder we have main.css that's our CSS file

Channel: Very Academy

Views: 20,750

Keywords: django tutorial, django blog, django project, static files, django css static file

Id: GfyP_MYtLng

Length: 14min 14sec (854 seconds)

Published: Wed Jan 04 2023