Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Add some app-specific static content to your site. This is CSS or other static files that are only needed by one particular app, not the whole project. Understand how to include app-specific content in your project, and why you might want to do so.
Managing Static Files: The Django documentation goes into more detail about how Django serves static content in different environments. If you'd like more detail than what we've gone into here, I recommend checking out the docs. Always read the docs!
You can also use template tags to
get at other data in your project,
0:00
including your static files like your CSS.
0:05
In Django, you need to store your
static files in a special way.
0:08
It's best to store your project-wide
static files in a directory called assets.
0:14
In our case, the setup looks like this.
0:19
To add CSS that's specific
to an app however,
0:22
you need to follow a slightly
different pattern.
0:26
If we wanted to add CSS
to our courses app,
0:29
we'd need to add a directory called
static underneath our courses app.
0:33
That directory contains its own
directory also called courses.
0:38
Static slash courses then contains
directories for your CSS,
0:43
your JavaScript files, and
any images you're using in your app.
0:47
This is so the Django can always
find the files you're referring to.
0:53
Adding a directory with the same name
as your app inside your static folder
0:58
feels a little weird, but it helps you
avoid namespace collisions later on.
1:03
For example, if your project
had an app called admin, and
1:09
another called main site, and
both of those apps had static
1:13
files associated with them,
they might have files with the same names.
1:17
Styles.css is a really common
way to name a basic CSS file.
1:21
When Django tries to find
styles.css in the static folder for
1:28
your admin app, if you have the extra
directory with the name of your app,
1:33
then Django goes to the CSS
directory in static/admin,
1:38
and that extra admin helps Django
know it's in the right place.
1:42
This is called namespacing.
1:47
So let's try it out.
1:49
Make sure to reload your workspace,
1:52
because the new workspace
has some new CSS files.
1:54
We added some CSS to our courses app.
1:58
Let's walk through how that's
set up before we get started.
2:01
First, we created a new directory
in the course's app called static.
2:04
Next, we created a directory
within the static directory
2:10
with the same name as our app, courses.
2:13
Finally, we created a directory called
CSS inside the course's directory.
2:17
This is where we store the CSS
file that is specific to this app.
2:22
Now, we just need to add this new CSS to
our templates, but we have a problem,.
2:27
This is app specific CSS, so
we should not add it to layout.html.
2:32
We don't want this CSS to be used
on other pages in this project
2:38
that aren't in the course's app.
2:43
So, we should add a new
block tag to layout.html.
2:45
So we'll add that here,
right below the existing style sheet.
2:51
We just open up a new block tag,
call it static, and immediately close it.
2:55
We add the static block after
the original style sheet
3:01
because we don't want to have to add
the project wide CSS to each template.
3:05
The static tag is for
app specific CSS in other templates.
3:10
Now, let's open up course
list.html in the course's app and
3:15
add our app specific CSS to this file.
3:20
So first, right here above the block
title, we will add our block static tag.
3:24
And I like to immediately close it, so
I don't have to remember to do that later.
3:32
And we can also save ourselves a little
bit of typing by copying the link
3:36
to the existing style sheet and
pasting it here.
3:41
We just have to remember
to change this path.
3:45
Now here, we're going to be a little more
specific about the path to the CSS file.
3:48
So we'll say courses/css/courses.css.
3:55
This is so Django will definitely know
where to look to find this particular
4:01
CSS file.
4:05
We also need to add the load
tag to the top of this page.
4:06
So, load static from static files.
4:10
This lets Django know that we intend
to load some new static content.
4:15
Now, we just need to start our server.
4:19
So we will change directories
into learning site and
4:22
then use python manage.py
4:26
ruserver on our port to
take a look at our site.
4:30
So here we can see that the titles
of the courses are navy blue,
4:39
instead of the maroon color
that you see in the header.
4:43
This is because this particular
page is using our app-specific CSS.
4:47
If we open the CSS file,
we see that the CSS that we changed
4:52
is the color of these headers,
which is now navy blue.
4:56
So that's the static tag in a nutshell.
5:01
In the next video, we'll get into
some useful built-in filters, and
5:04
start building our own
custom template filters.
5:08
You need to sign up for Treehouse in order to download course files.
Sign up