In :ref`tutorial`, you learned how to add data to your site. In this tutorial, we will look at changing the look and feel of the entire site, by creating a special template called template.html.
Template.html is a global template that all other templates inherit from. Changing template.html will change the look and feel of your entire site in one go. However, it must include very specific markup to enable the MyBandSite system to know where to put your text.
In the site tab of the admin site, you will find a section called Dbtemplates, which includes Templates. If you click on Templates you will see that by default you don’t have a template.html. You will probably have a private/events_printer.html, created earlier in the tutorial, and a style_template.html which was created at signup when you picked the default site look and feel.
style_template.html is an example of the kind of content you will need for your template.html. template.html is purely a web page that fits your required look and feel, and has placeholders which will be replaced at runtime by content from specific pages.
Let’s take a quick tour through the style_template.html file - remember that you can drag the bar at the bottom of the text box to make it bigger. The file is a pure HTML page, with added extras. These extras can be seen as {% text %} for non visual things, and {{ text }} for things that output text. Assuming you know basic HTML, we will just look at the extra bits.
From the top, the first extra bit is
{% load installedapps %}.
It is important that this is included if you want to find out which modules are installed, but you don’t need to know much about this yet. Ignore this for now, but remember that you will need to include it in your own template.html later.
Next, at the end of the <head></head> block, we have
{% block meta %}{% endblock %}{% block head %}{% endblock %}.
This defines two areas in the page that will be filled in by content in other templates (ones that inherit from template.html) when your page is requested in the browser. The actual detail here is not important - but these tags must be included in your template.html.
Things get a bit more interesting now, as we get to things you can see.
{% block breadcrumbs %}{% endblock %}
identifies the position at which the breadcrumbs trail will be displayed on the site. You will need to include this in your template.html if you want the breadcrumbs to be shown, simply miss it out if you don’t want breadcrumbs.
{% block navbar %}{% endblock %}
is next, and that identifies the position of links to the next and previous pages, for example when viewing images in the gallery or guestbook entries.
Next comes the key bit.
{%block prebody %}{% endblock %}{%block body %}{% endblock %}{%block postbody %}{% endblock %}
This identifies three sections, things that go before the body, things that are the body (this is the actual real content of your page), and things that go after the body. Make sure you include this in the template or you will have no content!
Next, we have the navigation links, which are a variation on:
{% if “MyBandSite.news”|installed %}<li><a href=”/news/”>News Archive</a></li>{% endif %}
This uses the installed filter we loaded at the top of the file (remember {% load installedapps %}?) to determine whether the news module is installed. If it is, then the link is shown - if not, no link is shown.
Note
This was used for the default templates, but you don’t have to do things this way in your own template.html. You know which modules are installed, so you can hardcode the links as you see fit.
You should now be ready to have a go at creating your own template.html. The easiest way to develop a template.html is to design a web page that looks how you want your band site to look, but doesn’t contain any content. It contains areas where the page content will go, and where the breadcrumbs will go etc. Modify the template to include the tags discussed above, then add it using the admin site and calling it template.html. Your site will be updated to have the look and feel specified.
Note
We can offer you a small amount of ftp space to store images and css in that define your site look and feel. Contact us to get this set up.