You can develop page layouts using the page layouts module. A page layout means that people see a customised version of the Smartabase user interface when they use their browser to access Smartabase.

You can apply page layouts to groups and roles. A page layout for a group means that anyone part of that group (as a coach or athlete) will see Smartabase according to the page layout settings. A parent group’s page layout automatically gets used for any subgroups unless they have their own page layout. You can also set up page layouts for roles so that people with that role see its page layout.

Page layouts for groups take precedence over page layouts for roles. This means that when someone with a role that has a page layout applied loads a group that also has a page layout, the page layout will update to that of the group’s.

If someone doesn’t have a page layout for their group or role, Smartabase will use the default page layout and the appearance specified by the site CSS in the application details module.

It is important that page layouts are not used with the intent of controlling access to system permissions. Page layouts change what someone sees, but not what abilities they have access to. This is especially important for people who use the Smartabase mobile applications as page layouts are not relevant in those environments.

When creating a new page layout, you must specify a name for the page layout. The name of a page layout cannot be seen outside of the administration interface, so as long as the name is meaningful to you and any other administrators, there are no other considerations for naming a page layout.

The tabs feature allows you to customise the tabs that appear on the navigation bar in the web browser. These are the buttons that are located on the navigation bar between the header image and the drop-down menus for Smartabase actions. We don’t recommend adding more than one or two tabs as more can clutter the navigation bar. 

The small links feature helps you customise which links appear in the drop-down menu in the top corner of the page. These are in addition to the help link and log out function, which are enabled by default. If people have access to their account page and messaging functionality as part of their role, then the Account Read and Messaging options are useful additions as small links.

The sections area of the page layouts module is where you can make significant functional customisations to the Smartabase user interface. Sections can be added as containers for home page tools or drop-down menus on the navigation bar; without access to tools in their page layout, people will have difficulty performing any tasks within Smartabase.

Often, sections are created to cluster tools that have common purposes. For example, you could create a reports section with the reports tool, the Excel reports tool and the personal bests tool, then enable the tab function for this section to turn it into a drop-down item on the navigation bar. Or you could create a section to display front page reports – in this case you wouldn’t enable the tab function. 

A custom CSS file can be uploaded for a page layout using the custom CSS field; however, this is not a process site administrators should normally set out to do without consulting their Fusion Sport builder.

The background image and header image fields let you upload suitably sized and themed graphics for your page layout. As with the CSS file upload field, it’s not mandatory to upload files to these fields. The CSS, background image and header image for the site (or those of a parent group’s page layout, if set) will apply when these fields are empty.


A screenshot showing an example of settings for a simple page layout for athletes

This example is a simple page layout for athletes to use when they choose to log in to Smartabase with their browser instead of from one of the mobile applications. It has quick access to the calendar as a navigation bar item, and athletes can use the drop-down menu to find their account, inbox, the help link and to log out.

A screenshot showing the effect of page layout settings

This screenshot (above) shows the effect of the choices we’ve made as small links.

A screenshot showing an example of settings for a simple page layout for athletes

The first section (above) in this page layout is for displaying the athlete’s favourite events as buttons on their home page. Note that the function to automatically close this section is not enabled, so that athletes can always see their favourite events. The tab feature is also not enabled, so this section won’t appear as a drop-down item on the navigation bar.

A screenshot showing the effect of page layout settings

The screenshot above demonstrates the effect of the settings for the first section in our example page layout. The athlete has chosen a food diary and wellbeing diary as their favourite events, so they show up directly on their home page. 

A screenshot showing an example of settings for a simple page layout for athletes

This (above) is the second section in our page layout and the tab feature is enabled for this section to place it as a drop-down item on the navigation bar. We’ve added three tools for athletes to easily enter data, make an appointment or look for a resource. Note that we’ve used the customisation option to convert the name of the appointments tool. 

A screenshot showing the effect of page layout settings

This screenshot shows the effect of setting our second section to act as a tab. The three tools we added appear as items in a drop-down menu on the navigation bar next to the tool (the calendar) that we set as a stand-alone tab.


  1. Log in to the admin interface.
  2. Select the page layouts module.
  3. Select the option to create a new page layout.
  4. Name the page layout.
  5. Set the language, if necessary.
  6. Fill in the description field, if needed.
  7. Specify which tabs you want to include on the navigation bar.
  8. Specify which features should appear as small links.
  9. For each section:
    1. Name the section.
    2. Choose which buttons should be enabled within each section.
    3. Determine the order of the buttons within the section.
    4. Decide if the section should be set as a tab on the navigation bar.
  10. Determine the order of the sections within the page layout.
  11. Upload a custom CSS file, background image or header image, if required.
  12. Click Save.
  13. Add the roles or groups to which this page layout should apply.
  14. Click Save.

Was this page helpful?