• 0

Issue with Less implementation


Question

Posted · Report post

Hi

 

I cannot get Less to work on my Child theme which is a version of Nick's Base theme. When I add the following Less:-

/* Colours */
@Blue: #00A8CA;
@Green: #A8D668;

.launch-col-1 {
	background: @Blue;
}
.launch-col-2 {
	background: @Green;
}

directly to DMS it works OK, but when I add it to the style.less file in the Child theme nothing happens. 

 

I'm new to Less, but appreciate its time saving capabilities and would like to implement ,

 

Your input please.

 

Thanks

Glennyboy

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

Hi Erwan

 

Thanks for the response.

 

I wasn't aware that these were hard-coded variables so taking this on-board I tried 'myBlue', 'myGreen' instead. I wasn't holding out for much as I had previously tried a basic declaration of body {display:none} and nothing happened. Unfortunately for me what the code edit did do is leave me with a blank white screen on the DMS view and no colour change on the front-end.

 

I should note that yes adding the original variables within DMS does override the DMS core values.

 

Thanks

 

Glennyboy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Guys just to add to the above.

 

I've teszted on alternate server and found that it works sporadically (DMS doesn't seem to like cache). The other server is a Wordpress MS (multi site) configuration and I think that is breaking the initiation of less. Can someone please advise how to update the Child theme so that it will work on a MS install. I'm pretty sure its something to do with refs in functions.php:-

function __construct() {

		// Constants
		$this->url = sprintf('%s', PL_CHILD_URL);
		$this->dir = sprintf('/%s', PL_CHILD_DIR);

		// Add a filter so we can build a few custom LESS vars
		add_filter( 'pless_vars', array(&$this,'custom_less_vars'));

		$this->init();
	}

Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi glennyboy,

Both blue & @green are DMS hard-coded variables (in less/colors.less): see DMS Docs / Advanced / LESS "accent colors", resp. 
#049cdb & #46a546.

Hmmm... Did you really manage to override their value in the DMS frontend editor Custom Code \ Custom LESS CSS area... ;)?

If you really wan't to override them, the only way IMHO is to copy the colors.less file in your child theme and change the resp. values for blue & @green.

If you just wan't to have your "own blue", why not create @my-blue? 
Which could be defined:

  • "your way": @my-blue: #00A8CA;
  • or based on the DMS variables using LESS functions & operations (some of them mentioned in the doc above): for instance @my-blue: darken(blue, 8%);

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

They're aren't hardcoded, you can override variables in DMS Toolbar > Custom Code > Custom CSS/LESS. However, if you want to achieve the same thing in a child theme you will need to create a less directory and do that way instead.

 

However, imo it's best to keep the originals as these are Bootstrap ones if my memory serves me correctly, so just create your own like my-blue, bluey, etc..

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi

I'm using Nicks Base theme and that includes a Less directory. My code in style.less now reads:-

// Colours
@myBlue: #00A8CA;
@myGreen: #A8D668;

.launch-col-1 {
	background: @myBlue;
}
.launch-col-2 {
	background: @myGreen;
}

Where so I put it to make Less work and what files do I ned to create / link up to make Less work? Right now I feel I'm missing out on a massive time saver.

 

Thanks

Glennyboy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

That code should work, is it not ?

 

What I was referring to is, using blue @green you can not override them via style.less unless I'm mistaken and instead would have to create a less directory and directly edit the variable values yourself in the correct .less file.

 

However, seeing as you're using myblue mygreen, this isn't needed as they're unique variables.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No as per the original thread above it simply doesn't work. the only way I can get those classes to have the right colours is in the usual method in style.css:-

.launch-col-1 {
	background: #00A8CA;
}
.launch-col-2 {
	background: #A8D668;
}

Its really frustrating and again as per the above could be due to site being on Wordpress MS, but I'm not sure.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

currently this declaration resides in style.less I should note

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi glennyboy,

To put an end to this, hopefully ;)

1. I beg to differ with 
Danny (or I misunderstood him): blue, green, etc. are "hard-coded" variables (default Bootstrap values) and cannot be overriden in the frontend custom code LESS/CSS area. BUT, my answer was wrong on one point: you actually can override them in your child style.less without copying the DMS colors.less in your child theme less folder & editing it: my bad!

 

2. These LESS variables names are case sensitive. Said differently, your Blue is a custom variable like my-blue. This is why your code worked in your frontend custom code area.

3. Your LESS code in child style.less seems OK (overriding core DMS variables or creating custom ones). In order to make it work, you just have to go to DMS ToolBar \ Global Options \ Resets \ Flush Caches button ["Clear all CSS/LESS cached data"], and refresh your browser.

Please let us know if it's clear & OK now for you & has nothing to do with MS  ;)!

Regards.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Erwan

 

Yes as I noted to you yesterday in our PM my issue actually was a Cache issue and that what was happening here is that .less changes were not reflecting as the old .less was stored in the DMS cache. Thus It seemed nothing was happening. As per your point 3 when I cleared the cache the changes came into play.

 

This is a good tip for developers on live servers. You may often need to flush caches to get the correct representation of your changes.

 

Thanks to everyone for looking into this with me.

 

 

Best Regards
 
Glennyboy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Erwan, we most likely have a different interpretation of hard coding, for me something that is hardcoded is included in the source and can not be altered with modifying the code, which in this case you can by the examples above.

Either way, happy to hear you got your question resolved glennyboy

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny

Yes, we have a different interpretation... or not: it depends of the context ;) I just meant here, in the context of this thread, "defined in core DMS files" versus custom code or DMS options defined by the user. Hard-coded doesn't mean for me "can't be altered": we have tons of ways to hook/customize/override properly DMS code, that's the beauty of the product!

Btw, glennyboy"], I forgot to suggest you these two great posts from the DMS/LESS ninja @[member="Clifford P:

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Cheers Danny"] and @[member="Erwan

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hardcoded as far as I am concerned means you have to edit the source directly to change the output, this is not the case for default variables such as blue, you can override them using other means.

Therefore, imo it is not hardcoded.

Something hardcode for me would be a php file having something set in the code inline such as a max-height, which can not be over powered by CSS alone and would have to set the edit the file directly.

Either way, happy your issue has been resolved glennyboy

 

And imo, you shouldn't really want to change the default variables anyway, when you can easily create your own.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Erwan, thanks for mentioning my site. Glad the resources help.

 

glennyboy, this topic was already scheduled to be my next post, but I finished it up today just for you. Check it out if you please: http://www.pagelinestheme.com/dms-custom-less-tips/

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you for the input Cliff 

1 person likes this

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