Tips for Adding Custom LESS/CSS Code

Posted · Add Comment

This post is about custom CSS and/or LESS code in DMS, but my v2/Framework post about the order of LESS loading may also be a helpful reference going forward.

Now, let’s get our hands a little LESS dirty…

DMS Editor – Custom LESS/CSS

The first place you should think to add some custom CSS/LESS code (from now on just referred to as “LESS”) is the DMS Editor’s Custom Code area, shown below.

PageLines DMS Editor - Custom LESS-CSS

The main benefit of using the DMS editor for LESS is the instant preview.

For example, add something like h1 { font-size: 100px; } and then hit CMD+Enter (Mac) or CTRL+Enter (Windows) and you’ll see your h1 text blow up right before your eyes. If you don’t like it, CMD+Z or CTRL+Z to undo it then CMD+Enter again and it’ll be back to the way it was.

The DMS Custom Code area is perfect for small tweaks.

Child Theme style.less

I recommend using a child theme (or the PageLines Customize Plugin)  for every single PageLines DMS installation so I’ll assume you already have it installed and activated.

I recommend using your child theme style.less for a couple situations…

Anything with Single or Double Quotes (e.g. font-family)

Whenever you have single or double quotes (e.g. in the case of a font-family declaration), you should NOT put that in the DMS Custom Code area because, if you use the wp-admin -> PageLines Tools -> LESS/CSS Fallback, then forward slashes will appear before each quote and cause a LESS Compile Error, oh my!

Example: h1 { font-family: ‘Gill Sans MT’, sans-serif; } would turn into h1 { font-family: \\\\\\’Gill Sans MT\\\\\\’, sans-serif; } after 6 saves — one forward slash per save in wp-admin area. The same is true for double-quotes.

You don’t normally use the wp-admin area for custom LESS (and it doesn’t have that nice instant preview feature), but it’s there in case of emergency. I recommend never putting anything with quotes in DMS Custom Code area, just in case you use the wp-admin Custom Code area.

Overriding PageLines LESS Variables

The PageLines core theme variables (like @gridRowSpace or @green) cannot be overridden via DMS Custom Code, but you can override them via child theme style.less.

You can define and use new ones in the Custom Code box, but because the Custom Code box is compiled separately from everything else, the variables defined there cannot be used elsewhere (e.g. in child theme style.less).

The Custom Code area doesn’t allow you to use custom LESS variables defined in your child theme style.less (and vice-versa). For example, if you have @mycolor: #7a43b6; in style.less and put h1 { color: @mycolor; } in the Custom Code area, it won’t work.

Dealer’s Choice

Some may prefer to use style.less or Custom Code just because. For example, if you’ve got a lot of customizations, you might prefer having style.less in your text editor to utilize features like code folding, undo past the last save point, code snippets, code autocomplete, versioning, etc.

The DMS Custom Code editor can sometimes be annoying to scroll, copy and paste, and navigate. It’s not designed to replace a dedicated text/code editor. It’s available and has some benefits, but it’s not mandatory.

PageLines LESS Caching Tips

Having trouble getting your edits to show up? Here are some tips:

LESS is re-compiled (i.e. the auto-generated CSS file is re-created) whenever you make a change in the Custom Code area and publish the changes. As a fallback, the Custom Code area is available via wp-admin (as mentioned above) in case the DMS Editor isn’t appearing, for example. Clicking the wp-admin Save LESS button also re-build’s the CSS file. A third — and the best — way to flush (i.e. re-compile) is in the DMS Editor Global Options -> Resets -> Flush Caches.

DMS Editor Global Options - Resets - Flush Caches

If flushing LESS still isn’t getting your changes to show, make sure your rules are specific enough. Try adding #site or #page to the beginning of your rule for additional CSS specificity.

Still not taking effect? The problem might be your browser. Clear your browser’s cache and refresh the page.

If you’re pretty sure it’s a flushing issue — that PageLines isn’t re-compiling the LESS and re-creating the CSS file — and not a caching issue, you’ve got a hidden trick up your sleeve to temporarily add to wp-config.phpdefine(‘PL_LESS_DEV’,true); (as described here).

It’ll force the CSS file to be re-compiled on every single page load. You can turn it on for a production site for about 5 seconds — just long enough to give yourself one page reload. Then immediately turn it back off so your visitors don’t have it active when they arrive at your site.

Is nothing working? Have another tip to add? Please share your thoughts below.

Comments are closed.