Let’s head back to the Divio App. Here, we’ll change the look and feel of our website and better understand its templates.

The project setup downloaded all files into a newly created folder within your defined workspace. You can open the folder by clicking on the following icon:

For this tutorial, we’ll only be focusing on the following folders inside your project directory:

  • Static
  • Templates

In the next part we will copy the theme files into this folder.

Downloading the Theme Files

Our page looks a bit empty with just a basic menu and the following message:

"This page has no content yet. Make sure you are in Edit mode (hit the Edit page button if required). Then switch to Structure mode."

Let’s change this by adding a theme.

We’ll be implementing the Clean Blog theme, which is an open-source Bootstrap 3-based project for this tutorial.

Download the zipped archive of version 3 of the theme. (Important: use this version, not the newly-released version 4.)

Extract the ZIP file somewhere near your workspace, since we’ll be moving a few files around. Open the extracted folder into a separate window.

Move the extracted Clean Blog Theme to the left of your screen. On the right open the currently synced project. Notice that you’ll need to select the following from the extracted theme folder on the left:

  • css
  • img
  • js
  • vendor

Copy these folders into your project’s “static” folder (on the right). Make sure to overwrite all files and folders when prompted to do so. 

Did this answer your question?