Jump to content
Erwan

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

Recommended Posts

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

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

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

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

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

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

    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • Dan Haddock
      By Dan Haddock
      Plugins Active and installed: 
      Akismet Anti-Spam
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools  
      Enhanced Media Library  
      Flamingo
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap
      Jetpack by WordPress.com
      Legull 
      Loginizer   
      MailChimp for WordPress
      PageLines Updater    
      Schema App Structured Data 
      Sucuri Security - Auditing, Malware Scanner and Hardening
      Uber reCaptcha    
      Yoast SEO
      Wordpress Version: 4.8.1
      Pagelines Version: 2.2.4
       
      Good Evening/Afternoon or Morning, 
      I am running into a problem with CSS styling not applying inside of most browsers (Safari, Firefox) when I am logged in to wordpress, and all browsers that I have tested when I am logged off and the site has been made public (Chrome, Firefox and Safari).
      As a result, I have managed to identify the probable cause. It looks as though these browsers are refusing to render my sites compiled CSS file due to it being a HTTP URL rather than HTTPS.
      I have attempted to change this URL to HTTPS in my browser, however it brings back an ERROR: File not found page - https://www.shortfilmblog.com/wp-content/uploads/pagelines/compiled-css-core-1505847507.css
      What would you suggest in this regard? Would this be resolvable from your end?
      Happy to provide any further details required.
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • 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 
×