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 Framework.

The single configuration file config.php improves setting up the template environment by doing all initialization in one location. It is located in the template's root 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. The following line is commented out, it is for user defined CSS. If you want to include your CSS in a template, you can remove the comments here ...

// $this->addStyleSheet($template->url.'/css/custom.css');

...and insert your CSS code into templates/your_template/css/custom.css.

How to load a custom JavaScript file

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

// set template javascript
if ($this->params->get('load_javascript')) {
$this->addScriptDeclaration($template->getJavaScript());
$this->addScript($template->url.'/lib/js/addons/base.js');
$this->addScript($template->url.'/lib/js/addons/accordionmenu.js');
$this->addScript($template->url.'/lib/js/addons/fancymenu.js');
$this->addScript($template->url.'/lib/js/addons/dropdownmenu.js');
$this->addScript($template->url.'/lib/js/template.js');
}

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

$this->addScript($template->url.'/lib/js/myscript.js');

Documentation on Github

Help us out! If you are feeling that our documentation has errors or can be improved, fork it at Github and send us a pull request. Any contribution is much appreciated. Thank you!