• 0
Sign in to follow this  
Followers 0

How to add custom LESS to a child theme in 2.2.

Question

Posted · Report post

I am wondering if/how custom LESS can be added to a child theme? In the 2.2 video that was released, PageLines 2.2 - Bootstrap, LESS, shortcodes, and more..., it is demonstrated that custom LESS can be added to the theme through the "Custom Code" box under the site options. Above that box though, it says:

Note: The professional way to customize your site is using a child theme, or customization plugin.
So my questions are: 1. Does the pagelines customize plugin process the style.css file inside as LESS? 2. Can LESS be added to a child theme through external/linked files the same way that sections do? I have scoured through the online docs and there doesn't seem to be anything new on this in the LESS API or How to Use the Base Theme. Thanks!

Share this post


Link to post
Share on other sites

8 answers to this question

  • 0

Posted · Report post

Hello, First of all we apologise for the lack of documentation. Basically inorder to LESS CSS, you can either do: 1. Add your LESS CSS to Custom Code > CSS Rules. 2. Create a style.less file (nothing needs to be added) and then upload this to either your child theme directory, so it's in the same location as style.css 3. Create a style.less file (nothing needs to be added) and then upload it to the PageLines Customisation folder, in the same location as style.css Once you have done one of the above, you can start to be amazed by LESS CSS. **A useful tip, if you plan on using LESS via either child theme or PageLines Customisation plug-in, you can then add all your custom CSS to the style.less file. The style.css file will only read normal CSS, however the style.less file will both LESS CSS & CSS.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hey There, We have some useful information on the actual demo itself at http://demo.pagelines.com/framework/tools. Click on the LESS link. There it talks about style.less files loading automatically within child themes, and also gives all the variables that we currently use. In the coming weeks we'll be making theming with PageLines as easy as eating cake (cake not included). Nick

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks a lot for both comments. I'm really excited to be using LESS from now on and what's in store for the future! The framework tools link is great, lots of good information there. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

When I make changes to the .less file in my child theme, those changes frequently don't show up for a while. I assume something needs to trigger the re-compilation of the css file from the less file; can you suggest a good way to accomplish this reliably?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You have to click SAVE in the pagelines options to recompile all the LESS files.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks - I've been trying that, but it doesn't seem to work reliably - or else something else is going on. It's a little hard to figure out what's going on, to be honest -- when I add straight CSS to my LESS file, it gets ignored; if I copy and paste the exact same CSS into the CSS file, it gets applied. I want, of course, to have just one stylesheet - the LESS sheet. Driving me nuts. Is there something I'm missing about how the CSS and LESS files interact?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No, the style.less file gets included with all the other LESS files when you click save, then gets compiled into CSS, as long as the LESS code is valid of course. A simple style.css file gets added as a link to the HEAD of the doc anyway so your browser will always see it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You say "with all the other LESS files" -- so is there a difference in the order in which styles get applied depending on whether they're in a LESS or a CSS file in a child theme? I can see a /pagelines/pagelines-compiled-css file gets loaded, and then the child theme css file: I presume that means the child LESS styles are getting loaded before the child CSS styles? Here are some specifics: I'm trying to overwrite some basic layout styles from the parent pagelines styles; it works when those are in a CSS file but not in a LESS. Styles that are *new* -- that don't appear in the parent theme's styles seem -- to get applied, but things that overwrite parent styles get ignored or otherwise don't work. Thoughts?

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
Sign in to follow this  
Followers 0