.. _customizing_templates: Customizing Templates & CSS =========================== Overview --------- Wagtail CRX is an extension of Wagtail. You can further customize your site by overriding the built-in templates to suit your needs. For this tutorial, we will assume that you have basic knowledge of the Django templating system. You can read more about it by visiting `Django template language `_. The templating language uses a series of ``{% %}`` to pull in content from your page models (found in the ``models.py`` file) and add minimal logic to the page. This allows it to render the page after content is added in the CMS and allows you to create multiple pages with the same layout. At the top of the page, you also want to make sure to either specify that you are **extending a page template** and that you are pulling in Wagtail tags to make your template work the way it should. .. note:: If you are completely overriding a template, you will not use the ``{% extends "path/to/template" %}`` at the top of your template. You do, however, need to make sure to use the appropriate template tags at the top of the template or your template will not render. The templates directory inside your ``website`` app will override the default coderedcms templates if they follow the same name and directory structure. This uses the standard Django template rendering engine. For example, to change the formatting of the article page, copy ``coderedcms/templates/coderedcms/pages/article_page.html`` to ``website/templates/coderedcms/pages/article_page.html`` and modify it. The `source code for built-in templates can be found on GitHub `_. Example 1: Navbar Customization ------------------------------- The built-in template for the navbar can be found in ``templates/coderedcms/snippets/navbar.html``. This file may not actually be in your installation folders for your site; however, you can see its contents by visiting the Wagtail CRX source code here: `navbar.html `_. Let’s say that you want to have a 2-tiered navbar with the logo on the top tier and the menu items on the second tier. The default navbar does not have that as an option, so you will want to override this template. Look at your folder structure for your project. By default, your project starts with a "website" folder (also known as a directory). In that directory there will be this path to base.html `templates/coderedcms/pages/base.html.`. This file is here for your convenience, you can add imports (like a google font) and it will override the default ``coderedcms`` base.html template. In the `website/templates/coderedcms` folder you are able override other ``coderedcms`` templates. To do this, the file structure and name must match the default templates. The `source code for built-in templates can be found on GitHub `_. Many of your custom templates will go into your ``website`` folder because they are not overriding the default templates in the CMS but either extending them or creating completely new ones specific to your site. .. note:: Adding templates to the ``coderedcms`` templates folder does not change the default templates throughout all of Wagtail CRX but does override those specific templates for your website app. Your ``website`` folder currently only has a folder for ``coderedcms`` in the ``templates`` folder. You can add a new ``website`` folder in ``templates`` (because we will use it in another tutorial), but for now, you will want to add a ``snippets`` folder inside the ``templates\coderedcms`` folder so that your folder structure looks something like this: .. figure:: img/A01/advanced_folder_structure1.png :alt: Our folder structure for templates. Our folder structure for templates within our website app. The folder structure needs to be the same as the default folder structure in the CMS if you want to override the navbar template. Now you should have ``templates\coderedcms\snippets``. Navigate to the ``snippets`` folder and create a ``navbar.html`` file inside of that folder. With your server running and the newly created file navbar.html file in place, look at your website. The navbar should be gone. The empty file is now overriding the default template. **You are now ready to begin customizing the navbar template!** 1. Let's copy and paste the `navbar.html template from github. `_. .. figure:: img/A01/navbar_html.jpeg :alt: The code for navbar 2. Look at your homepage, and you'll see the navbar is back to normal. 3. To make a two 2-tiered Navbar lets move the logo tag above the