Website templates

Website templates

Before we dive into bespoke website templates, this subject is not for the faint hearted! To be able to use a bespoke template, you must understand what CSS and JavaScript is, what HTML is and how it all ties together to form a web page.

Let's dive in

Currently the system has 15 web templates to choose from. They are basically the same layout but with a different colour palette.

However, you are somewhat restricted with a default template so if you want more control, you need to select "Bespoke Template"  from the "Setup > Club > Club details" page on the "Website Settings" tab.

As soon as you select "Bespoke Template", 3 more fields will appear.
  1. Website Template HTML - This is the HTML that forms your template
  2. Website Template CSS - This is the CSS for your template
  3. Website Template JavaScript - This is the JavaScript that you want to use

Common CSS and JavaScript

The system will automatically include the following libraries for you so you DO NOT NEED to include them in your template yourself:
  • JQuery version 1.11.0
  • Bootstrap version 3.3.6
  • Font Awesome version 4.2.0
  • HTML5Shiv
  • Respond

Template Tags

There are certain special tags that you can insert into your template so that when your page is rendered, certain things happen such as the navigation is displayed.

The available tags are:

TagPurpose
{clubLogo}Inserts your club logo that you have set in the "General Settings" section on the "Website Settings" tab.
{navigationLinks}Inserts a Bootstrap horizontal navigation menu.
{navmenu}Inserts a vertical navigation menu.
{sideBar}Inserts a sidebar with search form, featured news & featured pages tabs as well as any social media links you have added and Twitter widget code.
{searchForm}Inserts a search form
{webAddress}Inserts your club website address
{featuredNews,05}Inserts the top 5 featured news items (no spaces and 2 digit number from 01 to 99)
{latestNews,05}Inserts the top 5 news items ordered in descending order (no spaces and 2 digit number from 01 to 99)
{featuredPages,05}Inserts the top 5 featured pages (no spaces and 2 digit number from 01 to 99)
{pageTitle}Inserts the current page's title
{pageDescription}Inserts the current page's description
{pageContent}Inserts the current page's main content
{whosWho}Inserts your who's who

{clubSessions}

Inserts a table of your club sessions

Hiding Page Sidebar

If you would like to be able to hide the sidebar on certain pages and news items, you need to give your main content div an id of "main_content" and your sidebar div an id of "side_bar".
    • Related Articles

    • Settings

      This page lists all the settings for your website and is split into the following sections: General Settings Web Address This lists your current web address. If you aren't currently using your own web address, there is a link to click on to contact ...
    • Event templates

      To save you having to add the same events to galas over and over again, you can create an event template instead. Once you have added all the events to the template, go to the club event (gala) and assign the template to it. When you build the team ...
    • Volunteer templates

      Volunteer templates allow you to create a set of volunteer roles and assign them to an event. To add a volunteer template, go to "Setup > Volunteer Templates" and click on the "Add Template" button. Enter a name for the template and click on the "Add ...
    • Email templates

      If you send the same email out on a regular basis, add an email template. You can select email templates when sending an email and the contents of the template will be inserted into the email editor field. Email tags You can insert special tags into ...
    • Page templates

      You can create a website page template if you would like to use the same page/layout for multiple pages. Create the template and then when creating a new page, select the template to insert it into the editor.​