Jump to content

Archived

This topic is now archived and is closed to further replies.

glennyboy

Issue with Less implementation

Recommended Posts

glennyboy    9
glennyboy

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
glennyboy    9
glennyboy

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
Erwan    37
Erwan

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
glennyboy    9
glennyboy

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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
glennyboy    9
glennyboy

currently this declaration resides in style.less I should note

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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.

  • Like 1

Share this post


Link to post
Share on other sites
glennyboy    9
glennyboy

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
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Erwan    37
Erwan

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Thank you for the input Cliff 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • GreyFoxWebDesign
      By GreyFoxWebDesign+
      Hi, could you let me know where the custom less/css is saved to - i.e. how I could access it directly via the server.
      I hid the Admin Bar by mistake and now can't save any changes to the Custom CSS as the Save Button is not available - so I need to find another way to access and edit the custom CSS.
      Thanks in advance
    • Audun MB
      By Audun MB+
      How do I get the LESS in a child theme to compile?
    • dymond
      By dymond+
      I've been trying to upload a video to use as a video background, but the size was 12m, and the alotted max file size is 8m. I downloaded a couple of pugins that increase the size by creating php.ini files and all of that jazz, but to no avail. It would say (Max file size = 250mb) but after I uploaded I would get an "HTTP ERROR",
      Soooo I logged into my cpanel and saw that the php I was using was 4 version out of date. I upgraded my php to PHP 5.6 and now I get
      Fatal error: Out of memory (allocated 39583744) (tried to allocate 15 bytes) in /homepages/39/d200014696/htdocs/dymondentertainment.com/wp-content/themes/dms/dms/includes/less.plugin.php on line 848
      When I activiate another theme that is not pagleines, the site works fine.... but will no longer work with Pagelines DMS Version 2.2
       
      My site has no gone dark. What can I do?
    • station16
      By station16
      I installed DMS for a new site and got an error message on install and when I install any plugin.
      Warning: Invalid argument supplied for foreach() in /nfs/c09/h04/mnt/208781/domains/prevailcoffee.co/html/wp-content/themes/dms/dms/includes/less.legacy.php on line 818
      I installed the latest DMS 2.1.9.6
       
      Please advise. I'm now having issues getting any plugins to work. Not sure what to do next.
      thanks,
      -b
    • mnagillum
      By mnagillum+
      I built a simple site without a child theme, using just the Custom Styling Classes and Inline CSS Styling available in PageLines' various sections. I also added a few lines of CSS in the Jetpack Appearance tool--maybe 10 or 12 lines, nowhere near 1040. I am now getting this message:
       
      /* LESS PARSE ERROR in your Custom CSS: parse error: failed at `` line: 1040 */
      Where can I find the Custom CSS and--more importantly--how can I fix it?
      The site is ndpointstrategies.com.
      Thanks in advance.
×