.. highlight:: django
Custom Templates
================
In the :doc:`../topic-guides/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. Custom templates replace the ``default.html`` template when a page is loaded. Copy that template and rename it as ``default-`` then your custom template name, using -'s instead of spaces or underscores. An example would be ``default-blue-background.html`` or ``default-google-landing-page.html``. 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 on the page add and edit screen. Select the template there, and your page will then use it instead of the normal ``default.html`` template. You can find more information on tags by referring to the auto-generated django docs at: yourdomain/admin/doc/tags/.
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 content %}{{ block.super }}{% endblock content %}
You can wrap this code in another block that we can use for our custom page. That code would look like this:
.. code-block:: django
:emphasize-lines: 1,3
{% block custom_body %}
{% block content %}{{ block.super }}{% endblock content %}
{% 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 %}``.
.. code-block:: django
:emphasize-lines: 1,12,25
{% 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 %}{% endblock %}
{% block extra_head %}
{{ block.super }}
{% endblock %}
{% block custom_body %}
{% if page.title %}
{{ page.title }}
{% endif %}
{{ page.content|safe }}
{% include "pages/meta.html" %}
{% endblock custom_body %}
Now the custom template will only affect the interior area of a page, so we can create pages that use other Tendenci template tags. This is great for creating pages with rss feeds or other dynamic content like upcoming events and news.
Navigation Bar
--------------
Adding a button
^^^^^^^^^^^^^^^
.. image:: img/navbarbutton.png
.. Tip::
The Navigation Bar is set up through the Navs App.
.. image:: img/navbar.png
In the Navs App, Links can be assigned their own CSS Class. This is helpful for targeting individual links to emphasize in your design.
.. image:: img/navsappcss.png
For this example, I added the class "top-nav-button" to the "Attend Orientation" Nav Link.
.. hidden-code-block:: css
:label: + Show Added CSS
.top-nav-button {
color: #fbce42;
border: 2px solid #fbce42;
border-radius: 40px;
margin-left:25px;
font-weight:700;
}
.top-nav-button:hover,
.top-nav-button:active,
.top-nav-button:focus {
color: #f6ba17;
border-radius: 40px;
border: 2px solid #f6ba17;
background-color: rgba(255,255,255,.3);
}
Adding Font-Awesome Icons
^^^^^^^^^^^^^^^^^^^^^^^^^
.. image:: img/fontawesomenav.png
.. Tip::
Also using the Nav App Classes, you can add Font Awesome Icons to your navigation bar. Just add the Font Awesome tag into the CSS Class and leave the Label blank.
.. image:: img/fontawesomenavapp.png
Font-Awesome After Nav Items
^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.. image:: img/dropdownicons.png
.. Tip::
To add a dropdown caret or other icons to the Tendenci Navbar, use FontAwesome in the css. For this application, I added a css class ("t-caret") to the navbar items that I wanted to have a dropdown caret.
.. image:: img/t-caret.png
.. hidden-code-block:: css
:label: + Show Added css
a.t-caret.dropdown-toggle:after {
content: "\f0d7";
font-family: FontAwesome, 'Roboto', sans-serif;
}
Simple Search Bar w/ Font-Awesome Icon
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.. image:: img/simplesearch.png
.. Tip::
.. hidden-code-block:: html
:label: + Show Added HTML
.. hidden-code-block:: css
:label: + Show Added CSS
/* SEARCH ICON */
input.fa.fa-search {
border: none;
background: none;
}
/* SEARCH BOX */
.searchbox {
border: none;
border-bottom: 1px solid gray;
background: transparent;
}
/* SEARCH BOX FOCUS */
input.searchbox.blur {
box-shadow: none;
outline: none;
}
Bootstrap Search Bar w/ Font-Awesome Icon
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
.. image:: img/bootstrapsearch.png
.. Tip::
This example is from the Case Studies module, but can be used in other modules by swapping the action url. There is no added css for this snippet. You can also change the look and feel by adding Bootswatch themes.
.. hidden-code-block:: html
:label: + Show Added HTML
{% if SITE_GLOBAL_SEARCHINDEX %}
{% endif %}
Basic Footer
--------------
In Tendenci, the Footer is usually set up inside a box to make it easy for clients to make changes to their links.
.. image:: img/basicfooter.png
.. Tip::
I like to set up my Footer links in a bulleted list. The bullets can be removed later in html or in css.
HTML is added inside the Footer links box.
.. image:: img/footerlinks.png
.. hidden-code-block:: html
:label: + Show HTML