In your project's templates  folder, you’ll find all its HTML files, plus those for the addons in the project.

Our 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

We'll use a base.html  template for the project, that all other templates can inherit from. 

We have downloaded a theme with its own templates. We're going to use the theme's about.html template as our new base template.

Copy the about.html  file from the downloaded theme folder into your project’s templates  folder.

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

In your browser, refresh the page to see the effect of your changes. You'll notice that it doesn’t look quite right. That's because the static files the page needs (CSS and JavaScript) are not being loaded yet. 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 styles and 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 are 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'>

This link should be modified, so that the fonts are loaded over HTTPS instead. Change http  in the link to https  .
___

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 now 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?