Add a Stylesheet and an Image

Introduction

This tutorial begins where **Create Some Automated Tests** left off. We've built a tested web-poll application, and we'll now add a stylesheet and an image.

Skills Graph

Customize your app's look and feel

First, create a directory called static in your polls directory. Django will look for static files there, similarly to how Django finds templates inside polls/templates/.

Django's STATICFILES_FINDERS setting contains a list of finders that know how to discover static files from various sources. One of the defaults is AppDirectoriesFinder which looks for a "static" subdirectory in each of the INSTALLED_APPS, like the one in polls we just created. The admin site uses the same directory structure for its static files.

Within the static directory you have just created, create another directory called polls and within that create a file called style.css. In other words, your stylesheet should be at polls/static/polls/style.css. Because of how the AppDirectoriesFinder staticfile finder works, you can refer to this static file in Django as polls/style.css, similar to how you reference the path for templates.

Static file namespacing

Just like templates, we might be able to get away with putting our static files directly in polls/static (rather than creating another polls subdirectory), but it would actually be a bad idea. Django will choose the first static file it finds whose name matches, and if you had a static file with the same name in a different application, Django would be unable to distinguish between them. We need to be able to point Django at the right one, and the best way to ensure this is by namespacing them. That is, by putting those static files inside another directory named for the application itself.

Put the following code in that stylesheet (polls/static/polls/style.css):

li a {
  color: green;
}

Next, add the following at the top of polls/templates/polls/index.html:

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

The {% static %} template tag generates the absolute URL of static files.

That's all you need to do for development.

Start the server (or restart it if it's already running):

python manage.py runserver 0.0.0.0:8080

Reload Web 8080 tab and you should see that the question links are green (Django style!) which means that your stylesheet was properly loaded.

Adding a background-image

Next, we'll create a subdirectory for images. Create an images subdirectory in the polls/static/polls/ directory. Inside this directory, add any image file that you'd like to use as a background. For the purposes of this tutorial, we're using a file named background.png, which you can find in the /tmp/background.png directory in VM.

You need to copy the /tmp/background.png to polls/static/polls/images/background.png.

Then, add a reference to your image in your stylesheet (polls/static/polls/style.css):

body {
  background: white url("images/background.png") no-repeat;
}

Reload Web 8080 tab and you should see the background loaded in the top left of the screen.

The {% static %} template tag is not available for use in static files which aren't generated by Django, like your stylesheet. You should always use relative paths to link your static files between each other, because then you can change STATIC_URL (used by the static template tag to generate its URLs) without having to modify a bunch of paths in your static files as well.

These are the basics. For more details on settings and other bits included with the framework see the static files howto </howto/static-files/index> and the staticfiles reference </ref/contrib/staticfiles>. Deploying static files </howto/static-files/deployment> discusses how to use static files on a real server.

When you're comfortable with the static files, read Customizing Django's Admin Site to learn how to customize Django's automatically-generated admin site.

Summary

Congratulations! You have completed the Add a Stylesheet and an Image lab. You can practice more labs in LabEx to improve your skills.