With the PageLines Staff’s help, I’ve discovered the order of the CSS and LESS loading, which might help you when developing plugins, sections, and child themes:
- PageLines core LESS files
- Any files that use the pagelines_insert_core_less() function (how plugin and child theme LESS files are loaded)
- All sections
- Dynamic CSS
- User’s custom LESS
- Child theme style.css
I want to highlight a few that may be unintuitive:
- Sections override child theme LESS
- Sections override plugin LESS
- Child theme style.css overrides everything (but it’s a CSS file, not a LESS file)
How you can still use LESS (not CSS) to override a section’s styling
Similar to Nick’s way of overriding core without sending double the code to the browser, you can copy a section’s folder into your child theme’s section folder and activate the child theme section and deactivate the “regular” section (that you installed from the PageLines Store).
Here’s an example walk-through:
- Copy the “contentbox” folder from /wp-content/plugins/pagelines-sections/contentbox
- Paste the “contentbox” folder to /wp-content/themes/name-of-your-pagelines-child-theme-directory/sections/contentbox
- In your wp-admin area, go to PageLines -> Store -> Sections -> Child Theme and you’ll see the copied section
- If not activated, activate it.
- Click the Store -> Sections -> Your Added Sections tab and click to deactivate the copied contentbox section
- Edit your /wp-content/themes/name-of-your-pagelines-child-theme-directory/sections/contentbox/style.less file as desired (or add your own, since this contentbox example doesn’t even have a LESS file in it)
What is LESS?
Are you confused because you’ve never heard of a .less file. In that case, I’ll let Nick Haskins help with that one… http://nichola.us/less/