Leafiny Documentation

Cascading style sheets

This section describes Leafiny CSS edition.

Theme

The theme is located in the Frontend module: /modules/Frontend/

The Frontend module is the core of your app, it should never be updated with new Leafiny releases. This module is always loaded after others, it contains optional overrides of templates, CSS and JS from all modules, and your own resources.

CSS overview

CSS files are located in /modules/Frontend/skin/css directory.

Open the Frontend module config file: /modules/Frontend/etc/config.php

The head block loads default Leafiny theme stylesheets:

/** modules/Frontend/etc/config.php **/

'block' => [
    'head' => [
        /* ... */
        'stylesheet' => [
            'Frontend::css/pure-min.css' => 100,
            'Frontend::css/grids-responsive-min.css' => 200,
            'Frontend::css/style.css' => 300
        ],
        /* ... */
    ],
],

The key is the CSS file path in skin directory of the specified module (/modules/Frontend/skin)
The value is the CSS sort order

This 3 CSS files are loaded in the head section:

<link rel="stylesheet" href="https://.../skin/css/pure-min.css" />
<link rel="stylesheet" href="https://.../skin/css/grids-responsive-min.css" />
<link rel="stylesheet" href="https://.../skin/css/style.css" />

Add a new CSS file

Add a CSS file in /modules/Frontend/skin/css, for example custom.css. Then add a new declaration:

/** modules/Frontend/etc/config.php **/

'block' => [
    'head' => [
        /* ... */
        'stylesheet' => [
            'Frontend::css/pure-min.css' => 100,
            'Frontend::css/grids-responsive-min.css' => 200,
            'Frontend::css/style.css' => 300,
            'Frontend::css/custom.css' => 400,
        ],
        /* ... */
    ],
],

Remove a CSS file

Remove CSS file in /modules/Frontend/skin/css directory, and remove the CSS declaration by comment or delete the line or set null for position:

/** modules/Frontend/etc/config.php **/

'block' => [
    'head' => [
        /* ... */
        'stylesheet' => [
            'Frontend::css/pure-min.css' => 100,
            'Frontend::css/grids-responsive-min.css' => 200,
            // 'Frontend::css/style.css' => 300,
            'Frontend::css/custom.css' => null,
        ],
        /* ... */
    ],
],

Override a CSS file

Third-party modules can declare CSS files.

Open the config file of the third-party module (in etc directory) and find CSS declaration, example:

'block' => [
    'head' => [
        /* ... */
        'stylesheet' => [
            'Leafiny_Example::css/example.css' => 900,
        ],
        /* ... */
    ],
],

The CSS file is named example.css in /modules/Leafiny_Example/skin/css directory. Copy this file in the Frontend module: /modules/Frontend/skin/css/override/example.css.

Then, open the Frontend module config file: /modules/Frontend/etc/config.php, disable original file and declare your own:

/** modules/Frontend/etc/config.php **/

'block' => [
    'head' => [
        /* ... */
        'stylesheet' => [
            /* Third-party Module CSS overload */
            'Leafiny_Example::css/example.css'   => null,
            'Frontend::css/override/example.css' => 900,
        ],
        /* ... */
    ],
],

When null (or false) is specified for the value instead of the position, the file is disabled.