Notes on built-in templates¶
Default templates shipped with SiteTree created to have as little markup as possible in a try to fit most common website need.
Styling built-in templates¶
Use CSS to style default templates for your needs. Templates are deliberately made simple, and only consist of ul, li and a tags.
Nevertheless pay attention that menu template also uses two CSS classes marking tree items:
- current_item — marks item in the tree, corresponding to current page;
- current_branch — marks all ancestors of current item, and current item itself.
If needed, you can set extra CSS classes to the ul element with extra_class_ul variable. For example:
{% with extra_class_ul="flex-wrap flex-row" %}
{% sitetree_menu from "footer_3" include "trunk,topmenu" template "sitetree/menu_bootstrap5.html" %}
{% endwith %}
Overriding built-in templates¶
To customize visual representation of navigation elements you should override the built-in SiteTree templates as follows:
- Switch to sitetree folder
- Switch further to ‘templates/sitetree’
- There among others you’ll find the following templates:
- breadcrumbs.html (basic breadcrumbs)
- breadcrumbs-title.html (breadcrumbs that can be put inside html title tag)
- menu.html (basic menu)
- tree.html (basic tree)
- Copy whichever of them you need into your project templates directory and feel free to customize it.
- See Advanced SiteTree tags section for clarification on two advanced SiteTree template tags.
Templates for Foundation Framework¶
Information about Foundation Framework is available at http://foundation.zurb.com
The following templates are bundled with SiteTree:
sitetree/breadcrumbs_foundation.html
This template can be used to construct a breadcrumb navigation from a sitetree.
sitetree/menu_foundation.html
This template can be used to construct Foundation Nav Bar (classic horizontal top menu) from a sitetree.
Note
The template renders no more than two levels of a tree with hover dropdowns for root items having children.
sitetree/menu_foundation-vertical.html
This template can be used to construct a vertical version of Foundation Nav Bar, suitable for sidebar navigation.
Note
The template renders no more than two levels of a tree with hover dropdowns for root items having children.
sitetree/sitetree/menu_foundation_sidenav.html
This template can be used to construct a Foundation Side Nav.
Note
The template renders only one tree level.
You can take a look at Foundation navigation elements examples at http://foundation.zurb.com/docs/navigation.php
Templates for Bootstrap Framework¶
Information about Bootstrap Framework is available at http://getbootstrap.com
The following templates are bundled with SiteTree:
sitetree/breadcrumbs_bootstrap.html
This template can be used to construct a breadcrumb navigation from a sitetree.
sitetree/breadcrumbs_bootstrap3.html
The same as above but for Bootstrap version 3.
sitetree/breadcrumbs_bootstrap4.html
The same as above but for Bootstrap version 4.
sitetree/menu_bootstrap.html
This template can be used to construct menu contents for Bootstrap Navbar.
Warning
To widen the number of possible use-cases for which this template can be applied, it renders only menu contents, but not Navbar container itself.
This means that one should wrap sitetree_menu call into the appropriately styled divs (i.e. having classes navbar, navbar-inner, etc.).
Example:
<div class="navbar"> <a class="brand" href="/">My Site</a> <div class="navbar-inner"> {% sitetree_menu from "main" include "topmenu" template "sitetree/menu_bootstrap.html" %} </div> </div>Please see Bootstrap Navbar documentation for more information on subject.
Note
The template renders no more than two levels of a tree with hover dropdowns for root items having children.
sitetree/menu_bootstrap3.html
The same as above but for Bootstrap version 3.
- sitetree/menu_bootstrap4.html
The same as above but for Bootstrap version 4.
- sitetree/menu_bootstrap5.html
The same as above but for Bootstrap version 5.
sitetree/menu_bootstrap_dropdown.html
One level deep dropdown menu.
sitetree/menu_bootstrap3_dropdown.html
The same as above but for Bootstrap version 3.
sitetree/menu_bootstrap4_dropdown.html
The same as above but for Bootstrap version 4.
sitetree/menu_bootstrap5_dropdown.html
The same as above but for Bootstrap version 5.
sitetree/menu_bootstrap_navlist.html
This template can be used to construct a Bootstrap Nav list.
Note
The template renders only one tree level.
sitetree/menu_bootstrap3_navpills.html
Constructs nav-pills Bootstrap 3 horizontal navigation.
sitetree/menu_bootstrap3_deep.html
Constructs Bootstrap 3 menu with infinite submenus. Requires adding extra CSS:
<link href="{% static "css/sitetree_bootstrap_submenu.css"%}" type="text/css" rel="stylesheet" media="screen">sitetree/menu_bootstrap4_navpills.html
The same as above but for Bootstrap version 4.
sitetree/menu_bootstrap3_navpills-stacked.html
Constructs nav-pills Bootstrap 3 vertical navigation similar to navlist from Bootstrap 2.
sitetree/menu_bootstrap4_navpills-stacked.html
The same as above but for Bootstrap version 4.
You can find Bootstrap navigation elements examples at http://getbootstrap.com/components/
Templates for Semantic UI Framework¶
Information about Semantic UI Framework is available at http://semantic-ui.com/
The following templates are bundled with SiteTree:
sitetree/breadcrumbs_semantic.html
This template can be used to construct a breadcrumb navigation from a sitetree.
sitetree/menu_semantic.html
This template can be used to construct Semantic Menu (classic horizontal top menu) from a sitetree.
Warning
To widen the number of possible use-cases for which this template can be applied, it renders only menu contents, but not the UI Menu container itself.
This means that one should wrap sitetree_menu call into the appropriately styled divs (i.e. having ui menu classes).
Example:
<div class="ui menu"> <a class="item" href="/">MY SITE</a> {% sitetree_menu from "main" include "topmenu" template "sitetree/menu_semantic.html" %} </div>Please see Semantic UI Menu documentation for more information on subject.
Note
The template renders no more than two levels of a tree with hover dropdowns for root items having children.
sitetree/menu_semantic-vertical.html
This template can be used to construct a vertical version of Semantic UI Menu, suitable for sidebar navigation.
Note
The template renders no more than two levels of a tree with hover dropdowns for root items having children.