Instructions

The ‘Giving Thermometer 1 (Vertical)’ Best Practice Asset displays a vertically-orientated infographic for promoting a specific fundraising goal at your school and highlighting the total donations made towards achieving it. 

The liquid level within the thermometer represents the progress of the campaign and animates up from the base of the graphic when the feature first displays. This is supported by prominent labels displaying the fundraising goal and the total funds raised.

The Giving Thermometer is powered by a single Content Element and can be customized to a light or dark color scheme. It has a narrow shape and is left aligned, which makes it well suited to a left sidebar or narrow content area. The space to the right of the feature on wider screens is then commonly used to display further information about the campaign.

Important: This Best Practice Asset can be added to multiple pages on your website. For best results, the thermometer should be added to a narrow column within a left or right banner, a Layout element or a narrow content area within a multi-column page layout.

As part of the setup process for this Best Practice Asset, Finalsite has set up an example Giving Thermometer to your website. Begin by copying and pasting this example 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 ‘Giving Thermometer 1’ page.
4. Hover over the Content Element displaying the Giving Thermometer color option you want to use 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 Giving Thermometer.
6. Hover over a narrow content area in the layout where you would like to add the new Giving Thermometer and click on the ‘Add Element’ button.
7. Click on the blue ‘Paste this Element’ button in the ‘New Element’ window.

The Giving Thermometer can display with a light or dark color scheme. This can be changed at any time through updating the settings of the Resource element displaying the feature:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the Giving Thermometer you want to update.
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Hover over the Content Element displaying the Giving Thermometer and click on the ‘gear’ icon in the top-right corner.
6. Click on ‘+ Design’ in the ‘Edit Content Element Settings’ window.
7. Click into the ‘Custom Class’ field and type the custom class or classes outlined in the table below to apply the desired color scheme, making sure to include a space between the two classes if you apply the dark color style.
8. Click on the ‘Save button’ at the bottom of the ‘Edit Content Element Settings’ window.

The ‘Total Raised’ and ‘Our Goal’ values in the Giving Thermometer can be updated at any time on a page to reflect the latest progress of your campaign. All other aspects of the infographic including the text labels, percentage marker and animated effects have been built into the Best Practice Asset and cannot be changed.

To update the values for the total raised and/or fundraising goal:

1. Go to the ’Pages’ panel.
2. Navigate to the page displaying the Giving Thermometer you want to update.
3. Turn on the ‘Compose’ toggle in the bar at the bottom of the page interface.
4. Refresh the page in your web browser.
5. Hover over the Content element displaying the thermometer and click on the ‘Edit Content’ button.
6. Update the first bullet in the content editor to set the ‘Total Raised’ value, making sure not to remove the bullet point formatting applied.
7. Update the second bullet in the content editor to set the ‘Our Goal’ value, making sure not to remove the bullet point formatting applied.
8. Click on the ‘Save’ button at the bottom right of the content editor.

Important: Both the fundraising goal and total raised must be added as monetary values, with the first character representing your desired currency. Commas, periods and supporting words may be included, but the values themselves must be set as numbers.

When adding a new Giving Thermometer or updating its content, the page will have the ‘Compose’ toggle enabled, which means the Content Element displaying the feature will show with a simplified appearance to make it easier to edit.

To preview how your updated Giving Thermometer 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.