The theme system

The layout and appearance of your site  is defined through the use of "themes” (Bootstrap templates) each of which resides in a separate folder in the /themes directory. Themes can be applied on a per-page basis, so you can have a completely different layout, look and feel in different areas of your site. On every page, actually.

Tuskfish ships with a couple of Bootstrap example themes as starting points to create your own designs. These are quite plain, so a few third-party themes with more visual ‘bling’ have also been converted for use with Tuskfish. You will find these in the trust_path/extras/themes directory. Other places you can find free themes to convert include:

• BlackTie
• Start Bootstrap
• Get Bootstrap (basic themes and code examples)

What is this Bootstrap of which you speak?

Bootstrap is a mainstream front-end presentation framework of HTML, CSS and Javascript. It excels at building responsive, mobile-first websites that work across different sized devices, and can turn basic HTML into a beautiful site with the application of a few classes.

Bootstrap is very well documented. If you plan to tinker with the look and feel of your site then it is worthwhile to take a look at the documentation and familiarise yourself with the layout grid concept and the core classes that are available.

As Bootstrap is a mainstream presentation framework there are literally hundreds of third-party themes available (both free and paid), and it only takes a few minutes to convert one for use with Tuskfish. Basically it’s just a case of inserting your PHP output (variables) into the appropriate places in the template.

Adding a new theme to your site

Simply upload your new theme to the /themes directory to make it available for use. You will need to assign it to the pages you where you want to use it (see below).

Customising the default theme

The default theme comes with a few link placeholders in the navigation menu, to give you the idea that you can change things. To rename a link and point it to a page - or to add more links - open /themes/default/theme.html and change it to suit your needs. If you would like instruction, please see the Bootstrap documentation or their example templates, which illustrate most of the available Bootstrap components, you can cut and paste what you need. To modify the look and feel edit /themes/default/style.css. See also the section on Anatomy of the Default Theme.

Changing the default theme

Tuskfish ships with a 'default' theme, which will be used for every page (except for the admin and gallery pages, which use the 'admin' and ‘gallery’ themes, respectively) unless you specify otherwise. If you would prefer to use something else as the sitewide default, simply:

• Rename the 'default' theme directory to something else (eg. default_bak), and then change the name of the theme you want to use in its place to 'default'.
• Look inside the new 'default' directory and edit theme.html. Change the path of the link to style.css in the header to match the new directory name (which is now 'default), eg:

The new default theme will now be applied to your entire site, except for pages where you have manually specified something else. In the near future a preference will be added that allows you to change the default theme through the admin panel.

Overriding the default theme for a particular page

Alternatively, you can just specify the theme you want to use on any given page. Look for the following lines near the top of the PHP file for the page you want to change (eg. index.php):

// Specify theme, otherwise 'default' will be used.
$tfTemplate->setTheme('default');

Change ‘default’ to match the directory name of the theme you want to use, eg:

$tfTemplate->setTheme('vanilla');

You can use a different theme on every page, if you want to. You could even use different themes on the one page, varying according to programmatic conditions.

Creating (cloning) a new theme

To create a new theme simply:

• Copy one of the existing template set directories (eg. ‘default’) and give it a new name (eg. 'vanilla').
• Edit theme.html and point the link to style.css to point to the new directory name, eg, change:

<!-- Custom styles for this template -->
<link href="<?php echo TFISH_THEMES_URL . 'default/style.css'; ?>" rel="stylesheet">

To something like:

<!-- Custom styles for this template -->
<link href="<?php echo TFISH_THEMES_URL . 'vanilla/style.css'; ?>" rel="stylesheet">

That's it! You now have a new theme that you can modify to your heart's content without affecting the old one. To use the new theme simply declare it in the page(s) you wish to use it on, as described above.