Add custom CSS and JavaScript files

In this tutorial we show you how you can add custom css styles and javascript files to your template based on the Warp 5.5 Framework.

The single configuration file /layouts/template.config.php improves setting up the template environment by doing all initialization in one location. It is located in the folder. It initializes all PHP classes, loads all necessary CSS and JavaScript and also all IE6 and IE7 specific files. If you need to load custom CSS and JS files, this is where you do it.

How to load a custom CSS file

The configuration file loads all CSS files needed for the template, with template.css being a CSS file that includes all other CSS files. If you want to add custom css code in the file /css/custom.css. The file is also loaded in the template.config.php:

$this->warp->stylesheets->add('css:custom.css');

If you want to add a complete new css file, create the css file in the folder /css e.g. /css/mycss.css and add the following line to the file /layouts/template.config.php:

$this->warp->stylesheets->add('css:mycss.css');

How to load a custom JavaScript file

The following lines of code load the JavaScript used in the template.

// javascripts
$this->warp->javascripts->add('js:warp.js');
$this->warp->javascripts->add('js:accordionmenu.js');
$this->warp->javascripts->add('js:dropdownmenu.js');
$this->warp->javascripts->add('js:template.js');

If you want to add your own script (let's call it myscript.js), simply copy it to the folder /js of the template and add the following line before the closing curly bracket:

$this->warp->javascripts->add('js:myscript.js');