DMS 2 Style.less Styles not applied

[tecteamplymouth 0]

Hi I'm using the Skelethon-Basic child theme as a test.  When I apply normal CSS to the style.css file i.e background-color: #000000; etc changes happen.

 

I'm trying to add the following to the style.less file and it has no effect.  If I add the same code to the live editor it works fine.

 

Can you please suggest what i'm doing wrong.

 

Thanks

 

Jason

 

/* Social media color variables */

@dribbble:          #EA4C89;

@envelope:          #08CF90;   

@facebook:          #3B5998;

@googleplus:        #E14107;

@instagram:         #517FA4;

@linkedin:          #0181B2;

@pinterest:         #CB2027;

@rss:               #E5842F;

@twitter:           #00ACED;

@youtube:           #CD332D;

.social-bar {

    a {

        margin-right: 0px; // Here in-case you wish to add margins

        padding: 0px; // Here in-case you wish to add padding

    }

    li {

        display: inline;

    }

    .icon {

        .border-radius(0px); // Here in-case you wish to add a radius

        margin-bottom: 5px;

        min-width: 50px;

        color: #FFF;

        text-align: center;

        font-size: 26px;

        line-height: 50px;

    &:hover { .transition(background 400ms linear); }

    }

    .icon-dribbble {

        background-color: @dribbble;

    &:hover { background-color: lighten(@dribbble, 10%); }

    }

    .icon-envelope {

        background-color: @envelope;

    &:hover { background-color: lighten(@envelope, 10%); }

    }

    .icon-facebook {

        background-color: @facebook;

    &:hover { background-color: lighten(@facebook, 10%); }

    }

    .icon-google-plus {

        background-color: @googleplus;

    &:hover { background-color: lighten(@googleplus, 10%); }

    }

     .icon-instagram {

        background-color: @instagram;

    &:hover { background-color: lighten(@instagram, 10%); }

    }

    .icon-linkedin {

        background-color: @linkedin;

    &:hover { background-color: lighten(@linkedin, 10%); }

    }

    .icon-pinterest {

        background-color: @pinterest;

    &:hover { background-color: lighten(@pinterest, 10%); }

    }

     .icon-rss {

        background-color: @rss;

    &:hover { background-color: lighten(@rss, 10%); }

    }

    .icon-twitter {

        background-color: @twitter;

    &:hover { background-color: lighten(@twitter, 10%); }

    }

    .icon-youtube-play {

        background-color: @youtube;

    &:hover { background-color: lighten(@youtube, 10%); }

    }

}

[Danny+ 1,327]

Hi,

 

I have just this moment added this code to my skeletons child theme style.less file - https://cloudup.com/c032463WS2I

 

Then went to my test site and added a MediaBox with the HTML for the social links and it worked without any issue - https://cloudup.com/cU5fghg-IgO

Therefore, if this isn't working for you then it is likely either you have a CSS issues somewhere or a plugin causing the issue.