Knowledge Base

Designing your site in TERMINALFOUR

Last Modified:
11 Dec 2018
User Level:
Power User

The purpose of this article is to help you understand how pages are constructed in TERMINALFOUR so you can code pages that will work neatly once built into TERMINALFOUR.

If you are undertaking your first build with the system then this is aimed at you.

Page Layouts

A single Page Layout can be used on multiple pages on your site. You can think of it as the template for pages in your site. Each Page Layout is made up of Header and Footer code. In this example, the Header contains the logo, main header text and the navigation. Both the Header and Footer will be consistent across all the pages in your site that use this Page Layout.

These two pages use the same Page Layout, so while the content is different on each, the Header and Footer are the same:

Diagram showing a single Page Layout serving multiple pages

Changes to the Page Layout are reflected across all pages using that Page Layout:

Diagram of Page Layout with edited and Header and Footer content

Design consistency not only makes your site easier to use, it also reduces the build and any maintenance time for your site in TERMINALFOUR.

The Header and Footer code for your Page Layouts is just plain HTML (with as much JavaScript and CSS as you need). If your site is configured to use a server-side scripting language such as PHP, you can use this too.

Using T4 Tags lets you add useful features like Navigation Objects, metadata and  Media Library assets, so your markup can be as simple or complex as you need it.

It's also a good idea to use consistent stylesheets & JavaScript across the Page Layouts to keep things as simple as possible.

For more on Page Layouts, check out the Page Layouts page in the documentation.

Content Types

Each content item added to your site with TERMINALFOUR uses a Content Type. A Content Type is a template for a piece of content.

For instance, you could create a Content Type called ‘Article’ that will be used for all the news articles published on your site:

Diagram of a single Content Type with multiple pieces of content generated from it

The Content Type specifies the fields (called Content Type Elements) that can be populated in order to create an article. In this example, the ‘Article’ Content Type has a heading, body text and an image. Each article that is written has some or all of these elements.

For more on Content Types, check out the Content Types page in the documentation.

Content Layouts

Content Layouts let you display a single piece of content in multiple ways. For instance, maybe we want our news article to appear on our site as a full article and within an RSS feed. While both use the same ‘Article’ Content Type we can use different Content Layouts to present that same content in two different ways.

Diagram showing a piece of content being generated from a Content Type and published to two Channels

Like Page Layouts, Content Layouts use plain HTML. You add T4 Tags as placeholders for the content that will display on publish.

Try to be consistent & reuse designs across the site. Having a news preview with an h2 title on one page, and h3 title tags on another page will require two separate layouts 

For more on Content Layouts, check out the Content Types page in the documentation.

Link Menus and Lists

TERMINALFOUR has a number of built-in Navigation Objects to help you add features like sitemaps, breadcrumbs and, of course, navigation menus to your pages quickly.  

Each site in TERMINALFOUR is made up of Sections in a Site Structure. Sections, like folders, help you arrange the pages of your site. The can be used to create a menu listing and link to Sections. If new Sections are added or existing ones are removed or renamed, the Link Menu will be updated.

The most common way to set this up is to use an unordered list.

Single-Level Menu

Screenshot of a navigation bar with the Sections from the Site Structure highlighted

Here you might want to create main navigation that will list and link to all Sections in the ‘Top Nav’ Branch (a Branch is just a Section that contains Child Sections). 

  • creating a link menu using an ordered list will only work on a single level
  • linking to content such as media or PDFs from within a link menu is not possible
  • you can link to external URLs if one of your Sections is a Link Section 

You can create a Link Menu Navigation Object that points to that Branch. In the Page Layout, you can add the following markup:

<nav>  <t4 type="navigation" name=Top Nav content" id="363" /></nav>

The navigation element’s source code looks like this on the published page:

