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. The first couple of lines should look like this:

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

  <head>

    <meta charset="utf-8">
...

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>

    <meta charset="utf-8">
...

___

Template Tags
The code above declares static files (staticfiles) and use of internationalisation (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">

<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
...

<!-- Custom styles for this template -->
<link href="css/clean-blog.min.css" rel="stylesheet">

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">

<!-- Custom fonts for this template -->
<link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet" type="text/css">
...

<!-- Custom styles for this template -->
<link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">

___

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

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

These link do not need adaptions.
___

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

<!-- Page Header -->
    <header class="masthead" style="background-image: url('img/about-bg.jpg')">

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

<!-- Page Header -->
<header class="masthead" 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>

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

<!-- Custom scripts for this template -->
<script src="js/clean-blog.min.js"></script>

Change the paths to:

</footer>

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

<!-- Custom scripts for this template -->
<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:

  <!-- Custom styles for this template -->
  <link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">

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

  <!-- Divio Cloud -->
  {{ ALDRYN_SNAKE.render_head }}
</head>
<body>
  <!-- django CMS Toolbar -->
  {% cms_toolbar %}

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
  <!-- Custom scripts for this template -->
  <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?