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
Advanced> you will see the
Custom CSS & JSoption
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.
Some characteristics & benefit of the
- 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
- Step 2: Open this file:
zo2_template/assets/zo2/development/less/template.lessthen import your newly added
/** * 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.
- Step 1: copy your file
- Step 2: Navigate to
/zo2_template/assets/template.json, Then open file
template.jsonand add new code to: