In your project's "templates" folder, you’ll find all the HTML files. Each Addon has its own folder with the specific templates required for the application to work (we’ll cover this later).

Since django CMS is based on Django, the templates use the Django template language (DTL). If you know Smarty or Jinja2, DTL will look very familiar to you. We only need the basics for this tutorial, though.

base.html

The basis of all django CMS websites is the base.html template. Most of the other templates will "inherit" from this template. Our project already comes with an example base.html.

Since we want to incorporate the previously downloaded theme, copy the about.html file from the downloaded theme folder into your project’s “templates” folder.

Then, delete the "base.html" file and rename the "about.html" to "base.html".

In your browser, refresh the page to see the effect of your changes. You might notice that it doesn’t look quite right. This is due to your static files not being properly linked. Let’s fix this.

Open "base.html" in your code editor (i.e. Atom, Brackets, Sublime or similar). The first couple of lines should look like this:

<!DOCTYPE html>
<html lang="en">

<head>  

    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
...

To enable some basic features in the template, we need to add the following code on the first line:

{% load staticfiles i18n cms_tags sekizai_tags menu_tags %}
<!DOCTYPE html>
<html lang="en">

<head>
...

___

Template Tags
The code above declares static files (staticfiles) and use of internationalization (i18n), includes cms features (cms_tags, menu_tags) and defines some blocks to render on-demand files for i.e. styles or javascript (sekizai_tags).
___

The base.html file contains nine references to files we need to modify. Let’s start at the top with three CSS files:

<!-- Bootstrap Core CSS -->    
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Theme CSS -->    
<link href="css/clean-blog.min.css" rel="stylesheet">  

<!-- Custom Fonts -->  
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

To load files from the django CMS static folder, we need to modify them as follows:

<!-- Bootstrap Core CSS -->   
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">  

<!-- Theme CSS -->  
<link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">

<!-- Custom Fonts -->  
<link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">

___

About External Files
The theme contains additional files that get loaded from an external source, such as:

<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

These files don’t need to be modified and can be left untouched.
___

Next, we’ll replace the header picture. You’ll find it here:

<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('img/about-bg.jpg')">

We’ll change it in the same way as the previous files:

<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url({% static 'img/about-bg.jpg' %})">

The last file paths we need to modify are the javascript files at the very end of the template:

</footer>

<!-- jQuery -->
<script src="vendor/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>

<!-- Theme JavaScript -->
<script src="js/clean-blog.min.js"></script>

Change the paths to:

</footer>

<!-- jQuery -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>

<!-- Bootstrap Core JavaScript -->
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>

<!-- Contact Form JavaScript -->
<script src="{% static 'js/jqBootstrapValidation.js' %}"></script>
<script src="{% static 'js/contact_me.js' %}"></script>

<!-- Theme JavaScript -->
<script src="{% static 'js/clean-blog.min.js' %}"></script>

Save your changes, go back to your website and refresh. Your site should look like this:

Adding the django CMS Toolbar

Adding the django CMS toolbar to your template is very simple and just requires the addition of five tags:

  • {% cms_toolbar %}
    Loads the toolbar itself
  • {% render_block "css" %}
    Loads necessary CSS files for django CMS and its addons
  • {% render_block "js" %}
    Loads necessary Javascript files for django CMS and its addons
  • {{ ALDRYN_SNAKE.render_head }}
    Loads necessary files for Divio Cloud and its addons to the top
  • {{ ALDRYN_SNAKE.render_tail }}
    Loads necessary files for Divio Cloud and its addons to the bottom 

These elements need to be placed as follows in the base.html template:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- django CMS -->
{% render_block "css" %}

<!-- Divio Cloud -->
{{ ALDRYN_SNAKE.render_head }}

</head>
<body>
    <!-- django CMS Toolbar -->
    {% cms_toolbar %}

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-custom navbar-fixed-top">
...
<!-- Theme JavaScript -->
<script src="{% static 'js/clean-blog.min.js' %}"></script>

<!-- django CMS -->
{% render_block "js" %}

<!-- Divio Cloud -->
{{ ALDRYN_SNAKE.render_tail }}

</body>

After you applied these changes hit “Save” and reload. Now we can move to the next step.

Did this answer your question?