Jump to content
Erwan

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

Recommended Posts

Erwan    37
Erwan

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

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi Erwan,

 

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

http://nickhaskins.com/2012/08/less-chronicles-the-basics/

 

There's a panel here explaining why LESS only works in the style.less and not the style.css - http://support.pagelines.me/docs/customization/custom-css/ So you're correct, there is a difference.

 

Hope this helps.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob    547
Rob

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 http://support.pagelines.me/docs/miscellaneous/less/

 

You can, and should read the documentation provided at http://support.pagelines.me/docs where explanations, comparisons, and proper guidance is provided about the use of both standard CSS and LESS. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      Hello. 
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
       
      my website : https://www.wedding-photography-minneapolis.com
    • Jason
      By Jason+
      Feel free to delete this post if its not helpful or its just plain wrong.
       
      I though it might be useful to share how I customize the size of the builder. (reduce my eyestrain )
      1 - install stylerbot extension in chrome (stylerbot keeps this css every time you access the url)
       
      2- add this css to stylerbot for the site you are working on
      .CodeMirror {
          font-size: 14px;
          height: 600px;
      }
      .pl-workarea.pl-has-sidebar .pl-workarea-sidebar-container {
          right: 0px;
          width: 500px;
      }
      .pl-workarea.pl-has-sidebar .iframe-container {
          right: 500px ;
      }
       
      change sizes to suit.
       
      Cheers.
×