Jump to content


Photo
- - - - -

Customizing with LESS (vs. CSS) with the "child theme "method"

LESS CSS Child

Best Answer Rob , 23 June 2013 - 03:57 PM

Erwan,

 

I mentioned LESS because you mentioned it extensively in your first post.

 

First, you should not be editing the core stylesheet, and since you did not mention which style.css/less you were editing, I was not sure precisely what you were doing.

 

Next, it's fine to edit a stylesheet, provided:

1.  It is not the core stylesheet

2.  You do not add LESS to a style.css (it's not our rules, but it just doesn't work).

3.  You understand the order of precedence. 

 

To clarify 'the order of precedence', as your page loads, the browser reads the various links in the <head> tags.  Among those are the various stylesheets. As they load, one by one, the instructions are sent to the browser, BUT, if the stylesheets send conflicting messages the browser may not know which to render to the screen.

 

We know that when a child theme's stylesheets are loaded, they follow the Framework (in many cases), but, there are occasions when the stylesheets don't work correctly from child themes. It's because the browser has decided to accept the CSS from somewhere else.  The way to overcome this is very simple.

 

1.  You can use the Site Options > Custom Code, which always loads in the proper order.

2.  You can use the PageLines Customize plugin and the style.css there, or create a style.less there.  PageLines Customize, unlike the child themes, always loads in the proper order.

 

My answer was an effort to explain to you how to deal with all the issues by placing your code in the correct place. 

 

You may also want to double check this code
.astuce p:after {content: "\2713"}

Which is incorrect CSS, failing to end in ;}

 

It may be correct LESS, which may be why the code works in a LESS stylesheet and not in a CSS stylesheet.  Again, LESS code does not work in a style.css file. That explains the answer to your question about why it works in one stylesheet, and not another.  Style.LESS stylesheets can read both standard CSS and LESS. This is a well documented issue written about on the Internet in many websites.

 

So that you understand the fundamentals,  CSS is client-side, meaning the browser loads it.  LESS is both client and server side styling.  See http://lesscss.org/

 

Next; our documentation is an ongoing process in continual development. I apologize if you find it lacking, but we welcome contributed thoughts and full documentation as part of a community effort.  PageLines Framework isn't a little theme, but a massive amount of complex code, and thus the documentation is lengthy and sometimes difficult to understand.  Again, our apologies for that.

 

I actually did understand your topic and did reply correctly.  Unfortunately, for whatever reason, you misunderstood my answer.  I hope this more detailed reply resolves the issue for you.  Simply, just use PageLines Customize or the Site Options > Custom Code and not the stylesheets of child themes for your custom coding for the safest solution.

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 18 January 2013 - 06:49 AM

Hi,

I would like you to provide me explanations and clarifications pertaining custom LESS, especiallay versus custom CSS, using the "child theme method".

The following CSS snippets do not fully work using the a "child CSS" (whereas they work with the two other customization methods i.e. site options \ custom code and customize plugin). By contrast, they DO fully work when put in a "child LESS".

  • Example #1 : a custom class of my own

.astuce p {background-color: orange;}

.astuce p:before {content: url('..images/everything-spritev2.png');}

.astuce p:after {content: "\2713"}

 

The first rule only works when put in my child "style.less" file. Mixing Pagelines overriding IDs such as #page or #site and/or CSS important declaration in a child "style.css" was fruitless. The two last rules work whatever the method.

  • Example #2 : a widget class ("Google Doc Embedder" - GDE)

a.gde-link:link {

    font-size: 80%;

    font-variant: small-caps;

    color: green;

}

 

The color property only applies when put in a child "style.less" file. the two first properties work whatever the method.

 

Is this all logical for you, and if so WHY  ? Am I wrong or right when thinking there IS a difference here when using LESS vs. CSS, one way or the other?
 

Moreover, could you confirm me a "child LESS" file is grouped together with all other Pagelines LESS files and dynamically compiled, contrary to a "child CSS file" ? If this indeed the case, should I expect a major benefit from this, or not really ?

Thank you so much in advance for your comments and clarifications... !

Best regards,

Erwan



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 January 2013 - 10:59 PM

Hi Erwan,

 

You may wish to check some of the information provided by one of the developers who implemented LESS; 

Please Login or Register to see this Hidden Content

 

There's a panel here explaining why LESS only works in the style.less and not the style.css -

Please Login or Register to see this Hidden Content

So you're correct, there is a difference.

 

Hope this helps.



#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 21 June 2013 - 08:12 PM

Hi Erwan,

 

My apologies for not giving a better answer earlier.

 

Please do not think I'm being rude, but we are limited in the support we can give to customized CSS created by designers and developers.  I'm unable to provide support for customized classes created.

 

To answer your queries about custom LESS

