Instructions - Athletic Events 2

The ‘Athletics Events 2 (Vertical)’ Best Practice Asset displays a visually-engaging tabbed panel of Athletics events. The first panel contains a list of upcoming events, whilst the second shows a list of recent event scores. 

The feature is powered by a Container element with the following key features inside:

• Event Tabs: An Embed element displaying two styled buttons labelled ‘Schedule’ and ‘Scores’. These work like a set of tabs by controlling the events on show in the panel below.

• Scheduled Athletics Events Panel: An Athletics Event element set to display as a vertical list showing 3 upcoming athletics events. Each event displays a set of summary details with a link to view further information that shows inside a popup. This is supported by a ‘Load More’ button to load in more events and a button link to further information.

• Athletics Scores Events Panel: An Athletics Event element set to display as a vertical list showing 3 recent athletics scores. Each event displays a set of summary details with a link to view further information that shows inside a popup. This is supported by a ‘Load More’ button to load in more events and a button link to further information.

This Best Practice Assets is designed to promote the latest highlights from your school’s Athletics department and displays effectively in both wide and narrow content areas. Some common applications for this feature include:

• Highlights for all teams on an Athletics landing page
• Highlights for a specific team on a dedicated team page
• Supporting highlights on a news landing page
• Supporting highlights on a portal landing page

Important: This Best Practice Asset can be added to multiple pages on your website. It is compatible with both full-width pages and pages with multi-column layouts.

The following instructions explain how to add an Athletics Events panel to a page in your website. Please follow each set of steps in the order presented:

Copy the ‘Athletics Events 2’ Example Layout

As part of the setup process for this Best Practice Asset, Finalsite has added an example page to your website showing the ‘Athletics Events 2’ panel in two content areas with different widths to show how its appearance changes. Begin by copying and pasting one of these example panels onto the desired page in your website: 

1. Go to the ’Pages’ panel.
2. Select the branch containing the example page for this Best Practice Asset. This is normally the ‘Production’ or ‘BPA’ branch.
3. Select the ‘Athletics Events 2’ page.
4. Hover over one of the Container elements displaying the example Athletics Events panel and click on the ‘Copy’ icon in the top-right corner.
5. Go to the ‘Pages’ panel and navigate to the desired page for your new Athletics Events panel.
6. Scroll down to the content area in which you would like to display the panel:
• If the content area doesn’t have any existing elements, hover over the bottom of the main content area and click on the ‘Add Element’ button
• If the content area contains existing elements, hover over the element that should directly precede the Athletics Events panel and click on the ‘Add Element’ button.
7. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

Optionally Update the ‘Schedule’ and ‘Scores’ Tab Button Labels

With the new Athletics Events panel in place, optionally update the labels of the styled buttons labelled ‘Schedule’ and ‘Scores’ within the settings of the Embed element:

1. Hover over the Embed element within the Athletics Events panel and click on the ‘gear’ icon in the top-right corner.
2. Click into the ‘Code’ content editor within the ‘Edit Embed Element Settings’ window.
3. Optionally replace the ‘Schedule’ text with an alternative short label. This is formatted in black between the <button class=”schedules”></button> HTML tags).
4. Optionally replace the ‘Scores’ text text with an alternative short label. This is formatted in black between the <button class=”scores”></button> HTML tags).

Important: When updating a button label, only update the text label formatted in black as described above. Please do not modify the button HTML tags or the class attributes inside of them. This markup is required for the tabbing functionality to work correctly and is not visible on the page.

Configure the Events on Display in the Scheduled Events Slideshow

The Scheduled Events Slideshow displays the next 3 events from across all sports and teams in the Athletics Manager by default. This may optionally be updated to show specific types of event by applying filters within the settings of the Athletics Event element:

1. Hover over the Athletics Event element displaying scheduled events and click on the ‘gear’ icon in the top-right corner.
2. Click on the ‘Filter by:’ dropdown within the ‘List’ section in the ‘Edit Athletics Event Element Settings’ window.
3. Select a new filter from the dropdown (for example ‘Sports’). This will add a new dropdown filter control above the ‘Filter by:’ dropdown.
4. Click on the new filter dropdown and select one or more of the values on display (for example ‘Football’). The list of values in each dropdown is generated based on the data in the Athletics Manager.
5. Repeat Steps 2 to 5 for any additional filter settings you would like to apply.

