Django, Bootstrap, and you!

Last post I talked about how to get bootstrap integrated into your Django app.  This week I want to dive a little deeper into how to use bootstrap themes and customize them easily.

While the default bootstrap theme that Django-bootstrap uses by default is much nicer than I could design, there are many, many options on the web for different bootstrap themes.  In this post we’re going to pull in a different theme, and then figure out how to modify with minimal effort.

Loading Different Themes

There are many sites containing free (and paid!) bootstrap themes which you can try out, download and modify until you get the look you want.  A quick search this evening produced several hits.  I’ll be using bootswatch in this example, but other sites should work in similar manners.
The mechanics of this are actually quite simple.  There’s a dictionary that django-bootstrap3 uses from your settings.py file called, wait for it….
BOOTSTRAP3!
The Django-bootstrap documentation lists all of the various things you can set here, but the one we’re concerned with here is the theme_url setting.
So, say you went to bootswatch and thought you’d give the superhero theme a try.  The “Download” button on the site lists a bunch of options, only the first two are of interest to us today; bootstrap.min.css and bootstrap.css.

The two files should be the same with the exception that the .min. file has all of the whitespace removed from the css portion of it. (Usually the header comments still have whitespace.)   This is done to minimize the amount of data that needs to be served on high-volume sites.   If you’re trying to read or edit a theme file, you’ll want the regular version.    There are several websites that will help you minimize your css when you’re ready to deploy.

Try downloading both of the css files and looking at them.

When you download these files, you’ll want to store them in the static files directory of your Django app.  For my app the app directory is tasks, so the full path of where the min file is stored is tasks/static/bootstrap/css/bootstrap.min.css.  (The non-min version is stored in the same directory).

Once you’ve downloaded them, you tell the Django-Bootstrap3 module to use that with the following setting:

BOOTSTRAP3 = { 'theme_url': '/static/bootstrap/css/bootstrap.min.css', }

Don’t be a Jerk

While you’re playing around with different themes, you can simply use the URL they have for the download and put it into your settings like this:

BOOTSTRAP3 = { 'theme_url':
              'https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css', }

But don’t be a jerk.  If you’re actually going to use the theme, download it and serve it statically from your site.  The people providing these themes shouldn’t have to pay to serve content for your web app.  I think it’s fine to use it for trying out a bunch of themes, though.

Customizing your Theme

When you decide to customize the theme you’ve downloaded, I’ll pass on advice I read somewhere doing research for this post.  Rather than just editing the downloaded theme’s css file, you can take advantage of the “cascading” part of CSS and create a file which just has your changes in it.  This keeps your changes separate from the theme which makes it much easier to change themes or roll to a new version of the same theme if and when it becomes available.

I’ve found two ways to do this, and I’m frankly not sure which is “better” or more pythonic.

Method One

The method I figured out first was to use two different ways to include a CSS file into your app.  The BOOTSTRAP dictionary, shown above, gives you the first.  In this method you use that to point to the unmodified theme file.  Then, in the base.html template (which is now included in all other templates) you manually include the link to your changes file.  This makes the bootstrap section of my base.html file look like:

   {% load bootstrap3 %}
   {% bootstrap_css %}
   {% bootstrap_javascript %}
   {% bootstrap_messages %}
   <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/mybootstrap.css' %}" />

While this spreads the information about which css files you’re using around the system a bit more (which I dislike), it keeps your modifications completely independent of the base theme file (which I like).

Method Two

This method actually came to me while I was writing up this post.  CSS allows your to include other CSS files in them.  It turns out, if the included file is in the same directory, the syntax is pretty straightforward.   Simply add this line to the top of your css file (it must be the first line, I believe).

@import url("superhero.min.css");

You’ll then need to have your changes file in the BOOTSTRAP dictionary in settings.py:

BOOTSTRAP3 = { 'theme_url': '/static/bootstrap/css/mychanges.css', }

and, if superhero.min.css is in the same directory as your mychanges.css, it will just work!

Looking at it more, it feels like this solution is a little “cleaner”, but I’m interested to hear if you have an opinion.

Author: Jim Anderson

I'm a gray-haired coder and an avid snowboarder. I've had a long career doing all levels of software development from assembly language on 8 bit micros to Java Servlets for enterprise servers. Mainly my work consists of C/C++ on embedded systems, however. I enjoy Python coding and Django as a hobby. Almost as much fun as a powder day!

Leave a Reply

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