Skip to main content

How to adapt a third-party Bootstrap template for use with Tuskfish

6 February 2018 765 views | Documentation v1

Adapting a new theme for use with Tuskfish is quite easy to do:

  • Change the name of the theme's main layout file (probably index.html) to theme.html.
  • Change the name of the theme's main CSS stylesheet to style.css.
  • Change the meta tags in the 'head' section of theme.html so that they are dynamically populated with values from Tuskfish. Take a look at /themes/default/theme.html, you can literally just copy the meta tags over to your new theme and they will work.
  • In the head section, point the links to jQuery and Bootstrap libraries to point to copies bundled with Tuskfish. Also adjust the path to the theme's own CSS file(s). Once again, you can use the default theme as an example to see how to do it. Note that the order of scripts matters, for example the link to jQuery (a Bootstrap dependency) must come before Bootstrap.
  • If the theme includes any images you want to use, you need to adjust the file paths as per above.
  • Lastly, copy the required html templates for displaying content objects (eg. single_stream.html, article.html, download.html etc) and widgets (eg. select_filters.html) from the default theme into your new theme folder. As a minimum, you need to include main.html and form.html, but to start with you can just copy all of them and remove the ones you don't need later.

The head section of your theme should now resemble this (you may have additional Javascript and CSS files):

<html lang="<?php echo $tfPreference->getDefaultLanguage(); ?>">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <meta name="description" content="<?php echo $tfMetadata->getDescription(); ?>">
    <meta name="author" content="<?php echo $tfMetadata->getAuthor(); ?>">
    <meta name="dcterms.rights" content="<?php echo $tfMetadata->getCopyright(); ?>">
    <meta name="generator" content="<?php echo $tfMetadata->getGenerator(); ?>">
    <meta name="robots" content="<?php echo $tfMetadata->getRobots(); ?>">
    <link rel="icon" href="../../favicon.ico">
    <link rel="alternate" type="application/rss+xml" title="RSS" href="<?php echo TFISH_URL . 'rss.php'; ?>" />
    <link rel="schema.dcterms" href="http://purl.org/dc/terms/">

    <title><?php echo $tfMetadata->getTitle(); ?></title>
    
    <!-- jQuery -->
    <script src="<?php echo TFISH_JS_URL . 'jquery/jquery.min.js'; ?>"></script>
    
    <!-- Popper -->
    <script src="<?php echo TFISH_JS_URL . 'popper/popper.min.js'; ?>"></script>
    
    <!-- Bootstrap -->
    <link href="<?php echo TFISH_JS_URL . 'bootstrap/css/bootstrap.min.css'; ?>" rel="stylesheet">
    <script src="<?php echo TFISH_JS_URL . 'bootstrap/js/bootstrap.min.js'; ?>"></script>
    
    <!-- Font Awesome -->
    <script defer src="<?php echo TFISH_JS_URL . 'fontawesome/fontawesome-all.min.js'; ?>"></script>

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

The theme is now ‘Tuskfish ready’ in that it can be assigned to a page and will display correctly (see the section on How to override the default template set for a given page). If you experience any problems, check the link paths to jQuery, Bootstrap and the CSS files, and ensure they are in the correct position and order in your theme file.

The remaining and more substantial issue is to insert template placeholders into the theme, in areas where you want to display pieces of content. See the section on How to assign variables to a template for details.

Copyright, all rights reserved.

Related

Tuskfish CMS User Manual

The user manual provides a comprehensive guide to Tuskfish CMS operations. It covers all all aspects from installation to adding and curating content, managing site security and customisation of themes. For additional information on how to customise Tuskfish please see the developer guide.