How to: Add custom CSS and JavaScript to your pages

This tutorial will describe how to add custom CSS and JavaScript to your web site. The Web Cube default template webcube/base.html includes two blocks where custom CSS and JavaScript can be added. 

 

The first block is called extra_head. This is where we can insert custom CSS.

Screen_Shot_2013-02-19_at_10.55.34_AM.png

 

 

 

The second block is called extra_js and this is where we can insert the custom JavaScript.

 

Screen_Shot_2013-02-19_at_10.51.24_AM.png

 

 

Note: If webcube/base.html template hasn't been added yet to your DB Templates click here to read more about DB Templates. 

In this example we will demonstrate how to add custom CSS and JavaScript to the default Flat Pages template flatpages/default.html

To edit the flatpages/default.html template we have to make sure the template has been added first to the DB Templates. For more information on DB Templates click here.

 

1. Click on the CMS tab.

Screen Shot 2013-01-10 at 11.45.16 AM.png

 

2. Click on the Templates menu items.

Screen_Shot_2013-02-19_at_1.39.24_PM.png

 

3. Click to open the flatpages/default.html template.

Screen_Shot_2013-02-19_at_1.39.37_PM.png

 

4. In the Content text box add the extra_head and extra_js blocks and add the custom CSS and JavaScript respectively. The {{ block.super }} variable is used to get the content of the block from the parent template.

Screen_Shot_2013-02-19_at_1.41.09_PM.png

 

For more information on how to upload files such as images, CSS and JavaScript files on your web site click here.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk