Custom Templates
In the Pages app on your Tendenci site, you can select a custom template to use to display your page. This is useful when constructing pages for special occasions or for creating targeted landing pages for marketing efforts.
The first step is to create the custom template.
Go to Apps-> 7.Layout -> Theme Editor
Once in the Theme Editor page, scroll to the bottom where it says Create a new Template and click on New Template.
Add the name that will represent the page, then click create template. An empty code screen will appear in the page.
Custom templates replace the default.html
template when a page is loaded.
Your custom template can include template code to dynamically pull in content from other apps, as well as rearranging the elements on the page or removing certain elements. Once your template file is created, add it to the theme directory as you would with other template files.
These templates will appear in the dropdown when editing a page. Select the template there, and your page will then use it instead of the normal default.html
template.
Best Practices
If your intentions are to only change the content of the page and not the surrounding elements like the header, sidebar, or nav, there is a best practice for utilizing the default.html
file without having to have multiple places to update when that file changes.
In your default.html
file, locate the following code:
{% block body %}{{ block.super }}{% endblock body %}
You can wrap this code in another block that we can use for our custom page. That code would look like this:
{% block custom_body %}
{% block body %}{{ block.super }}{% endblock body %}
{% endblock custom_body %}
Then, in your new template file, default-custom-name.html
, we will add the following code from our pages/view.html
with a couple of changes. We will replace the beginning of the code with {% extends "pages/base.html" %}
and replace our main block with {% block custom_body %}
.
{% extends "pages/base.html" %}
{% block title %}{{ page.get_title }}{% endblock %}
{% block meta_description %}{{ page.get_description }}{% endblock %}
{% block meta_keywords %}{{ page.get_keywords }}{% endblock %}
{% block meta_canonical_url %}<link rel="canonical" href="{{ page.get_canonical_url }}" />{% endblock %}
{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{{ STATIC_URL }}css/pages.css">
{% endblock %}
{% block custom_body %}
<div class="t">
<div class="page-wrap">
{% if page.title %}
<h1>{{ page.title }}</h1>
{% endif %}
<div class="content">{{ page.content|safe }}</div>
<!-- Insert custom template code here -->
{% include "pages/meta.html" %}
</div>
</div>
{% endblock custom_body %}
Now our custom template will only affect the interior area of a page, so we can create pages that use other Tendenci 5 template tags. Recommendation: Only write under under the <!-- Insert custom template code here -->
to avoid any confusion in the future and accidentally change any part of the script.
This is great for creating pages with rss feeds or other dynamic content like upcoming events and news.
Still Looking for an Answer?
Request a Help File we'll retrieve your answer right away
We are always looking for ways to simplify your life.
Contact us today with more ideas!
Join the Open-Source Community! Give us a Call at (281)497-6567
We want to help your organization succeed on the web.