About
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 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:
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 which 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.
Note: 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.
Notes:
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.
Note: 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 which 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 which 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. Note, 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. Note, 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. Note, 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. Note: 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
Sets the banner* background colour, menu background colour and widget header background colour.
Secondary 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 Colour
Sets the website background colour.
Background-Image
Allows 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-Repeat
Can 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.
Menu:
Item Padding
This 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 Size
The font size for the menu text in points (pt).
Text:
Font-Family
The 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. Widgets
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.
Menu
Inserts the site menu as defined in the Edit Menu (Site > Edit Menu) admin page. The menu can be multiple levels deep and will scroll horizontally if it exceeds the site width, however it is recommended that you limit the top level of your menu to 10-12 items. The menu padding, font size and colours can be updated via the Styles Manager.
Image
Inserts 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.
HTML
Inserts 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.
Advert
Inserts 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
YouTube
Inserts a YouTube player on your website containing videos from a YouTube playlist (which 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 http://www.youtube.com/watch?v=TXKiqJqOxkA&feature=share&list=PLEpeKf7U6gmYsc3hiQi1QmIHH-vlHfOk2 your Playlist ID would bePLEpeKf7U6gmYsc3hiQi1QmIHH-vlHfOk2
Events
Displays current event items from the Event manager (content > Events) in a variety of formats.
Twitter
To display a Twitter feed on your site:
  • Enter your twitter username 
    Note: 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 
    Note: you can access this page by clicking the info (i) link provided
  • Create a new widget by clicking the 'Create New' button 
    Note: if you have already created a widget you can access it by clicking on the 'Edit' button
  • Complete the configuration based your desired settings. 
    Note: 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'
Facebook
Inserts 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).
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.
News Rotator
Inserts a news rotator which displays current news items from the News Manager (Content > News). To display a news item within the rotator you must check theShow in News Rotator checkbox when creating/editing the news item.
Match Score / Live Score
 
Inserts a widget which allows selection of current matches that a organisation is either participating in (eg 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 (eg 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.