Default templates shipped with SiteTree created to have as little markup as possible in a try to fit most common website need.
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.
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.
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
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/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_bootstrap_dropdown.html
One level deep dropdown menu.
sitetree/menu_bootstrap3_dropdown.html
The same as above but for Bootstrap version 3.
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_navpills-stacked.html
Constructs nav-pills Bootstrap 3 vertical navigation similar to navlist from Bootstrap 2.
You can find Bootstrap navigation elements examples at http://getbootstrap.com/components/
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.