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 on 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. 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, go to Content → Pages & Templates
   
   
2. 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. In the template, 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 Add Widget .  
   
   
7. The Scripts & Styles Widget automatically opens. In Description, enter a meaningful description for this use. This will display next to the style name when in use.
   
   
8. Add a Layer if needed.  (See: 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.
    
    
    
    
    
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

The file history of each script and style lists all versions with saved dates/times and users. You can compare versions. If you're 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. The current and previous versions 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. Changes are highlighted. When you've finished viewing, click Clear Compare.
   
   
   
8. To use a previous version, click on it, then click the Restore this version button.
   
   
   
9. To confirm, click Save. The previous version is 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 Options, then click Delete. NOTE - System files 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 Options, then click Minify All Files.
   
3. In the popup, confirm you want the files minified.

Additional Information

Related help

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