Please Login or Register to see this Hidden Content

 

You can, and should read the documentation provided at

Please Login or Register to see this Hidden Content

where explanations, comparisons, and proper guidance is provided about the use of both standard CSS and LESS. 



#4 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 23 June 2013 - 11:04 AM

Hi Rob,

My apologies for not having replied to you sooner: I was rather unsatisfied / puzzled by your answer but I was at the beggining of my learning curve of Pagelines, and I hence did'nt really know how to reply appropriately. Moreover I doubted you really understood my question which I probably did not explain clearly enough ;)

Please forget customized classes I just mentioned as an example: I just wanted to know why (or at least if it was logical) the same CSS works in a child style.less and not in a style.css, that's it (and of course I know & already knew that "LESS only works in the style.less and not the style.css"... I don't even understand why you told me this).

I regularly notice it happens in many different cases: beyond the qualities of LESS & Pagelines LESS, this is one of the reasons why I work with style.less and not style.css since monthes. Do you understand me better?

I had already read in January all the docs you mentioned (and more) before opening this thread but never found an aswer to this: which should IMO be given, considering it has nothing to do with "customization you can't provide support for", which I of course understand.

Pagelines IS A WONDERFUL product (many ppl bought it at my recommandation!), the LESS - Bootstrap - ... integrations ARE great, but - please do not think I'm being rude ;) - it would be a great benefit for the company & its customers to provide just a little more doc about customization & btw prevent tons of questions in forums. Maybe one day I'll see something else in your documentation center that "The Customization documentation is currently being written and will be available very soon!" and I would love it.

Best regards.



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 23 June 2013 - 03:57 PM   Best Answer

Erwan,

 

I mentioned LESS because you mentioned it extensively in your first post.

 

First, you should not be editing the core stylesheet, and since you did not mention which style.css/less you were editing, I was not sure precisely what you were doing.

 

Next, it's fine to edit a stylesheet, provided:

1.  It is not the core stylesheet

2.  You do not add LESS to a style.css (it's not our rules, but it just doesn't work).

3.  You understand the order of precedence. 

 

To clarify 'the order of precedence', as your page loads, the browser reads the various links in the <head> tags.  Among those are the various stylesheets. As they load, one by one, the instructions are sent to the browser, BUT, if the stylesheets send conflicting messages the browser may not know which to render to the screen.

 

We know that when a child theme's stylesheets are loaded, they follow the Framework (in many cases), but, there are occasions when the stylesheets don't work correctly from child themes. It's because the browser has decided to accept the CSS from somewhere else.  The way to overcome this is very simple.

 

1.  You can use the Site Options > Custom Code, which always loads in the proper order.

2.  You can use the PageLines Customize plugin and the style.css there, or create a style.less there.  PageLines Customize, unlike the child themes, always loads in the proper order.

 

My answer was an effort to explain to you how to deal with all the issues by placing your code in the correct place. 

 

You may also want to double check this code
.astuce p:after {content: "\2713"}

Which is incorrect CSS, failing to end in ;}

 

It may be correct LESS, which may be why the code works in a LESS stylesheet and not in a CSS stylesheet.  Again, LESS code does not work in a style.css file. That explains the answer to your question about why it works in one stylesheet, and not another.  Style.LESS stylesheets can read both standard CSS and LESS. This is a well documented issue written about on the Internet in many websites.

 

So that you understand the fundamentals,  CSS is client-side, meaning the browser loads it.  LESS is both client and server side styling.  See

Please Login or Register to see this Hidden Content

 

Next; our documentation is an ongoing process in continual development. I apologize if you find it lacking, but we welcome contributed thoughts and full documentation as part of a community effort.  PageLines Framework isn't a little theme, but a massive amount of complex code, and thus the documentation is lengthy and sometimes difficult to understand.  Again, our apologies for that.

 

I actually did understand your topic and did reply correctly.  Unfortunately, for whatever reason, you misunderstood my answer.  I hope this more detailed reply resolves the issue for you.  Simply, just use PageLines Customize or the Site Options > Custom Code and not the stylesheets of child themes for your custom coding for the safest solution.


  • Erwan likes this

#6 Erwan

Erwan

    Super Member

  • Members

  • 193 posts
  • Framework Version:Framework 2.4.4 - DMS 1.1.6 & 1.2
  • Country: Country Flag

Posted 25 June 2013 - 09:37 AM

Messages & explanations received loud & clear, thanks for all the details provided ;) !

One of the most important to me:

 

 

PageLines Customize, unlike the child themes, always loads in the proper order.

 

 

I will now focus on the Customize Plugin style.less vs. my child theme style.less: never realized it might me THE solution.

Best regards.







Also tagged with one or more of these keywords: LESS, CSS, Child