Child pages
  • Layout Manager

Contents

The Site Layout Manager makes it easy to create great looking websites using a graphical user interface. A variety of "widgets" can be added and moved around, and the site can be styled to change colours, backgrounds and fonts.
A full preview mode means that you can view all your changes before publishing them to your website.

Key concepts

 

There are three parts that make up an overall site design:

  • Home Page Template: This controls how the home page is laid out (i.e. what content appears in which area of the page).

  • Non-Home Page Template: This controls how pages other than the home page are laid out. It is important to note that this template must be set up separately to the home page - e.g. if you add a banner to the home page, you must also add the same banner (or a different one if you like) to the non-home template.

  • Site Styles: This controls colours and other design aspects of the entire site.

Previewing changes

Any changes you make to the templates or style editor can be previewed before being published.
As you make changes, click the Save button. Once Saved, you can click the Preview button to popup your website in Test/Preview mode that will show you the changes in a fully functional website.
You can browse to any page you wish in the normal way, and only you will see your recent changes. It is important to understand that in Preview mode, the latest saved versions of the templates and style editor will apply. Close the Preview window when you are finished.

 

Previewing your site sets a special cookie on your machine that is cleared hen you close the preview window. If you don't close the window you may be 'stuck' in Preview mode when you visit the site normally. You can always clear the cookie by closing your browser and all windows totally, then re-opening.

 

Publishing changes

To publish your changes to the web site, click the Publish button on the template pages and/or the Style editor as applicable. Each must be done separately, and changes will immediately be available on your web site.

 

  • If you Save, but don't Publish your changes, you can still return to the Layout Manager later on to carry on from where you left off.
  • Previewing and Publishing can also be done from the Site Layout Manager page.

Editing your templates

Click the Edit link of the template you wish to edit from the Layout Manager page. If this is the first time you have edited the template, the default template will load.

 

Your governing organisation may have locked or disabled certain features, and or specified default content or widgets. If a feature listed below is not available, it will mean the governing organisation has locked or disabled it.

 

Template Layout

A template is divided into three main sections that span the width of the page - header, main content, and footer. Within the Main content section you can have one column (that spans the entire width), or two columns either left aligned or right aligned. If available, choose the number of columns from the selector at the top of the screen. If this selector is not visible, this feature has been locked. It is best to choose your number of columns before you start, as changing later may mean you need to set up the content area again.

Adding rows and widgets

A widget is something that you can add to your layout that will display various content or information.
Please click here for a list of widgets and their decscritption and usage.
Before you can add a widget to a layout you must first add a row to the bottom of the section you are working with. A row can contain one, two, or three "cells" of varying width depending on your requirements. To add a row, click the +ROW button at the bottom of the section you are working with. Select the number of cells and click OK. The row will be added underneath.
Once the row has been added, click the +WIDGET button within the cell you wish to add the widget. The widget selction screen will popup. Select the widget and enter the required configuration information (More information). Click OK to add the widget to the row. Repeat the process for other widgets and rows in the three sections of the page.

Editing widgets

To edit a widget's configuration, click the Edit button (round cog) at the top right hand corner of the widget as viewed within the template. Change the necessary information and click OK.

 

If the Edit button is not visible, it means that the widget cannot be configured.

 

Deleting widgets

To delete a widget, click the Delete button (red cross) at the top right hand corner of the widget as viewed within the template. Click OK at the confirmation popup.

 

If the Delete button is not visible, it means that the widget cannot be deleted (this usually means it has been made compulsory by your governing organisation).

 

Deleting an entire row

To remove an entire row , click the Delete button (red cross) at the top right hand corner of the row as viewed within the template. Click OK at the confirmation popup. Deleting a row will also delete any widgets contained within the row.

 

If the Delete button is not visible it means that the row cannot be deleted (this usually means it has been made compulsory by your governing organisation).

 

Moving widgets and rows

Widgets may be moved to another position within the same row by selecting anywhere within the widget and dragging to another position.
Moving rows is likely to be available in a future update. In the meantime, delete and re-add items to move to a different location.

Editing your styles

Click the Site Styles Edit link from the Layout Manager page. The styles manager allows you to control many of the core styles for your website. If this is the first time you have edited the styles, the defaults will load.

 

Styles affect all pages on your site (home and non-home).

 

A breakdown of the customisable items and the styles that they set is provided below:

 

Site Colours

Primary Colour

Secondary Colour

Sets the banner* background colour, menu background colour and widget header background colour.

 Sets the banner* text colour, menu text colour, menu hover colour and widget header text colour.

*Not applicable if an image is used instead of text in the Banner widget

Background This controls the background of the site - ie the space to the left and right of the site layout. It does not apply to the background of the site content itself.
 Background ColourSets the website background colour.
 Background-ImageAllows an image to be used for the site background. This will be visible to the left and right of the main content (bot not behind the content). Note - care should be taken to use an image with as small file size as possible (ideally < 100 kb) to ensure the site loads quickly.
 Background-RepeatCan optionally be set if using a background image. The image can be set to either not repeat, or repeat horizontally, vertically, or both. This is also dependent on the dimensions of the background image itself.
MenuItem PaddingThis is the space (in pixels) between the menu text and the border for each individual menu item. Note: If you have a larger number of menu items it is recommended to set a small padding.
 Text SizeThe font size for the menu text in points (pt).
 Text - Font-FamilyThe font used throughout your website (headings, news items, menu and body text).
Widget definitions Widgets are areas of a page that can output certain content or functionality.
Banner Inserts text or an image that displays as the banner of your website. If you wish to use an image for your banner it must first be uploaded to the File Manager (Content > File Manager) before it can be selected.
Images should ideally have a width of 850 pixels. Height is more flexible, but as a guide a 110px height should work well.
A link can also be set for the banner, by default the banner links to the site home page.

 

Available Widgets 

Standard

ImageInserts an image that displays on your website. Before an image can be selected it must first be uploaded to the File Manager (Content > File Manager). A destination link can also be set for an image via the widget. Note: Images will scale to fit within the widget area however it is recommended that you resize images to the correct dimensions prior to uploading them to the file manager. Images should be optimised to as small file size as possible (ideally < 50 kb) to ensure the site loads quickly. Photos taken directly from digital cameras and phones will normally be too big in both dimenstions and filesize to use directly without re-sizing or optimisation.
HTMLInserts an iframe of a html page that is then displayed on your website. To display Html content on your website an Html pages must first be created via the HTML Page Manager (Content > Html Pages > General Pages). Overflow content is handled via a scroll bar however, to ensure content is displayed neatly on the page, it is recommended that you avoid using set widths within your html.
AdvertInserts an advert directly from your Advert Manager (Site > Advertising > ...) to the website. To display an advert via the widget:
  • Create an advert via the advert manager
  • Assign the advert a position via the Advertising Placement page
  • Within the widget, enter the advert position number in the Ad Position field
YouTubeInserts a YouTube player on your website containing videos from a YouTube playlist (that is controlled/maintained via your YouTube account). The widget requires a YouTube Playlist ID to be entered. To obtain your PlayList ID:
  • View your YouTube Playlist
  • Click Share
  • Copy the URL
  • Extract everything after the letters: "list="
e.g. For  your Playlist ID would be PLEpeKf7U6gmYsc3hiQi1QmIHH-vlHfOk2
EventsDisplays current event items from the Event manager (content > Events) in a variety of formats.
TwitterTo display a Twitter feed on your site:
  • Enter your twitter username 

    Your username is the text at the end of your twitter page URL (e.g. for http://twitter.com/interactsport the username is interactsport).

  • Login to your Twitter account and access the Widget settings page - https://twitter.com/settings/widgets 

    You can access this page by clicking the info (i) link provided.

  • Create a new widget by clicking the 'Create New' button 

    If you have already created a widget you can access it by clicking on the 'Edit' button.

  • Complete the configuration based your desired settings. 

    It is recommended that only advanced users customise the default settings.

  • When you are happy with your widget (preview available) click the 'Create Widget' button
  • Copy the code that has been generated in the box below the widget preview
  • Return to your Layout Manager admin screen
  • Paste the code into the space provided ('Twitter Widget Code' field within the widget settings popup)
  • Click OK.
FacebookInserts a feed from your designated Facebook account. To set the Facebook account simply paste the URL of your Facebook page into the Facebook URL field (e.g. https://www.facebook.com/InteractSportOfficial).

News Rotator

Inserts a news rotator that displays current news items from the News Manager (Content > News). To display a news item within the rotator, you must check the Show in News Rotator checkbox when creating/editing the news item.

 

Available Widgets 

Competition Info (formerly titled "Scoreboard")Inserts a widget that draws content directly from your Results and Statistics. The widgets displays Latest Results, Upcoming Matches and Ladders for your organisation and can be set to full or compact mode.
Match Score / Live ScoreInserts a widget that allows selection of current matches that a organisation is either participating in (e.g. clubs playing in matches) or managing (eg matches under an association). This displays the current score of the selected match, and in some cases, if Live Scoring is activated, will contain extra information (e.g. cricket provides 'ball by ball' information). The widget can be set to full or compact mode.
Top Performers (cricket only)Inserts a Top Performers widget that draws content directly from your Results and Statistics. The widgets displays Best Batting (aggregate), Best Bowling (most wickets), Best Batting Average and Best Bowling Average for your organisation.