Jump to content


This topic is now archived and is closed to further replies.


Style.less Styles not applied

Recommended Posts


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.






/* 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%); }

Share this post

Link to post
Share on other sites



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.

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please?