Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

How does Scripts & Styles work?

When you create a custom script or style sheet in CMS, the system automatically adds them is created, it is automatically added to the correct system folder . All files are minimised once you click Save to reduce load times. Historical versions of each file is kept, along with an 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
who made the changes. You can
  • .
  • use the comparison tool to check
differences
  • between two versions
. And
  • of a script or style.
  • roll back to a previous version if the current version is not behaving as expected
, simply roll back to a previous one.Once your
  • .


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, you can add it it is available for adding to a page or template. See: Scripts & Styles Widget.


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, navigate go to Advanced Content → Scripts & Styles.


  2. Select Style Sheets. All existing style sheets are displayed.

  3. Click Add Script/Style at 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 the Add buttonThe system will open a

  7. In the blank editing window.
    Start , start typing in your custom style sheet. (See Code Editor for For a guide to this toolusing the Editor, see Code Editor.) Or you can paste text from a file you already created elsewhereinto the Editor.



  8. When you have finished, click Click Save.

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

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 go to Content → Pages & Templates

  2. At the top right of the screen, use the Use the Search tool to find 'Store Locator'. NOTE - Your page name may be different.


  3. Click Edit for next to the page/template name.

  4. Once in In the pagetemplate, 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 the this use of this style. This will display next to the style name when it is in use.

  8. Add a Layer if requiredneeded.  (See help on adding layers: Layers.)

  9. From the In Scripts & Styles dropdown list, select the style you created and , then click Add.



  10. Click Edit if you want 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).
    Image Modified


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

A The file history of each script and style is maintained. The file history contains a list of lists all versions with the date/time the version was saved and the user who created or edited itsaved dates/times and users. You can also compare versions. If you are 're not happy with the current version, you can revert to an earlier one.

  1. In the CMS, navigate go to Advanced Content → Scripts & Styles.

  2. Click on either the Javascript or Style Sheets tab.


  3. Click the Edit button for next to the script or style.


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


  5. Along with the current version, any earlier ones will be The current and previous versions are listed. To view an earlier 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 Changes are highlighted. When you've finished viewing, click Clear Compare.


  8. To use an earlier a previous version, click on the versionit, then click the Restore this version button.


  9. To confirm, click Save. The earlier previous version will be is copied and  and saved as the latest version.


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, navigate 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 and , 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

currently used

in use

  1. In the CMS, navigate 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, and then click Where It's Used.


  4. The templates currently used by using the script or style will be are shown.

Minify Scripts and Styles


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


  1. Navigate Go to Advanced Content → Scripts & Styles.
  2. Hover over the Options button and , then click Minify All Files.
  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

BPD StructureContent


BPD Only?


Multiexcerpt
MultiExcerptNameBPD Only

Yes


B2B/B2C/Both


Multiexcerpt
MultiExcerptNameB2B/B2C/Both

Both

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

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

Contact Commerce Vision

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

Contact Commerce Vision


Third Party Costs


Multiexcerpt
MultiExcerptNameThird Party Costs
Multiexcerpt
MultiExcerptNameCMS Category

 Advanced ContentN/A

CMS Category





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