Scripts & Styles

Create a script or style

To best explain the functionality, we will make a simple change to the background colour of our Store Locator page.

1. In your CMS, go to Advanced Content → Scripts & Styles.
   
   
   
2. Select Style Sheets. All existing style sheets are displayed.
   
   
3. Click Add Script/Style at the top right corner.
   
   
4. In Add Script/Style, select Style Sheet.
   
   
   
5. In File Name, enter an appropriate name that follows the naming conventions of our site.
   
   
6. Click Add. 
   
   
7. In the blank editing window, start typing in your custom style sheet. (For a guide to using the Editor, see Code Editor.) Or you can paste text into the Editor.
   
   
   
   
8. When you have finished, click Save.
   
   
9. Click Cancel to exit.

Apply a script or style to a page/template

Now we will apply that style sheet to our Store Locator page (or the Page that you have chosen).

1.  In your CMS, select Content → Pages & Templates
   
   
2. At the top right of the screen, use the Search tool to find 'Store Locator'. NOTE - Your page name may be different.
   
   
   
3. Click Edit next to the page/template name.
   
   
4. Once in the page, click Add Widget.
   
   
   
5. In the search field, start typing 'Scripts & Styles' — the system will auto-fill the results.
   
   
   
6. Select 'Scripts & Styles' and click .  
   
   
7. The Scripts & Styles Widget automatically opens. In Description, enter a meaningful description for this use. It will display next to the style name when in use.
   
   
8. Add a Layer if needed.  (See help on adding layers.)
   
   
9. In Scripts & Styles, select the style you created, then click Add.
   
   
   
   
10. Click Edit to make some last minute changes to the Style Sheet, otherwise, to apply the script or style, toggle ON Enable widget on Save, then click Save.
    
    The CMS will now show you have applied that Script & Style. 
    
    
    
11. If the Page Preview setting is on, click Publish (top right of the screen).
    
    
12. Go to your site and open the Store Locator page (or the page to which you made changes).

Compare or revert to an earlier version of a script or style

A file history of each script and style is maintained. This has a list of all versions with the date/time the version was saved and the user who created or edited it. You can also compare versions. If you are not happy with the current version, revert to an earlier one.

1. In the CMS, go to Advanced Content → Scripts & Styles.
   
   
2. Click on either the Javascript or Style Sheets tab.
   
   
   
3. Click the Edit button next to the script or style.
   
   
   
4. In the 'Edit' page, hover on Options, then click File History.
   
   
   
5. Along with the current version, any previous ones are listed. To view a previous version, click on it.
   
   
   
6. To compare two versions, in the Compare? column, toggle ON the two versions, then click Compare Version. 
   
   
   
7. The two versions are displayed side by side with changes highlighted. When finished, click Clear Compare.
   
   
   
8. To use an earlier version, click on the version, then click the Restore this version button.
   
   
   
9. To confirm, click Save. The earlier version will be copied and  saved as the latest version.
   
   

Delete a script or style

1. In the CMS, go to Advanced Content → Scripts & Styles.
   
   
2. Click on the Javascript or Style Sheets tab.
   
   
3. User-created files will have both 'Edit' and 'Option' buttons. To delete the file, hover over its Options button, then click Delete. NOTE - System files have cannot be deleted. 
   
   
   
4. In the delete confirmation popup, click OK.

Check where a script or style is in use

1. In the CMS, go to Advanced Content → Scripts & Styles.
   
   
2. Click on the Javascript or Style Sheets tab.
   
   
3. Find the file name, hover over its Options button, then click Where It's Used.
   
   
   
4. The templates currently using the script or style are shown.
   

Minify Scripts and Styles

To improve the load time of web pages on your website, existing files can be minified.

1. Go to Advanced Content → Scripts & Styles.
   
2. Hover over the Options button, then click Minify All Files.
   
3. In the popup, confirm you want the files minified.

Additional Information

Related help

• Page:
  Style Sheet Editor
• Page:
  Scripts & Styles
• Page:
  .css Variables for Scripts & Styles .css editor
• Page:
  Scripts & Styles Widget