Version 4 (modified by olivier, 6 years ago) (diff)

Fix related to the new base_site.html template

Interface Customization

The web interface of Telemeta can be customized to your needs by extending the default templates. It is possible to change the logo, CSS, and even make a completely different layout. The templates are written using the Django template language, which is pretty simple to learn.

Templates set-up

The Telemeta default templates reside in <path_to_telemeta>/templates/telemeta. You should take a look at them to understand how things work.

Before trying to add your custom templates you should ensure that the TEMPLATE_DIRS configuration variable, in your Django project's, contains the path to where your templates files will reside. For convenience I'll call this directory <my_project>/templates. And within that directory you must create a subdirectory named telemeta where you will put your custom telemeta templates.

Template Inheritance

The Django templating engine, which Telemeta relies on, allows for a high level of customization, through the use of so-called template inheritance.

This feature allows to change specific parts of the default templates. In order to extend a given template simply put a file with the same name as the default template in <my_project>/templates/telemeta. Then you can start customizing specific blocks of the template, or copy/rewrite the whole template if you feel like it.

Changing the logo, certainly a very common task, is also a good example of how template inheritance works.

In Telemeta all HTML templates extends telemeta/base_site.html which in turn extends telemeta/base.html. By overloading the former we can thus customize all of the web pages.

The logo is contained within the logo block, as you can see in base.html.

So in order to change the logo to '/path/to/mylogo.png' we simply need to create <my_project>/templates/telemeta/base_site.html with 4 lines:

{% extends "telemeta/base.html" %}
{% block logo %}
<a href="{% url telemeta-home %}"><img src="/path/to/mylogo.png" alt="" /></a>
{% endblock %}

Adding some CSS

You can easily add a custom stylesheet by extending the stylesheets block. However, unless you know what you are doing, you should ensure that you're not wiping the default stylesheets out. This can be achieved using Django's block.super variable.


{% extends "telemeta/base.html" %}
{% block stylesheets %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="/path/to/my_style.css" />
{% endblock %}