Less Customization

Learn how you can do Less customizations in your theme, adding your own UIkit theme or adding new settings to the Customizer.

File Structure

Here is a short overview of the /less folder.

Folder/File Description
/less/theme.less Defines the theme style and imports the UIkit theme. This file will be compiled into CSS and saved in the /css folder every time you hit Compile Less in the theme settings. At the same time, all styles will be saved in the /styles/STYLE-NAME/css folder.
/less/customizer.json Defines which customizer parameters will be displayed in default or advanced mode. It groups UIkit variables, sets what can be defined through the color picker, direct input or a select box and adds fonts.
/less/bootstrap.less Imports all Bootstrap related files (Joomla 3 only). Just like the /less/theme.less file, it will be compiled into CSS every time you hit Compile Less in the theme settings.
/less/uikit Contains the UIkit theme files. The UIkit core files can be found in /warp/vendor/uikit.

Add Your Own Custom Less Folder

Follow this tutorial first, before doing any Less customizations.

  1. Copy the /less folder and rename it to /less-custom.

  2. Open the theme's config.php and register the new folder instead of the /less folder:

    'path' => array(
    'theme'   => array(__DIR__),
    'js'      => array(__DIR__.'/js'),
    'css'     => array(__DIR__.'/css'),
    'less'    => array(__DIR__.'/less-custom'), // Here
    'layouts' => array(__DIR__.'/layouts')
),

    Note This will change the core Less folder. All styles which are generated through the customizer will compile their CSS using the new /less-custom folder.

  3. Import the old /less/theme.less in your new /less-custom/theme.less by replacing the whole content with the following import rule.

    @import "../less/theme.less";

    Joomla 3 only: In order to make customizations update proof, import the old /less/bootstrap.less in your new /less-custom/bootstrap.less by replacing the whole content with the following import rule.

    @import "../less/bootstrap.less";
  4. Delete the folders /less-custom/UIkit and /less-custom/bootstrap.
  5. Now you can start adding your custom code within the /less-custom/theme.less.

Customize UIkit

UIkit has its own documentation, which you can find on the UIkit website. You might want to take a particular look at the docs on Variables, Best theming practices and the customizer.json when starting out with Warp themes and UIkit.

Do the following steps to add your own UIkit theme.

  1. Follow the tutorial Add your own custom Less folder above.
  2. Copy following files to your /less-custom/ folder:
    1. /less/uikit
    2. /less/bootstrap.less
    3. /less/theme.less
  3. Now you can customize all files in /less-custom like the whole /less-custom/uikit folder, the /less-custom/theme.less file or the /less-custom/customizer.json to add your custom variables.

Select a Custom Font in the Customizer

Warp gives you access to all fonts available in the Google fonts directory. But occasionally you might want to add your own font or one that is not provided by Google.

  1. Follow the tutorial Add your own custom Less folder above.

  2. Open the /less-custom/customizer.json file and add your font option and the correct path to the list.

    "Custom Fonts": [
    {"name": "FONT-FAMILY", "value": "'FONT-FAMILY'", "url":""}
],
"System Fonts": [ ... ]

Add Your Own Font

  1. Firstly, follow the tutorial Add your own custom Less folder above.

  2. Create a /fonts folder inside the theme directory and put your font files there.

  3. Add the @font-face rule for your font to your /less-custom/theme.less and link to your font files:

    @font-face {
  font-family: 'FONT-FAMILY';
  src: url('../fonts/FONT-FAMILY-webfont.eot');
  ....
}

  4. Open /less-custom/customizer.json file and add your font option like this:

    "Custom Fonts": [
    {"name": "FONT-FAMILY", "value": "\"FONT-FAMILY\", Helvetica, Arial, sans-serif"}
],
"System Fonts": [ ... ]

And that's it! You can now use your font within the theme.

Customizer and Images

If you would like to add the option of picking images, like different backgrounds, to the Customizer, you can do so by following this tutorial. Let's say, you want to add two different background styles, red and blue.

  1. Firstly, create an /images folder inside your style /styles/STYLE-NAME directory and put your background images there.

  2. Create a new theme.less by following the tutorial Add your own custom Less folder above.

  3. Create a new variable for the body style and add it to the /less-custom/theme.less file.

    @theme_global-body-style:    '';

  4. Now we'll create mixins for each background case. In our example we have a mixin for the red case and one for the blue case.

    .body-style() when (@theme_global-body-style = red) {

  body { background: url(../styles/STYLE-NAME/images/my-red.jpg) 0 0 repeat; }

}

.body-style() when (@theme_global-body-style = blue) {

  body { background: url(../styles/STYLE-NAME/images/my-blue.jpg) 0 0 repeat; }

}

  5. Afterwards, we need to call the mixin, which generates the actual CSS output.

    .body-style();

  6. Now, we'll create a select box for our body style @theme_global-body-style. Just add the following code in the /less-custom/customizer.json.

    {
    "type": "select",
    "vars": [
        "@theme_global-body-style"
    ],
    "options": [
        {"name": "Default", "value": ""},
        {"name": "Red", "value": "red"},
        {"name": "Blue", "value": "blue"}
    ]
},

  7. Lastly, define, in which group your newly created variable should appear. In our example we added it to the General variables.

        "groups": [
        {
            "label": "General",
            "vars": [
                "@theme_global-body-style",
                "@global-background",
                "@global-border",
Back to YOOtheme
Warp Themes Documentation