An Introduction to Django – Part 6

Last time, we finished up investigating testing.  Now, we will try to customize the look and feel of our app by adding an image and a stylesheet.

To customize our web app, we might need additional files like images, JavaScript, or CSS.  In Django, these files are called static files.

Customizing The Look of Our App

We will want to store all of our static files together, since our project is small (just one app).  For a larger project, this might get tricky because we could have multiple sets of static files.

For now, lets just create a static directory within the polls directory.  Remember in Part 2 that we found out that Django looks for templates inside the polls/templates directory.  In the same way, Django will also look for our static files within the polls/static directory.

Just like our templates directory, create another directory named polls within our new static directory.  Now, create a file called style.css within that directory.  For a review, we just created this: polls/static/polls/style.css.

This file will be our stylesheet.  A stylesheet is essentially a template that will let our web app know how we want it to look (things like font, color, and layout settings).  Put the following in our style.css file:

li a {
    color: green;

This tells our web app that we want our lists to be green.

Next, open the index template file (polls/templates/polls/index.html) and add the following to the top of it:

{% load staticfiles %}

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

Now, start up your development server by opening the command line where your file is and typing the command

python runserver

Next, load up the web app at http://localhost:8000/polls/.  You should notice that our link is now green!


Add a Background Image

Before we add a background image, we need to create a place to store our images.  Create a folder named images within the polls/static/polls directory.  Next, put the picture you want to be your background image in this folder and call it background.png (or whatever file extension you want or need).  Add the following to your stylesheet and reload the app:

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

Note, if you didn’t use a .png image, you will need to change the extension in that line.

Your image should now show up in the bottom right of the web app.  I used my TechTrek logo and it looks like this:


This is just a quick overview of customizing your web app.  We could go much more in depth in any part of this, including learning a lot more about CSS.

Next time will be the final part in the series.  We will look at creating and customizing an admin site.  After that, we’ll work on creating our own app (the pantry app!).

Have questions or suggestions?  Please feel free to comment below or contact me.

Leave a Reply

Your email address will not be published. Required fields are marked *