Page History

...

Overview

Past functionality

Whenever you needed to upload customised JavaScripts or Style Sheets for use in CMS, you would need to navigate to use the File Manager menu and upload the files into the relevant folderfunction, then reference them in a HTML Snippet widget, and apply to a page(s).

If you had to change the scripts, you couldn’t edit them within CMS. Instead, you had to make your changes locally and then upload the amended files to your CMS.

The HTML Snippet widget allows you to do so much more than applying styles or running scripts. Therefore, unless you added a meaningful description to the HTML widget, how would you know what it was doing? You couldn't.

New functionality

How does

...

Scripts & Styles work?

When you create a customised script or style sheet in CMS, the system will add automatically adds them to the correct system folder. All files are minimised once you click Save to reduce load times.

...

To see the scripts and styles that exist in your CMS, navigate to Advanced Content → Content → Scripts & Styles.

Step-by-step guide

To start using the widget, you don’t have to do anything other than upgrade to or be running a version 4.13.02 or higher.To best explain the functionality, we will execute make a simple change to the background colour of our Store Locator page.

1.      In your CMS, Go to Advanced Content.

2.       Click Click Scripts & Styles.

Image Modified

3.        Select Style Sheets4.        

4.  Click + Add Script/Style at the top right-hand side of the browser.

5.        You can choose to create a JavaScript or a Style Sheet. We will select Style Sheet and type in  Select Style Sheet.

6.  In File Name, enter an appropriate name that follows the naming conventions of our site.

67.        Select Image Removed7.      Click the Add button. The system will open a blank editing window for you to type .

8.  Type in your custom style sheet , or you can paste the text from a file you already created elsewhere.

...

9.        If you hover over Options at the top right of your browser, next to Cancel and Save, you will see File History. Use the file history to monitor changes to the script and revert to an older version if needed by clicking on the version and selecting Restore this version.10.       When you have finished, click Save.

10. Click Cancel to exit out of the script editor.

Applying 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).11.      In

1.  In your CMS, select Content → Pages & Templates
   

12.     

1. 
   
2. At the top right of the screen, type Store Locator into the “Search for a page/template” prompt box. Your page name may be different.
   Image Modified
   

13.      Click to edit 15.      Search for Scripts & Styles—the

1. 
   
2. Click Edit. for the page/template name.
   

14.      Click Image Removed

1. 
   

1. Once in the page, click Add Widget.
   
   
2. In the search field, start typing 'Scripts & Styles' — the system will auto-fill the results.
   Image Modified
   

16.      Make sure you have highlighted

1. 
   
2. Select 'Scripts & Styles

,

1. ' and click Image Modified

 

17.      In the window that opens up, type in a meaningful description.

18.      Click Edit next to Scripts & Styles.

Image Removed

19.      The system will display customised script and style files. Select the one you created from the dropdown list and click Image Removed

20.     

1.  to open the Scripts & Styles window.  
   
   
2. In Description, enter a meaningful description for the use of this style. This will display next to the style name when it is in use.
   
3. Add a Layer if required.  
   
   
4. From the Scripts & Styles dropdown list, select the style you created and click Add.
   
   Image Added
   
   
5. Click Edit if you want to make some last minute changes to the Style Sheet, otherwise,

click  Apply

1. to apply the script or style, click Save.
   
   The CMS will now show you have

1 23.      Select

1. applied that Script & Style. You can add multiple scripts or styles to the same widget.
   

21.      “Enable widget on Save” is selected by default, disable it if you don’t want it taking effect yet. Otherwise, click Save.

22.      You can now see, at a glance, that the Store Locator page has a script or style applied to it.

Image Removed

1. Image Added
   
   
   
2. To see the script or style applied on the page/template, select Publish (top right of the screen)

to effect the changes

1. .
   

24.     

1. 
   
2. Go to your site and open the Store Locator page (or the page to which you made changes).

Deleting a Script or Style

...

Info
Note - you will not be able to delete scripts and styles that are currently being used in a page or template.

1. In the CMS, navigate to Advanced

Content →

1. Content → Scripts & Styles.
   

2.      Click on the

1. 
   
2. Depending on whether you want to delete a javascript or style sheet file, click on the Javascript or Style Sheets tab.
   
   Image Modified
   

3.      You will notice that some

1. 
   
2. Notice that System files have

an

1. 'Edit

and an Options button. The System ones have an Edit only, and the theme.css is Readonly.

4.      If you hover over the Options button, you will see those files have two options: Where it's Used and Delete.

Image Removed

5.      Click on Where it's Used for the cv.css.background.css file. 

6.      The system tells us what we already know: cv.css.background.css is used on the Store Locator template.

Image Removed

7.      Let's try and delete that file. Hover over the Options button and select Delete.

Image Removed

8.      The system asks us if we want to delete the file. Click OK.

Image Removed

9.      The system will not delete the file because, as it already told us, and what we already knew, that file is in use.

Image Removed

10.     We realise our mistake and hover over the Options button for the cv.css.h1.blog.css file and select Delete.

Image Removed

11.     Confirm the deletion, and the system removes the file.

Image Removed

Additional Information

...

...

1. ' buttons only and cannot be deleted. User-created ones have 'Edit' and 'Option' buttons.
   
2. To delete the file, hover over its Options button and click Delete.
   
   
3. In the 'Delete widget' box, if you are sure you want to delete this file, click OK otherwise, click Cancel.

Image Added

Checking where a script or style is used

1. In the CMS, navigate to Advanced Content → Scripts & Styles.
   
   
2. Depending on whether you want to check a javascript or style sheet file, click on the Javascript or Style Sheets tab.
   
   
3. Find the file name, hover over its Options button and click Where It's Used.
   Image Added

Additional Information

Related

...

help

...

...