This site uses cookies in order for our service to work better. Learn more I understand

less.css variables

When creating a template we have an ability  to configure the side panel in such way that we will be able to change the template, color, font size and other parameters. In order for the system to work, we have to create in the themes folder, a folder named css_less and inside of it a file called less.css. The path to it should look like this ./data/themes/ourtemplate/css_less/less.css

In this file we can create our styles and on the top we can declare variables which we will use later in our code. Windu recognizes variables in a special way.

You can learn more about less.css at http://lesscss.org/

We can define any variables, however only those starting with @e- are interprated by Windu.

In the second spot we can define editor type choosing from:
  • @e-color-variablesname - color choice panel
  • @e-normalsize-variablesname - size slider with 0-800 range and step of 10
  • @e-smallsize-variablesname - size slider with 0-100 range and step of 1
  • @e-fontsize-variablesname - size slider with 8-36 range and step of 1

Example CSS code
 
@e-fontsize-basic-font: 16px;
@e-smallsize-padding: 20px;
@e-smallsize-border-radius: 10px;

@e-color-basic: #c49b06;
@color-basic-light: (@e-color-basic + #333);

@e-color-bg: #404040;
@e-color-bg-container-box: #0d0d0d;

body{
    background-color: @e-color-bg;
    font-size: @e-fontsize-basic-font;
    line-height: 160%;
    color:difference(@e-color-bg-container-box, #ffffff);
}
h1,h2,h3,h4,h5,h6{
    color:@color-basic-light!important;
    font-family: 'Open Sans', sans-serif;
    font-weight:300;
}
a{
    color:@e-color-basic;
    -webkit-transition: all .06s ease-in-out;
    -moz-transition: all .06s ease-in-out;
    transition: all .06s ease-in-out;    
}
a:hover{
    color:@e-color-basic + #444;
    text-decoration: none;
}
h4,.carousel-caption h4 {
    font-size: (@e-fontsize-basic-font * 2);
    margin-bottom:@e-fontsize-basic-font;
}
.big-box{
    background-color: @e-color-bg-container-box;

    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);    

    margin-top:@e-smallsize-padding * 2;
    margin-bottom:(@e-smallsize-padding);
    
    -webkit-border-radius: @e-smallsize-border-radius;
    -moz-border-radius: @e-smallsize-border-radius;
    border-radius: @e-smallsize-border-radius;    
}

Help Center

Do you have a technical problem?