Skip to main content

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

9 April 2022 387 views | Documentation v2

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 layout.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/layout.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 all the html templates for displaying content objects (eg. listView.html, article.html, download.html etc) into your new theme folder. This will give you a working starting point that you can customise later.

Essentially, the head section of your new theme layout.html should now resemble that of the default theme layout.html, like this:

<!doctype html>
<html lang="<?php echo xss($metadata->language); ?>">
  <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 xss($metadata->description); ?>">
    <meta name="author" content="<?php echo xss($metadata->author); ?>">
    <meta name="dcterms.rights" content="<?php echo xss($metadata->copyright); ?>">
    <meta name="robots" content="<?php echo xss($metadata->robots); ?>">
    <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/">

    <?php if (!empty($metadata->canonicalUrl)): ?>
    <!-- Canonical URL -->
    <link rel="canonical" href="<?php echo xss($metadata->canonicalUrl); ?>">
    <?php endif; ?>

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="<?php echo TFISH_URL . 'apple-touch-icon.png'; ?>">
    <link rel="icon" type="image/png" sizes="32x32" href="<?php echo TFISH_URL . 'favicon-32x32.png'; ?>">
    <link rel="icon" type="image/png" sizes="16x16" href="<?php echo TFISH_URL . 'favicon-16x16.png'; ?>">
    <link rel="manifest" href="<?php echo TFISH_URL . 'site.webmanifest'; ?>">
    <link rel="mask-icon" href="<?php echo TFISH_URL . 'safari-pinned-tab.svg'; ?>" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <title><?php echo xss($metadata->title); ?></title>

    <!-- jQuery -->
    <script src="<?php echo TFISH_VENDOR_URL . 'jquery/jquery.min.js'; ?>"></script>

    <!-- Bootstrap -->
    <link href="<?php echo TFISH_VENDOR_URL . 'bootstrap/css/bootstrap.min.css'; ?>" rel="stylesheet">
    <script src="<?php echo TFISH_VENDOR_URL . 'bootstrap/js/bootstrap.bundle.min.js'; ?>"></script>

    <!-- Font Awesome -->
    <script defer src="<?php echo TFISH_VENDOR_URL . 'fontawesome/fontawesome.min.js'; ?>"></script>
    <script defer src="<?php echo TFISH_VENDOR_URL . 'fontawesome/icons-in-use.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, or use the 'web tools' in your browser to verify that all the JS and CSS file paths are correct and loaded.

This should be enough to display content using all the native functionality of Tuskfish. If you want to add custom functionality see the section on How to assign variables to a template for details.

Copyright, all rights reserved.