0

I have a webpage that I am converting into a Joomla template. I am using a LESS file and allowing it to just interpret at runtime rather than compiling it. I see that Joomla has LESS capabilities and even has all the libraries to run LESS. The problem is that no matter where I point the less.js in the it will not work. I even uploaded less.js into the template folder and the default joomla folders and pointed to each location and it still will not work. I do not feel like using a compiler, at least not at this point since I am still messing with the layout and colors and such and that would be an extra few steps that I do not want to deal with right now.

Is it possible to run LESS interpretively on Joomla or is it only allowed through a compiler?

BillyNair
  • 277
  • 4
  • 20

2 Answers2

2

There is a system plugin which automatically compiles the LESS files on the server if something changed and generates the CSS from it. You then just include the compiled CSS in your template. The plugin is on the JED: http://extensions.joomla.org/extensions/miscellaneous/development/22424

This may fit your needs as well and may be easier in the end.

Bakual
  • 2,731
  • 1
  • 13
  • 16
  • Will this take a LESS that I edited and FTP through Notepad++ to my site and compile it? I am trying to avoid anything more than {CTRL+S, ALT+TAB, F5} and above all, editing txt through Joomla! – BillyNair Mar 26 '13 at 03:25
  • 1
    As far as I understand it, yes. It should work. By default it will look for the file less/template.less and compile a file css/template.css in your template directory. However the files are configurable. – Bakual Mar 26 '13 at 07:45
  • PERFECT!! Almost TOO easy to set up though. I couldn't figure out where to put the files, (thinking is the path in the app relative to the template, the plugin, the site?) I put it in the template folder and added a link, and it just worked! stoked! – BillyNair Mar 26 '13 at 12:59
  • For anyone following in the future: make sure to link to the css file in your index.php head for your template – BillyNair Mar 26 '13 at 13:12
  • Paths are always relative to the template directory. So if your LESS file is within `/templates/yourtemplate/less/template.less` the path to enter is `less/template.less`. – Bakual Mar 26 '13 at 13:12
1

There are a few possibilities here.

  1. If your less.js is not working change the path to absolute path src="http://www.yourdomain.com/js/less.js" instead of "../../js/less.js"

  2. also check the order when loading the scripts you need to load less.js first and then your less file.

Important Note: using less.js or any live interpreter will reduce performance and if user disabled JavaScript your website will have no layout at all.

In case if you changed your mind about compiler there are nice compilers both for windows and mac that automatically updates your css files as soon as you save the less file.

AK4668
  • 1,844
  • 4
  • 16
  • 18
  • Right now I am doing a whole bunch of quick minor tweaks, so I will change one color form #fc2 to #fc3, then go into robot mode and hit CTRL+S, ALT+TAB, F5. In a matter of seconds with 3 combination strokes my files save and upload to my server and then my browser refreshes and I loot to see if I like the new color better. Mr AK4668, is there a compiler that can sense the save, compile the LESS and FTP it to my server? If so, I might like to try it! (I am using 3 CSS files and a LESS) – BillyNair Mar 26 '13 at 03:21
  • I use this http://incident57.com/less/ on Mac, winless.org for windows. both compile automatically once your less file is saved it will automatically compile. after this point you FTP software will see the changes and upload them. – AK4668 Mar 27 '13 at 06:17