How to custom template’s CSS and Javascript

This tutorial will take you through the steps needed to add a custom stylesheet to your ZO2 template, without worrying about lost changes when the template or ZO2 framework are updated. You don’t need to change any of the template files, so your custom stylesheet will not be overridden by any updates.

Before making any changes, please remember that you don’t have to edit css files from ZO2 framework.

In this tutorial we’ll show you, how to start customizing your ZO2 templates in the right way.

1. Customize template with CSS/LESS


The ZO2 template comes with structured CSS rules and properties which are compiled from the LESS files. However, there are some cases where we need to style the template without using LESS. One way is by using the custom CSS file with custom rules and properties to override a particular style in the template.

1. 1. Customize template with CSS


Since Zo2Framework version 1.3.1 we added an option called Load Custom CSS & JS: if enabled, custom.css file (in which you can override the default styling of the template) will be loaded in the frontend.

  • In your Joomla backend, go to Extensions > Template Manager > zo2_template > Advanced > you will see the Custom CSS & JS option

custom-css-js

The custom.css file is located in: zo2_template/assets/zo2/css. At first the function will look for the custom.css file from your templates css folder and if file exist then function will load this files. So if you need custom code please create a new custom.css file in insert inside css folder of your current active ZO2 template.

add-custom-css

Some characteristics & benefit of the custom.css file

  • The file is included by default, you don’t want to load it, just remove it.
  • The file is the last file to be loaded in your site.
  • The file is not a compiled file from LESS so it will not be overridden or lost when you compile.
  • This might be useful when you want to make some changes in the template design. All the CSS placed in this file will not be lost after upgrading the template.

1. 2. Customize template with LESS file


Another way to add the custom style to the ZO2 template is by adding a custom LESS file inside assets/zo2/development/less. If you’re unfamiliar with LESS, please take a look at http://lesscss.org/ to get a closer look to LESS syntax. Remember, LESS syntax also compatibles with normal CSS syntax, that means you can write CSS inside a LESS file.

There are a lot of files inside assets/zo2/development/less directory, but pay your attentions to the file template.less, this is the main stylesheet file, where every template’s stylesheets is imported. You can modify this file as you need, and Zo2 Framework will check for any changes and compile LESS to CSS if needed.

If you are Joomla Developer, we recommend you should custom LESS by adding new file. To add new file, please follow the steps below:

  • Step 1: Create your own LESS your_file.less in zo2_template/assets/zo2/development/less

add-custom-less-file

  • Step 2: Open this file: zo2_template/assets/zo2/development/less/template.less then import your newly added your_file.less
/**
 * Zo2 (http://www.zootemplate.com/zo2)
 * A powerful Joomla template framework
 *
 * @version     1.4.5
 * @link        http://www.zootemplate.com/zo2
 * @link        https://github.com/cleversoft/zo2
 * @author      ZooTemplate <http://zootemplate.com>
 * @copyright   Copyright (c) 2015 CleverSoft (http://cleversoft.co/)
 * @license     GPL v2
 */

@import 'core/variables.less';
@import 'core/mixins.less';
@import 'core/joomla.less';
@import 'core/megamenu.less';
@import 'core/module.less';
@import 'core/typography.less';
@import "core/normalize.less";
@import "core/style.less";
@import "your_file.less";  /* adding your custom LESS file here */

1. 3. Problems


When editing less file, if you encouter an error like this:

Warning: file_put_contents(/xxx/assets/zo2/css/template.css) [function.file-put-contents]: failed to open stream: Permission denied in /xxx/plugins/system/zo2/vendor/less/lessc.php on line 1835

All files & directory in /xxx/assets/zo2/ directory need to be writable.

2. Adding & using custom javascript files


The procedure of adding JavaScript code & files is same as above mentioned adding CSS files but this function will load javascript files from js folder of templates if system will find at least one custom.js file.

add-custom-js

If you want to add other javascript libraly then step by step

  • Step 1: copy your file your_file.js to templates/zo2_template/assets/zo2/jsfile-name
  • Step 2: Navigate to /zo2_template/assets/template.json, Then open file template.json and add new code to:

template-json