Python - Django Styling/Adding CSS

Getting Started

Before proceeding into this tutorial, please make sure to visit my previous tutorial about Python - Django Templating so that I won't have to repeat the same steps again.

Creating our Static Directory

In our app directory, which in my case aboutme folder, create a new directory named static. This is where we put all our static files and it can be access by others apps of your website. In this tutorial, we're gonna put out bootstrap in this directory. staticfiles

Checking out Static Directory

We're gonna check if we have set up the directory of our static files. Go to your main app, in my case in samplesite, then open settings.py. Then check the directory for static files if it matches the directory that we have created. staticdir

Adding our Style

Go to the html files of our app and open header.html that we have created in the previous tutorial. Update this with the following codes:
  1. <!DOCTYPE html>
  2.         <title>Python - Django Templating</title>
  3.         <meta charset="utf-8">
  4.         {% load staticfiles %}
  5.         <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">            
  6. </head>
  7.         <div>
  8.                 {% block content %}
  9.                 {% endblock %}
  10.         </div>
  11. </body>
  12. </html>

Running the Server

Run our server and our site should look like this after adding bootstrap. sitebootstrap That ends this tutorial. After adding the CSS, you can now style your website by editing our home.html. Happy Coding :)

Add new comment