Writing your first Django app, part 6

This tutorial begins where Tutorial 5 left off.We’ve built a tested Web-poll application, and we’ll now add a stylesheet andan image.

Aside from the HTML generated by the server, web applications generally needto serve additional files — such as images, JavaScript, or CSS — necessary torender the complete web page. In Django, we refer to these files as “staticfiles”.

For small projects, this isn’t a big deal, because you can keep the staticfiles somewhere your web server can find it. However, in bigger projects –especially those comprised of multiple apps – dealing with the multiple setsof static files provided by each application starts to get tricky.

That’s what django.contrib.staticfiles is for: it collects static filesfrom each of your applications (and any other places you specify) into asingle location that can easily be served in production.

Customize your app’s look and feel

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

Django’s STATICFILES_FINDERS setting contains a listof finders that know how to discover static files from varioussources. One of the defaults is AppDirectoriesFinder whichlooks for a “static” subdirectory in each of theINSTALLED_APPS, like the one in polls we just created. The adminsite uses the same directory structure for its static files.

Within the static directory you have just created, create another directorycalled polls and within that create a file called style.css. In otherwords, your stylesheet should be at polls/static/polls/style.css. Becauseof how the AppDirectoriesFinder staticfile finder works, you can refer tothis static file in Django as polls/style.css, similar to how you referencethe path for templates.

Static file namespacing

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

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

polls/static/polls/style.css

li a {
    color: green;
}

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

polls/templates/polls/index.html

{% load static %}
 
<link rel="stylesheet" type="text/css" 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

...\> py manage.py runserver

Reload http://localhost:8000/polls/ and you should see that the questionlinks are green (Django style!) which means that your stylesheet was properlyloaded.

Adding a background-image

Next, we’ll create a subdirectory for images. Create an images subdirectoryin the polls/static/polls/ directory. Inside this directory, put an imagecalled background.gif. In other words, put your image inpolls/static/polls/images/background.gif.

Then, add to your stylesheet (polls/static/polls/style.css):

polls/static/polls/style.css

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

Reload http://localhost:8000/polls/ and you should see the backgroundloaded in the top left of the screen.

Warning

Of course the {% static %} template tag is not available for use instatic files like your stylesheet which aren’t generated by Django. Youshould always use relative paths to link your static files between eachother, because then you can change STATIC_URL (used by thestatic template tag to generate its URLs) without having to modifya bunch of paths in your static files as well.

These are the basics. For more details on settings and other bits includedwith the framework seethe static files howto andthe staticfiles reference. Deployingstatic files discusses how to use staticfiles on a real server.

When you’re comfortable with the static files, read part 7 of thistutorial to learn how to customize Django’sautomatically-generated admin site.