Style sheets

Development mode

Before you start customizing style sheet files, make sure to enable "development mode" setting in the control panel under "system - settings". This will ensure that system does not use cached data so your changes are seen right away. Also edit "index.php" file and set "ENVIRONMENT" constant to "development". This will ensure that system displays errors if any occur so you could easily spot and fix any issues you may come across. Do not leave development mode enabled on a live site as it will slow it down considerably.

Directory structure

Style sheet file are located in two places and have the following directory structure:

1. assets/css/system/core
Core style sheet files that are loaded in every template (such grid, buttons, typography, etc).

2. assets/css/*plugin*
Plugin style sheet files (such as blogs, pictures, etc).

3. templates/your_template/css

Your template's style sheet files (such as template's layout, content, etc).

When system uses your template, it loads all style sheet files from your template's folder and all style sheet files from the assets folder if related plugins are installed. All style sheets are combined and compiled into one which reduces the file size and increases loading speed and overall performance.

Required files

Your template must contain "style.less" file in its "css" folder, for example "templates/your_template/css/style.less". This file has to include necessary code to load the core CSS files (#1 above), plugin CSS files (#2 above) and your own template's CSS files (#3 above). Simply refer to an existing style.less file in one of our default templates to see how it works.

Using Less

All default style sheet files are coded in Less. Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable. All existing CSS functionality works the same way in less files, except that you can also use new features provided by Less. You may learn about its syntax at lessphp compiler page which the software uses to compile Less files.

Loading style sheet files

Default "style.less" file has code similar to this:

// Core
@import url("[base_path]assets/css/system/core/style.less");
// Variables(? indicates that the file is optional and won't trigger an error if it doesn't exist)
@import url("vars.app.less");
@import url("vars.custom.less?");
// Externals
@import url("externals/*");
// Plugins
@import url("[plugins]");
// Template
@import url("layout.less");
@import url("content.less");
@import url("homepage.less");
@import url("social.less");
// Custom styling (? indicates that the file is optional and won't trigger an error if it doesn't exist)
@import url("custom.less?");

Actual code is separated across multiple files instead of having one file with thousands of lines of code making it difficult to navigate and work with.

Note that your default "style.less" file must have this code present:

@import url("[plugins]");

It tells the system to load style sheet files from the "assets/css/*plugin*" folders for the plugins installed on your site.

You may load files that may or may not exist, for example:

@import url("custom.less?"); // note the question mark at the end

System will load "custom.less" file if it exists in the "templates/your_template/css" folder. If it doesn't exist it won't be loaded and no error will be displayed.

Default files

Default templates come with a variety of style sheet files that contain code for alerts, form, buttons, layout and other content on your site. They also contain the following files that store generic information such as colors, font sizes, etc which allow you to easily modify the look of your site without looking for the code all across the files:

vars.system.less
This file contains default generic settings for the entire software. This file is the same in all default templates.

vars.app.less
This file contains settings that override generic settings in the file above and apply specifically to your template.

Customizing default style sheets

Default templates come with two style sheet files called "_custom.less" and "_vars.custom.less". If you would like to customize any of the default style sheets, you may rename these files to "custom.less" (for style sheet code) and "vars.custom.less" (for style sheet settings) respectively and insert your code there. Code in these files will override code in all other style sheet files of your template. This way if you customize one of the default templates, you won't have to redo your customizations when new updates come out since your custom code will be stored in those 2 files.

Customizing plugin style sheets

If you would like to change or add styling to any of the plugins, you may do so by creating a new file called "style.less" and placing it in the "templates/your_template/plugins/plugin_name" folder. For example "templates/your_template/plugins/users/style.less". Note that file name must be "style.less" as system will look for it first. If you would like to add other files for the plugin, you certainly can do so by loading them from the "style.less".