Customization

Intro

The Web CMS Service has been created in such a way as to give you the optional ability to customize formatting and behavior through the addition of javascript and cascading stylesheets.

Please note this ability extends to customizing the content you add and NOT modifying the structural layout of the templates or the site schemes offered through the Service. 

Cascading Stylesheet Best Practice

To avoid the possibility of creating conflicting naming conventions, please preface your custom code with the designation "u_" before your code IDs and classes. 

Example:

.u_your_class_name {
   color: red;
   font-weight: bold;
}

The risk of NOT using the unique naming convention is the possibility of overriding an existing name in the default CSS and JS provided in the templates, resulting in unexpected behavior or presentation.

Site-wide customization

Site managers have the ability to attach custom CSS, JavaScript and programming code in the Site configuration file and have those additions roll out to every asset capable of using that custom add-on.

Customization of a site

  1. A site can be customized by adding CSS, Javascript, or code block. Begin by browsing through the Asset Tree to Base Folder/_Site Configuration.
  2. Click _Site Configuration and select the Edit tab.
  3. Expand the Site settings » Site-specific files » CSS/JS/code for site section.
  4. You can link to a pre-created block of code, CSS, or JS, attach a CSS file or a Javascript file. Each section allows for the additional blocks or files. If source order is a requirement, note the plus button [+] in the upper left corner of the section; you can add multiple supplemental file sections to ensure code renders in the proper order.
  5. Once linked, scroll to the bottom of the _Site Configuration page and click Submit to save.

At the page-specific level

Similar to the customizing a site, the new template gives you the option to customize on a page-by-page basis.

  1. To begin, select the page to be customized and click the Edit tab.
  2. Inside either the Flex or Standard page, expand the Page settings section.
    Customize a specific page
  3. The Supplemental blocks/files for the page section is identical to the one for the site. 
  4. You can link to a pre-created block of code, CSS, or JS, attach a CSS file or a Javascript file. Each section allows for the additional blocks or files. If source order is a requirement, note the plus button [+] in the upper left corner of the section; you can add multiple supplemental file sections to ensure code renders in the proper order.
  5. Once linked, scroll to the bottom of the page and click Submit to save.

Attaching files

As mentioned above, custom style sheets and javascript can be added to influence the entire site or page-by-page. Please note that such customization, if desired, is the responsibility of the client and is not a service offered by the Web CMS Team. If you require assistance to create such customization, IET or other provider of your choosing can be used.

  • Code blocks can be saved to: Base Folder/_user-blocks/XHTML/.
  • CSS should be saved to: Base Folder/local_resources/css.
  • Javascript XHTML files can be saved to: Base Folder/_user-blocks/XHTML/.
  • Javascript files can be saved to: Base Folder/local_resources/js.

Using jQuery

The Web CMS Service uses jQuery as its default javascript library, which is automatically loaded on your behalf. Presently, the Service is using jQuery JavaScript Library v1.7.2, but the Page Settings region gives the option to roll-back your jquery preference to an earlier version used by the Service.

Adding in your own functions then becomes a matter of process. Full javascript (or .js) files should be attached in the page setting region as a file, which is then linked in the <head> tag. 

To add function, such as the example format below:

$( document ).ready(function() {
 // Your code here.
});

create a New -> Site Asset - > File, insert your code, and save to the /local_resources/js folder. Attach this file in the Page Settings section of your Flex or Internal page, or in the Site configuration file if you want this code to be available globally across your entire site. Note, if you are working in the multi-site model, the file should be saved in your custom Resources site's /local_resources/js folder instead.