You may also optionally update the number and date range of the events of display in the slideshow. With the ‘Edit Athletics Event Element Settings’ window still open:

1. Click on ‘+ Content Settings’ in the ‘Edit Athletics Event Element Settings’ window.
2. Optionally update the field specifying the number of items to display.
3. Click on the ‘Save’ button at the bottom of the ‘Edit Athletics Event Element Settings’ window.

Tip: To learn how to add new events to the Scheduled Events Slideshow, please visit the Knowledge base article on how to Upload Athletics Manager Data.

Note: When updating this Athletics Event element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the slideshow displays with the correct presentation.

Update the ‘View Full Schedule’ Button Link

To update the label and link destination for the ‘View Full Schedule’ button:

1. Hover over the first Athletics Event element in the panel, which displays the scheduled upcoming events and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Design’ in the ‘Edit Athletics Event Element Settings’ window.
3. Click into the ‘Footer Content’ content editor.
4. Update the text label for the existing button link, making sure not to remove the link formatting applied to it.
5. Right click on the link and choose ‘Edit Link’ from the action menu.
6. Select a suitable link type for link destination from the options top of the ‘Link’ properties window.
7. Update the link settings to point the button to the desired page or file. Make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Athletics Event Element Settings’ window.

Configure the Events on Display in the Event Scores Slideshow

The Event Scores Slideshow displays the 3 most recent event scores from across all sports and teams in the Athletics Manager by default. This may optionally be updated to show specific types of event by applying filters within the settings of the Athletics Event element:

1. Hover over the Athletics Event element displaying event scores and click on the ‘gear’ icon in the top-right corner.
2. Click on the ‘Filter by:’ dropdown within the ‘List’ section in the ‘Edit Athletics Event Element Settings’ window.
3. Select a new filter from the dropdown (for example ‘Sports’). This will add a new dropdown filter control above the ‘Filter by:’ dropdown.
4. Click on the new filter dropdown and select one or more of the values on display (for example ‘Football’). The list of values in each dropdown is generated based on the data in the Athletics Manager.
5. Repeat Steps 2 to 5 for any additional filter settings you would like to apply.

You may also optionally update the number and date range of the events of display in the slideshow. With the ‘Edit Athletics Event Element Settings’ window still open:

1. Click on ‘+ Content Settings’ in the ‘Edit Athletics Event Element Settings’ window.
2. Optionally update the field specifying the number of items to display.
3. Click on the ‘Save’ button at the bottom of the ‘Edit Athletics Event Element Settings’ window.

Tip: To learn how to add new event scores to the Scheduled Events Slideshow, please visit the Knowledge base article on how to Upload Athletics Manager Data.

Note: When updating this Athletics Event element, please only update the settings recommended in these instructions. All of the other settings have been configured to ensure the slideshow displays with the correct presentation.

Update the ‘View All Scores’ Button Link

To update the label and link destination for the ‘View All Scores’ button:

1. Hover over the second Athletics Event element in the Athletics Events panel displaying the event scores and click on the ‘gear’ icon in the top-right corner.
2. Click on ‘+ Design’ in the ‘Edit Athletics Event Element Settings’ window.
3. Click into the ‘Footer Content’ content editor.
4. Update the text label for the existing button link, making sure not to remove the link formatting applied to it.
5. Right click on the link and choose ‘Edit Link’ from the action menu.
6. Select a suitable link type for link destination from the options top of the ‘Link’ properties window.
7. Update the link settings to point the button to the desired page or file. Make sure that the ‘Open link in a new tab’ checkbox is only ticked if the link opens an external webpage.
8. Click on the ‘Save’ button at the bottom of the ‘Edit Athletics Event Element Settings’ window.

When adding a new Athletics Events panel or updating the settings for an existing one, the page will have the ‘Compose’ toggle enabled. This means the Container element displaying the feature will show with a simplified appearance to make it easier to edit.

To preview how your updated Athletics Events panel will look with its fully styled appearance:

1. Make sure you have saved any updates to the elements you have been working on.
2. Turn off the ‘Compose’ toggle in the bar at the bottom of the page interface.
3. Refresh the page in your web browser.

To publish the updates on the live website, click on the ‘Publish’ button in the bar at the bottom of the page interface and select from the options in the ‘Publish Page’ window to publish the page now or schedule the page to publish later.

Note: If you do not have the administration rights to publish the page, you can request the page to be published instead. This will notify the specified administrator to approve or deny the publish request.