Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Multiexcerpt
hiddentrue
MultiExcerptNameFeature Title

CMS Scripts & Styles Editor

Overview

Past functionality

Whenever you needed to upload customised JavaScripts or Style Sheets for use in CMS, you would use the File Manager function, 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 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

Multiexcerpt
MultiExcerptNameFeature Overview

The CMS Scripts & Styles function allows you to create and edit scripts and styles as CMS widgets. And because these widgets are dedicated only to running scripts or applying styles, you will know at a glance if a page is using customised JavaScript or Style Sheets.

With the Scripts & Styles widget, you can bundle related scripts and styles into one widget, to function as a unit. Or you can load multiple Scripts and Style widgets to operate independently on a page. You can also easily turn them on and off by ticking the checkbox next to the widget in the page layout.

IMPORTANT - Access to Scripts & Styles widgets is automatically available for version 4.13.02 or higher. If your system needs to be upgraded, please contact us.

Image Removed

How does Scripts & Styles work?

When

...

a

...

custom script or style sheet

...

is created, it is automatically added to the correct system folder

...

and available for selection in a template. To reduce load times, each file is minified once saved.

...


You can:

  • sort all scripts or styles by file name and date last edited.
  • view which pages/templates a file is in use.
  • view historical versions of a file, and its audit trail of the date

...

  • /time

...

  • saved and the user

...

  • .
  • use the comparison tool to check between two versions of a script or style.
  • roll back to a previous version if the current version is not behaving as expected

...

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

Image Removed

...

  • .


When you enter the Scripts or Styles screen, all files are listed. At a glance, you can see the number of times a file is in use and its last edited details. Files can be sorted by file name and date last edited.   

Image Added 


Once a script or style has been saved, it is available for adding to a page or template. See: Scripts & Styles Widget.

Image Added


Panel

On this page:

Table of Contents


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,

...

  1. go to Advanced Content

...

  1. Scripts & Styles.

Image Removed

...

  1. Image Added

  2. Select Style Sheets.

...

  1. All existing style sheets are displayed.
    Image Added
  2. Click Add Script/Style

...

  1. on the top right

...

  1. corner.

  2. In Add Script/Style, select Style Sheet.

...

  1. Image Added

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

Image Removed

...


  1. Click

...

  1. Add

...

...



  1. In the blank editing window

...

  1. , start typing in your custom style sheet

...

  1. . (For a guide to using the Editor, see Code Editor.) Or you can paste text

...

  1. into the Editor.

Image Removed

...


  1. Image Added

  2. Click Save.

...


  1. Click Cancel to exit

...

  1. .

...

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,

...

  1. go to Content → Pages & Templates

...


  1. Use the Search tool to find 'Store Locator'. NOTE - Your page name may be different.

...

  1. Image Added

  2. Click Edit

...

  1. next to the page/template name.

...


  1. In the

...

  1. template, click Add Widget.
    Image Added

  2. In the search field, start typing 'Scripts & Styles' — the system will auto-fill the results.

...

  1. Image Added

  2. Select 'Scripts & Styles' and click

...

  1. Add Widget Image Added.  

  2. The Scripts & Styles

...

  1. Widget automatically opens.

...

  1. In Description, enter a meaningful description for

...

  1. this use

...

  1. . This will display next to the style name when

...

  1. in use.

  2. Add a Layer if

...

  1. needed.  (See: Layers.)

  2. In Scripts & Styles

...

  1. , select the style you created

...

  1. , then click Add.

...


  1. Image Added

  2. Click Edit

...

  1. 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.

...



  1. Image Added

  2. If the Page Preview setting is on, click Publish (top right of the screen).

  3. Go to your site and open the Store Locator page (or the page to which you made changes).
    Image Modified

Deleting a Script or Style

...


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.
    Image Added

  3. Click the Edit button next to the script or style.
    Image Added

  4. In the 'Edit' page, hover on Options, then click File History.
    Image Added

  5. The current and previous versions are listed. To view a previous version, click on it.
    Image Added

  6. To compare two versions, in the Compare? column, toggle ON the two versions, then click Compare Version
    Image Added

  7. Changes are highlighted. When you've finished viewing, click Clear Compare.
    Image Added

  8. To use a previous version, click on it, then click the Restore this version button.
    Image Added

  9. To confirm, click Save. The previous version is copied and saved as the latest version.
    Image Added


Delete a script or style


Info

Deleting non-system scripts and styles in the CMS is available from 4.17+. NOTE - Scripts and styles currently used on a page or template cannot be deleted. They have to be removed from templates first.


  1. In the CMS,

...

  1. go to Advanced Content → Scripts & Styles.

...


  1. Click on the Javascript or Style Sheets tab.

...


...


  1. User-created

...

  1. files will have both 'Edit' and 'Option' buttons.

...

  1. To delete the file, hover over

...

  1. Options

...

  1. , then click Delete. NOTE - System files cannot be deleted. 
    Image Added

  2. In the

...

  1. delete confirmation popup, click OK

...

  1. .

Image Removed


Check where a script or style is

...

in use

  1. In the CMS,

...

  1. go to Advanced Content → Scripts & Styles.

...


  1. Click on the Javascript or Style Sheets tab.

  2. Find the file name, hover over its Options button

...

  1. , then click Where It's Used.

...


  1. Image Added

  2. The templates currently using the script or style are shown.
    Image Added

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.
    Image Added
  2. Hover over Options, then click Minify All Files.
    Image Added
  3. In the popup, confirm you want the files minified.


 


Additional Information


Minimum Version Requirements


Multiexcerpt
MultiExcerptNameMinimum Version Requirements

4.13.02


Prerequisites


Multiexcerpt
MultiExcerptNamePre reqs

Upgrade to version 4.13.02


Self Configurable


Multiexcerpt
MultiExcerptNameSelf Configurable

Yes


Business Function


Multiexcerpt
MultiExcerptNameBusiness Function

...

Content


BPD Only?


Multiexcerpt
MultiExcerptNameBPD Only

Yes


B2B/B2C/Both


Multiexcerpt
MultiExcerptNameB2B/B2C/Both

Both

...

Multiexcerpt
MultiExcerptNameBallpark Hours From CV (if opting for CV to complete self config component)

Contact CV Support

...

Multiexcerpt
MultiExcerptNameBallpark Hours From CV (in addition to any self config required)

Contact CV Support


Third Party Costs


Multiexcerpt
MultiExcerptNameThird Party Costs

N/A

...

Multiexcerpt
MultiExcerptNameCMS Category

 Advanced Content

Related help

...


...




Multiexcerpt
hiddentrue
MultiExcerptNameFeatures List Headers

Macro Instructions for carrying Article Information through to Feature List

Minimum

Version

Requirements

BPD

ONLY


Business Function

CMS Category

B2B
B2C

BOTH

Feature

Feature Description

(Written for our customers and can be pasted into comms sent to them)

Additional info

Pre-Reqs/
Gotchas

Self Configurable

Ballpark Hours
From CV

(if opting for CV to complete self config component)

Ballpark Hours
From CV

(in addition to any self config required)

Third Party Costs

Instructions for carrying Excerpts through from this page to the Feature List

Article Page:

Add macro  / Multiexcerpt (or copy and existing excerpt and edit) or (Copy existing page and place content into existing excerpt macros)

On Features List page:

Click in the Cell to be populated  / add macro /  Multiexcerpt Include / Select the Article page and the excerpt (or copy another feature line and edit the 'Article page' source.



Related help

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
typepage
excludeCurrenttrue
cqllabel = "scripts-styles" and type = "page" and space = "KB"
labelsnew ver41302 how-to