Jump to content


Photo
- - - - -

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


  • Please log in to reply
8 replies to this topic

#1 bxbmedia

bxbmedia

    Advanced Member

  • Members

  • 79 posts
  • LocationAnn Arbor, MI

Posted 01 July 2012 - 02:56 PM

I am wondering if/how custom LESS can be added to a child theme?

In the 2.2 video that was released,

Please Login or Register to see this Hidden Content

, 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

Please Login or Register to see this Hidden Content

or

Please Login or Register to see this Hidden Content

.

Thanks!

#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17556 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 01 July 2012 - 06:47 PM

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.

#3 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 01 July 2012 - 10:02 PM

Hey There, We have some useful information on the actual demo itself at

Please Login or Register to see this Hidden Content

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

#4 bxbmedia

bxbmedia

    Advanced Member

  • Members

  • 79 posts
  • LocationAnn Arbor, MI

Posted 02 July 2012 - 03:41 AM

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. :)

#5 lmirabile

lmirabile

    Newbie

  • Members
  • 3 posts

Posted 16 July 2012 - 08:24 PM

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?

#6 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 16 July 2012 - 08:35 PM

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

#7 lmirabile

lmirabile

    Newbie

  • Members
  • 3 posts

Posted 16 July 2012 - 09:19 PM

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?

#8 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 16 July 2012 - 09:22 PM

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.

#9 lmirabile

lmirabile

    Newbie

  • Members
  • 3 posts

Posted 16 July 2012 - 09:39 PM

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?