Customize preset

1. Custom Preset


The Presets Style Panel in ZO2 Framework makes use of a powerful Preset system that allows you to create preset styles and customization. With Preset Style, you can assign a certain style to your theme or change the preset style such as Background, Header, Text, Link…

  • To select a preset style and create your desired style, please go to Extensions > Template Manager > zo2_hallo - Default > Zo2 > Theme Preset:

theme_preset

1. 1. Select Preset Styles


ZO2- Hallo provides a selection of three preset style variations, each with its own custom theme color: Green, Blue, and Organe.

preset_style

  • Click on the selected preset. In the preset setting table, you can see the Coloring Arrangements of each section. You probably would need to use different color styles for background, header and so on. However, all those color styles should be in harmony.

theme_preset11

1. 2. Preset Settings


From Preset Settings, users will be able to change the header, background, text & link color.

color

The color picker will display a list of preset color palettes from which the user can select his desired color.

e34250d71ecc29adff6d84030b41ab7c

After setting the above points to your desired color, reload you site and you can see the changes.

1. 3. Layout Style

Zo2 Hallo offers you the option of a boxed or full width layout.

stylelayout

2. Custom styles


2. 1. Customize template.less


Every Zo2 Framework’s template is packed with a handful of stylesheets in the form of LESS file. If you’re unfamiliar with LESS, please take a look athttp://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 stored. You can modify this file as you need, and Zo2 Framework will check for any changes and compile LESS to CSS if needed.

template-assets

2. 2. Custom static assets


If modifying template.less is not enough, you can try add new static assets to the template. Navigate to template’s layouts directory, openassets.json, you will see an array in the form of json data, it may look like this:

[
    {
        "path": "ekko-lightbox",
        "type": "js"
    },
    {
        "path": "normalize",
        "type": "css"
    },
    {
        "path": "megamenu",
        "type": "js"
    },
    {
        "path": "template",
        "type": "less"
    }
]

This is the static assets data taken from Zo2 Framework default template: Hallo. Currently, there are 3 type of static assets you can add: js, css andless. The path attribute defines the path to the actual file, but without file extension. All files are placed into the directory: assets/zo2/developmentand to the corresponding directory, such as js, css and less. The path use the backslash / to seperate between directories and file, Windows system users may experience losing static assets if uses the slash \.

All files inside the assets/zo2/development directory will be copied automatically to the assets/zo2 directory.

3. Style Overrides


3. 1. About Template and style


Zo2 Framework supports 4 starter templates: Zo2_hallo - Default, Zo2_hallo - Home Blue, Zo2_hallo - Home Orange and Zo2_hallo - Home Boxed For each template, you can create unlimited styles that are to override the default style.

overide_style

3. 2. Style Override


Each style includes its own theme, layout, logo, navigation … When creating new style, you can configure those things and override the default style.

3 steps to override style

  • Step 1: Create override style

To create new override style, you can duplicate the default style or you can save as copy in setting panel of any style.

Duplicate Style

duplicate_style

Or Save as Copy

save_as_copy

  • Step 2: Configure style

Now open the clone style then configure theme, layout, mega menu, …

toolbar

  • Step 3: Assign menu items for the style

Open the tab Assignment the tick on the menu items that you want to apply the style. The style will override default style in selected menu items.

assignment