Jump to content

Archived

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

rekent

style.less custom styling not being recognized/imported

Recommended Posts

rekent

To create some custom buttons in LESS, I created a style.less file and put it in my child theme directory with the style.css sheet.  However, the style sheet is not being recognized/imported.  

 

When I put the code for the buttons in the built in CSS/LESS code window, the buttons work.  But when I move the code to the external file, the buttons no longer have the styling.  

 

Is there something special that has to be done to get the user override LESS file to work that wasn't required for the user override CSS file?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

If you can the provide the code you're using we can take a look. However, it's likely you will need to prefix your code with the PageLines override ID's, see here for more information.

 

http://docs.pagelines.com/customize/overriding-default-css


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
rekent

The only LESS code that I am using so far is the following for a button, taken directly from a Pagelines support page with few changes.  If I read your response correctly, you are saying I should prefix .btn-hjil with #site so that my function is #site .btn-hjil { ?

.btn-hjil {
    color: @[member="white"] !important;
    .buttonBackground(#cc0000, lighten(#cc0000, 5%));
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    
    &:hover {
        text-shadow: 0 -1px 0 rgba(0,0,0,.25);
        color: @[member="white"];
    }
    &:active {
        text-shadow: 0 -1px 0 rgba(0,0,0,.25);
    }
}

Share this post


Link to post
Share on other sites
greenfly

Have you tried prefixing with #site?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rekent

Have you tried prefixing with #site?

 

I have not.  Even after reading the documentation, I am not completely clear on what the #page and #site prefixes do, and did not want to cause any negative effects unless it was suggested that I use one of those prefixes.

Share this post


Link to post
Share on other sites
greenfly

They help the site make the Custom code more specific if you like. There won;t be any negative effects from trying this. You can always remove the code if you do not like the effect or it doesn't work 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rekent

#site did make the code work properly.

 

Can you give me just the 2 second version for idiots of #page and #site so that I will have at least a low-level understanding of when I should use each?

Share this post


Link to post
Share on other sites
greenfly

In order to gain an understanding of CSS i would start at the beginning and read about css selectors http://www.w3schools.com/cssref/css_selectors.asp

 

I heartily recommend the resources at http://www.w3schools.com/

 

To get to grips with CSS also try one of the free online courses 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rekent

The same issues seem to keep happening though.  The button code in my LESS file is working just fine, but when I attempt to add the following code to the LESS sheet it does not work.  When added directly into the customization pane, it works.  Is there any reason you can readily think of for this?  I would understand if the button code was not functioning either, but if it is working I can not figure why the widget title changing code would not work.

/* Change Text Widget title and body text  to Arial */
#site .arial {
    h2.widgettitle {
        font-family: Arial;
        font-weight: bold;  
    }
    .widget .textwidget {
        font-size: 12px;
        font-family: Arial;
    }
}

Share this post


Link to post
Share on other sites
GetMeWebDesign

Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
rekent

 

That may very well be true, but that is what came out of Chrome's inspector, and that is the code that works to override the styling when placed in the built-in customization window.

Share this post


Link to post
Share on other sites
Danny

I am not entirely sure what you mean when you say this:

 

The button code in my LESS file is working just fine, but when I attempt to add the following code to the LESS sheet it does not work. 

 

What do you mean by LESS file and LESS sheet ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
GetMeWebDesign

That may very well be true, but that is what came out of Chrome's inspector, and that is the code that works to override the styling when placed in the built-in customization window.

Chrome inspector would not deliver code with errors in it. Perhaps provide a link to the site and then others can inspect and provide you with the valid code


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites

×