How to add JavaScript and CSS

You may want to add your own JavaScript (JS) and StyleSheets (CSS) to Sitemagic CMS, or perhaps add third party functionality to enhance the built-in capabilities of Sitemagic CMS. This section demonstrates how this can be easily achieved using Template Enhancements.

Wouldn't it be great if you could just have Sitemagic CMS automatically load JS and CSS files for you? You can. All you need to do is add the files to the enhancements folder in your website's template folder.

Let's assume you are using the template called Fashion (find the template you use by logging in and browse to settings). That means your JS and CSS files should go into templates/SMFashion/enhancements. Filenames must end with .js or .css.

Perhaps you only want your JavaScript to run on one or a few specific pages. This can be easily achieved as demonstrated below.

SMEventHandler.AddEventHandler(document, "DOMContentLoaded", function()
{
    if (SMDom.HasClass(document.documentElement, "SMPagesFilename" + "Contact") === true)
    {
        // Add your code here
    }
});

Simply replace Contact with the name of your page to make sure the code only runs on the intended page.

Obviously you can make sure styles are only applied to elements with class names chosen by you. But if you want to style more common elements such as input controls or headings, you will need the approach below to make sure styles are only applied on specific pages.

html.SMPagesFilenameContact h1
{
    color: blue;
}