<nav>  <ul>  <li><a href="/news/">News</a></li>  <li><span class=”currentbranch0”><a href="/blog/">Blog</a></span></li>   <li><a href="/careers/">Careers</a></li>  <li><a href="/partners/">Partners</a></li>  <li><a href="http://external link.com">Community</a></li> </ul> </nav>
  • you might notice the span with a class of “currentbranch0” that has been added to the “Blog” item. This would be added if we were currently on the “Blog” page. The span is applied to the list item of the current Section name at this level where X is the level of the menu (starting at 0 & incrementing 1 per level deep)
  • it is also possible to put a class/id on the ul and li, but if using a class on the li then all li's need to use the same class (i.e. do not apply a different class to each li)
  • the current branch does not have to be a link

Multilevel Menus (Two Levels)

Screenshot of the Site Structure with Child Sections expanded

When you have a multilevel menu in your Link Menu, the source code for your navigation will look like this:

<nav>  <ul>   <li class="item"><a href="/terminalfour">Homepage</a></li>   <li class="item"><span class="currentbranch0"><a href="/terminalfour/aboutus/">About us</a></span>      <ul class="multilevel-linkul-0" title="">       <li><span class="currentbranch1">       <a href="/terminalfour/aboutus/Introduction/">Introduction</a></span>      </li>      </ul>     </li>    <li class="item"><a href="/terminalfour/ourstory/">Our Story</a></li>   <li class="item"><a href="/terminalfour/ourphilosophy/">Our Philosophy</a></li> <li class="item"><a href="/terminalfour/ourteams /">Our Teams</a></li>  </ul></nav>

Like the single-level menu, a span with a class of ‘currentbranch0’ is added to the current page’s item. In this example, however, there’s another level below ‘About Us’.

When we’re on the ‘Introduction’ page, a span with a class of ‘currentbranch1’ is added to that item. The nested unordered list has a class of ‘multilevel-linkul-0’ added to it.

Thanks to the addition of these classes, we know precisely where we are in the navigation tree.

This is especially useful when we have even more than two levels.

  • Child Sections are output in a new UL LI
  • this new level has a class multilevel-linkurl-X where X is the depth of the child sections (starting at 0 & incrementing 1 per level deep)
  • no class can be applied to the second level of LI's
  • the <span class="currentbranchX"> is applied to the current section at this level where X is the level of the menu (starting at 0 & incrementing 1 per level deep)
  • making the current branch a link is optional
  • the class on the main UL and first-level of LIs are optional (as per the single level menu above)

Multilevel Menus (Three Levels)

<nav> <ul>  <li class="item"><a href="/terminalfour/">Homepage</a></li>  <li class="item"><span class="currentbranch0"><a href="/terminalfour/aboutus/">About us</a></span>  <ul class="multilevel-linkul-0" title="">   <li><span class="currentbranch1"><a href="/terminalfour/aboutus/Introduction/">Introduction</a></span>   <ul class="multilevel-linkul-1" title="">  <li><span class="currentbranch2"><a href="/terminalfour/Aboutus/Introduction/Staff/">Staff</a></span></li>  </ul>   </li>  </ul>  </li>  <li class="item"><a href="/terminalfour/ourstory/">Our Story</a></li>  <li class="item"><a href="/terminalfour/ourphilosophy/">Our Philosophy</a></li>  <li class="item"><a href="/terminalfour/ourteams /">Our Teams</a></li>  </ul></nav>

In this example, our current Branch is two levels below the top level. The list item is given a class of ‘currentbranch2’. The second nested list has a class of ‘multilevel-linkul-1’.

  • this new level has a class multilevel-linkurl-X where X is the depth of the child sections (starting at 0 & incrementing 1 per level deep)
  • adding a current class to the branch is optional
  • the <span class="currentbranchX"> is applied to the current section at this level where X is the level of the menu (starting at 0 & incrementing 1 per level deep)
  • making the current branch a link is optional

A-Z Navigation

The A to Z Navigation Object is a variation outputs a list of Sections in alphabetical order. The order of the list can either be ascending or descending.

For more on A-Z Navigation Navigation Object, check out the page in the documentation

Breadcrumbs

Breadcrumbs help orient a site user within the site. In general, any custom code can appear before and after the breadcrumbs, as well as between the breadcrumbs.

Screenshot of breadcrumbs

You cannot have separate classes for each part of the breadcrumb. Adding the class 'first' & 'last' is also not possible in TERMINALFOUR though you can target these with CSS.

