Check out our extended

Less Basics Advanced Advanced tutorials require advanced knowledge of web design concepts and languages such as HTML, CSS, JavaScript.

The styling of this theme is made using Less which lets us dynamically change CSS properties like coors, spacings and more. It's not mandatory to know less in order to change something in the style of your theme because regular CSS still applies, but it's important to understand the basics of how it works in order to make it work in your advantage if you decide using it.

Modifying CSS in your theme

All the less files can be found in the /styles-less/ folder on your server. For an easy way to identify and modify the files, we've separated the styling of elements in different less files (header.less, images.less, portfolio.less, etc).

There are 2 ways to go in order to start modifying CSS in your theme:

• Adding CSS to custom.less - in your child theme, locate the custom.less file in the /styles-less/ folder. Open the file and add your custom CSS.

• Copying the entire css file in the child theme - if you need to make big changes in one of the css files, copy that file in the child theme, recreating the exact folder structure from the parent.

Less variables

The main advantage of using less is the use of variables and functions. Get acquainted with the variables used in this theme by opening the variables.less file found in parent-theme/styles-less/

For example, if you'd like to add this CSS snippet:

    .widget-title {
    color: red;
    margin-bottom: 20px;
    }

You can write the code in less using a color variable:

    .widget-title {
    color: @theme-color-5;
    margin-bottom: 20px;
    }

@theme-color-5 - is a color variable. If you modify this variable the color will modify for all the classes the variable was used for. If we have the color property as red in 100 places, we would have to go through all 100 classes and modify the color red to green for example, but with the use of CSS variables we only modify the variable and the color changes apply in all 100 classes.

    @theme-color-5: green
    .widget-title {
    color: @theme-color-5; // color: green;
    margin-bottom: 20px; 
    }

Some variables like the styling color palette can be changed from the WordPress admin (more about this in [this article]). Other more specific color options are preset by us in the variables.less file. These variables can be changed by re writing the CSS in the custom.less file from the child theme folder (see above). This way you can make big changes in the style by modifying only the variables that you need: spacings, paddings, colors, etc.