See all tutorials

Tutorials » How to create css and js resources for a website

All web application have their own style (css resources) and javascript files in order to give the unique look and feel compared with the rest of the applications. The main difference between these files and third party frameworks like jQuery or Bootstrap is that the web application own resources are more likely to change over time, the changes are caused by business changes, optimizations suggested by users, performance improvements.

In a dynamic world, a quick change of web application resources is a key factor to success. Webpagebytes CMS makes very easy the management of a web application owned resources.

To create a css and/or javascript resource file in Webpagebytes CMS take the following tasks

  1. Create a site page with text/css content type
  2. Create a site page with text/javascript content type
  3. Create site urls and link the urls with the created resources
  4. Start using the new resources in the web application content

Estimated task duration, 10 minutes.

Create a site page with text/css content type

Step 1

In Webpagebytes CMS administration interface navigate to Site pages section.

Step 2

Create a new site page by clicking on New site page link. Choose any name for your site page, in this case the name will be 'site-style'

Step 3

Edit the 'site-css' site page and add the application own css code. The following fields needs to be completed
Field Description
Site page description Leave the value site-style . This value is used just for display purpose.
Content type Type the value text/css . This value represents the resource content type.
Source interpretation Choose Plain text source . This means that the resource content will be used as it is without any scripting interpretation
Site page content Type the resource css code with the below text
body
{
    background-color: #EDEDED;
}
h1
{
    color: #0C35D3;
}
p
{
    margin: 10px 0px;
}

Create a site page with text/javascript content type

Step 4

Perform similar operations with Steps 1-3, except that the Content type field value will be test/javascript, the site page name will be site-js and the site page content will be javascript code.
function escapeHtml(html) {
        html = html || "";
        var escaped = "" + html;
        var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"], [/'/g, "&apos;"]]
        for(var item in findReplace) {
             escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);
        }
        return escaped;
}

Create site urls and link the urls with the created resources

Step 5

Create a site url /site.css and link it with the site page named 'site-style'
Create a site url /site.js and link it with the site page named 'site-js'

Start using the new resources in the web application content

Step 6

At Step 5 the css and javascript were published, ready to be used in the generated content. Create a site page with the HTML below and publish it at /test uri.
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="./site.js"></script>
    <link rel="stylesheet" href="./site.css">
</head>
<body>
    <h1> Webpagebytes custom css and js </h1>
    <p> 
    <script>
        document.write( escapeHtml(" this <p> element was inserted with javascript"));
    </script>
    </p>
</body>
</html>

Load the /test uri in a web browser and see how the css style and javascript are applied to the web page.
Sample web page with custom css and javascript created with Webpagebytes CMS

Fork me on GitHub