Loading...

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;    
}

We are continually working to improve Windu CMS!

By visitng the Windu website you will be kept up to date on new developments concerning the CMS.

2014-05-19 00:00:00 Battle Report

Since the release of Windu 3.0 we have we have done a lot of stuff to our CMS. The most important event in the near future will be the upgrade to version 3.1, which means a...

2014-03-25 00:00:00 Windu 3.0 - list of changes

After many months of challenges, new version of our CMS is finally out! We've decided to drop the idea Windu 2.4 and go for 3.0 straight away due to amount of changes...

2013-06-17 00:00:00 Update - Windu CMS rev 1432

New Windu CMS update is available for download at update server! Update includes several changes in our system: Pinning of tabs - allows fast navigation between open...

Buy a PRO license!

Activate loads of add-ons in your windu!

Buy a PRO license