Anatomy of the default theme (v2)
9 April 2022 512 views | Documentation v2
In order to change the look of your site you need to know which files to modify. So let's take a look at the structure of a theme using the 'default' set as an example. Things to notice are:
- The theme takes its name from the subdirectory it is stored in, which is default in this case.
- layout.html is a mandatory file in all themes and defines overall layout of the page. It contains the HTML 'head' and 'body' tags, the page meta tags and the zones for placing content such as headers and footers, columns, the "main content" area, navigation elements (tag select box, pagination) and so on. This is the file you need to adjust to change the page layout or reposition a content zone. The metadata elements are largely populated from the site preferences.
- style.css (optional) specifies custom CSS styles for this theme including overrides (if any) of the core Bootstrap CSS classes. This is the file you need to tinker with to adjust your site’s look and feel.
The display of content items within layout.html is governed by a series of sub-templates that “slot into” the main page content section of the theme (or elsewhere), as required:
- listView.html displays the default Tuskfish home page, which is a mixed stream of all the latest content items in teaser view.
- search.html is similar to listView.html except that it displays a list of search results.
- There are templates for all of the different content item types (article, audio, collection, download, image, static, tag, track, video). These are used to display the full description of individual content items when they are viewed individually.
- There are a few other templates for various data entry forms, summary tables, utilities and controls.
To create your own theme, just copy the templates out of the default theme as a starting point and to get a complete set. The default templates largely use vanilla HTML tags, and you wil find classes to style them in style.css.
In your own themes you are free to create additional content zones for columns and blocks etc.
Copyright, all rights reserved.