When creating a Breadcrumb Navigation you can specify the separating HTML that you would like to appear between the breadcrumb items.

In this case, a right double-angled arrow and a non-breaking space ( » ) is specified as the separating HTML:

Screenshot of the separator HTML option for Navigation Objects

The following then appears between all links in the published breadcrumbs:

<a href="/ ">Home</a> » <a href="/news">News</a> » <a href="/internal">Internal</a> » <a href="/archive">Archive</a>

Breadcrumbs can also be added to a list (the UL can have any id/class):

<ul class="breadcrumb"> <li class="linkItem"><a href="/">Home</a></li> <li class="linkItem"><a href="/news">News</a></li> <li class="linkItem"><a href="/internal">Internal</a></li> <li class="linkItem"><a href="/archive">Archive</a></li></ul>
  • each link produced by the CMS will have the same code (and therefore class) applied before & after each link
  • the current section can be a link or just text
  • custom classes can be added with JQuery

For more on the Breadcrumbs Navigation Object, check out the page in the documentation.

Pagination

Pagination makes it easier for your site users to navigate large numbers of content items.

Screenshot of published pagination Navigation Object

You can add your own HTML before, after and between the page number links:

 

In the set up you will be asked to specify the content type used for the pagination, how many can be displayed on the page, and how many overall can be shown through pagination.

<nav class="pagination">  <span class="currentpage">1</span>   <a href="/alumni/news/2/">2</a>   <a href="/alumni/news/3/">3</a>  <a href="/alumni/news/2/">></a>  <a href="/alumni/news/3/">>></a></nav>

A span with a class of ‘currentpage’ is added to the current page number.

  • the surrounding html (div, ul, li) are configurable
  • ALL pages are shown in the pagination. If there will be a large number of pages, add JavaScript to replace some of the links with a ...
  • each item produced by TERMINALFOUR will be the same, but with the updated link

For more on Pagination Navigation Object, check out the Pagination page in the documentation.

Form Builder

Form Builder is a WYSIWYG form editor that makes it easy to create, edit and publish forms on your site. When customizing the look of your form you can apply your own stylesheet but you won't be able to make changes to the markup that is generated. The form elements most commonly altered are radio buttons and checkboxes but bear in mind that the markup for these elements cannot be changed. 

If you want to review Form Builder's generated markup there is a sample form featuring available form input elements. 

If you want to change DOM elements with JavaScript bear in mind that there is already jQuery included for form functionality (even on unstyled forms) so conflicts may occur. See note on JavaScript below.

You can learn more about creating forms in the documentation.

TERMINALFOUR Modules

A note on Ajax

TERMINALFOUR's Sample Site contains examples of pre-made modules like the Events CalendarBasic and Advanced Course Search. Many of these rely on Ajax to load content. If you want to use JavaScript or jQuery to manipulate module elements or their content it's worth being aware of how events are attached.

Here's a typical click event with jQuery:

$("#accordion").on("click", function() {...} );

In that case, we bind the click event to the element with an ID of 'accordion'. However, if the accordion element's content is loaded by Ajax, the click event won't work. That's because it only affects elements that are present on page load. Instead, when targetting Ajax loaded content we must bind the event to the body element or the closest static parent element:     

$("body").on("click", "#accordion", function() {...} );

Have a look at this Stack Overflow page for more info.

A note of JavaScript files 
When supplying JavaScript files to Professional Services please ensure that they are not minified and combined from multiple files. Ideally, a separate JavaScript file should be supplied for each module and/or page. This makes it easier for our developers to parse for potential conflicts.

Events Calendar

The TERMINALFOUR Events Calendar is a PHP application which displays event content in a calendar format.

  • the events listing is within <div class="" id="calendar_events">. The code within this cannot be changed, but different CSS can be applied to style the events differently
  • the details that are displayed for each event can be changed - on our sample site we have the time and venue. Up to 3 fields/elements can be displayed
  • the calendar box, categories, search etc. can be moved to the left column, if preferred
  • the detailed view of the event information does not need to be replicated. This is 100% customizable for each implementation
Back to top