Designing your site in Terminalfour

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:

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

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

Content Types

Each content item added to your site with Terminalfour uses a Content Type. A Content Type is a template for a Content Item.

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

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 Content Item 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.

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

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).

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>

Multilevel Menus (Two Levels)

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.

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’.

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.

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:

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>

Grouped content

Terminalfour has functionality that wraps grouped content such as Tabs, Accordions or sliders in their opening/closing wrapping code with optional heading.

This allows the user to add each item as a separate piece of content and also control the position of each item. A separate container content type is also not required.

In the accordion example below, there is 2 accordions with the same class "accordion-item". Ensure there is no 'active' class in the div and each div is the same. If an unique ID is required, we can output the content ID as shown below.

<span id="d.en.459721"></span>
<div class="accordion-item">
    <h2 class="accordion-header" id="agenda-heading459721">
        <button class="accordion-button collapsed js-triggerRefresh" type="button" data-bs-toggle="collapse"
            data-bs-target="#agenda-collapse459721" aria-expanded="true" aria-controls="agenda-collapse459721">
            Title 1
        </button>
    </h2>
    <div id="agenda-collapse459721" class="accordion-collapse collapse" aria-labelledby="agenda-heading459721"
        data-bs-parent="">
        <div class="accordion-body">
            <div class="accordion-body">
                  <p>Description</p>
            </div>
        </div>
    </div>
</div><span id="d.en.459722"></span>
<div class="accordion-item">
    <h2 class="accordion-header" id="agenda-heading459722">
        <button class="accordion-button collapsed js-triggerRefresh" type="button" data-bs-toggle="collapse"
            data-bs-target="#agenda-collapse459722" aria-expanded="true" aria-controls="agenda-collapse459722">
           Title 2
        </button>
    </h2>
    <div id="agenda-collapse459722" class="accordion-collapse collapse" aria-labelledby="agenda-heading459722"
        data-bs-parent="">
        <div class="accordion-body">
            <div class="accordion-body">
                <p>Description</p>
            </div>
        </div>
    </div>
</div>

Anchor links

Terminalfour allows a user to anchor link to a particular piece of content within the same section or a different section.

For content types that require this functionality, Terminalfour outputs an anchor span above the piece of content or for grouped content such accordions, above the group of accordions and also above each accordion dropdown.

Example of this code:

<span id="d.en.12345"></span>

'en' is the language code of the piece of content and '12345' is the ID of the piece of content. This is an unique ID for the anchor tag.

<span id="d.en.12345"></span> <div class="accordion-item"> <h2 class="accordion-header" id="agenda-heading12345"> <button class="accordion-button collapsed js-triggerRefresh" type="button" data-bs-toggle="collapse" data-bs-target="#agenda-collapse459720" aria-expanded="true" aria-controls="agenda-collapse12345"> This is the accordion title </button> </h2> <div id="agenda-collapse12345" class="accordion-collapse collapse" aria-labelledby="agenda-heading12345" data-bs-parent=""> <div class="accordion-body"> <div class="accordion-body"> <p>This is the accordion description</p> </div> </div> </div>

When designing for Terminalfour, ensure that an example of anchor links is provided, particularly with grouped content. A anchor link to a specific accordion for example must open and padding added to ensure that the accordion is not blocked by a sticky inner menu or header.

Pagination

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

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.

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 can't make changes to the generated HTML. Styled forms use Bootstrap 3.3.7. so it's worth familiarizing yourself with the class names and mark up structure that Bootstrap forms use. Even when 'Include styling' is disabled the generated mark-up will still use Bootstrap class names. The form elements most commonly altered are radio buttons and checkboxes but again, 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 the note on AJAX below.

Here's an example of a script that will change the background of a published form to 'red':

<script>
(function() {
    var proxied = window.XMLHttpRequest.prototype.send;
    window.XMLHttpRequest.prototype.send = function() {
        var pointer = this
        var intervalId = window.setInterval(function(){
          if(pointer.readyState != 4){
            return;
          }

         // START CUSTOM CODE

          var elements = document.querySelectorAll('.form-group');
          for (var i = 0; i < elements.length; i++) {
          	elements[i].style.background = 'red';
          }

          // END CUSTOM CODE

        }, 1);
        return proxied.apply(this, [].slice.call(arguments));
    };


})();
</script>

When the page is published a style attribute with a value of 'red' is added to the div with a class of form-group:

This script will only work with forms deployed with a T4 Tag (and not using the 'Embed code' or 'Shareable link' methods).

You can learn more about creating forms in the documentation here.

Terminalfour Modules

A note on AJAX

Terminalfour's Sample Site contains examples of pre-made modules like the Events Calendar, Advanced Program Search, and a Staff Directory. 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. There is an example of the events calendar on our sample site.