Writing your first Django app, part 6¶
This tutorial begins whereTutorial 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 whatdjango.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.
Where to get help:
If you’re having trouble going through this tutorial, please head over totheGetting Help section of the FAQ.
Customize yourapp’s look and feel¶
First, create a directory calledstatic in yourpolls directory. Djangowill look for static files there, similarly to how Django finds templatesinsidepolls/templates/.
Django’sSTATICFILES_FINDERS setting contains a listof finders that know how to discover static files from varioussources. One of the defaults isAppDirectoriesFinder whichlooks for a “static” subdirectory in each of theINSTALLED_APPS, like the one inpolls we just created. The adminsite uses the same directory structure for its static files.
Within thestatic directory you have just created, create another directorycalledpolls and within that create a file calledstyle.css. In otherwords, your stylesheet should be atpolls/static/polls/style.css. Becauseof how theAppDirectoriesFinder staticfile finder works, you can refer tothis static file in Django aspolls/style.css, similar to how you referencethe path for templates.
Static file namespacing
Just like templates, wemight be able to get away with putting our staticfiles directly inpolls/static (rather than creating anotherpollssubdirectory), 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 adifferent 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 bynamespacing them. That is, byputting those static files insideanother directory named for theapplication itself.
Put the following code in that stylesheet (polls/static/polls/style.css):
polls/static/polls/style.css¶lia{color:green;}
Next, add the following at the top ofpolls/templates/polls/index.html:
polls/templates/polls/index.html¶{%loadstatic%}<linkrel="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...\> py manage.py runserverReloadhttp://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 animages subdirectoryin thepolls/static/polls/ directory. Inside this directory, add any imagefile that you’d like to use as a background. For the purposes of this tutorial,we’re using a file namedbackground.png, which will have the full pathpolls/static/polls/images/background.png.
Then, add a reference to your image in your stylesheet(polls/static/polls/style.css):
polls/static/polls/style.css¶body{background:whiteurl("images/background.png")no-repeat;}
Reloadhttp://localhost:8000/polls/ and you should see the backgroundloaded in the top left of the screen.
Warning
The{%static%} template tag is not available for use in static fileswhich aren’t generated by Django, like your stylesheet. You should alwaysuserelative paths to link your static files between each other,because then you can changeSTATIC_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 thebasics. 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, readpart 7 of thistutorial to learn how to customize Django’sautomatically-generated admin site.
