Implementing LESS CSS


I am a seasoned LESS developer but new to CS-Cart and theme development.

I noticed that the template editor uses LESS to apply changes to sites and so was wondering if it is possible to use LESS for general theme styles.

So far I created a styles.less file and added it to the same folder as styles.css


I then did a quick search for styles.css for a clue and saw


5299 $theme_path . 'styles.css',

and dded

5300 $theme_path . 'styles.less'

None of my styles in styles.less are being compiled into the stylesheet though.

Does anyone know if there are any instructions on how to do this anywhere or know what other steps I need to do? I am only interested in the customer facing part of the site for now.

Did you look at ?



Thanks for thelink brandonvd, unfortunately I can't get it working.

I followed the steps chaging basic for my theme folder starting from the heading about overriding.


In order to override the default CSS styles you should:[list=1]

[]Make sure the My Changes add-on is installed

]Create the directory (if it does not exist) design/themes/basic/templates/addons/my_changes/hooks/index

[]Create the file in design/themes/basic/templates/addons/my_changes/hooks/index/ with the following content:

{style src=“addons/my_changes/styles.less”}

]Create the file styles.less with the custom style definitions in design/themes/basic/css/addons/my_changes/



So the only line in my new tpl file is


{style src=“addons/my_changes/styles.less”}


Is that right? I don't need the first part?

Correct and ensure you have the corresponding less file in the design/themes//css/addons/my_changes/styles.less

(though I think it's good practice to not use styles.less but rather something more akin to my_styles.less)

Hi thanks for your responses. I have been busy with my day job so wanted to wait until I had a fresh saturday morning brain so I could check all the details of what I did without getting frustrated.

I have posted 2 screenshots below, still no luck.

[size=4][font=arial,helvetica,sans-serif]I gave up on this and then discovered how to do it half b accident.[/font][/size]

[size=4][font=arial,helvetica,sans-serif]Just add a line to [/font][/size]

[size=4][font=arial,helvetica,sans-serif]your[/font][/size][size=4][font=arial,helvetica,sans-serif]-theme / templates / common / styles.tpl[/font][/size]

I added it after the line for retina.less and then I created the file in my theme's CSS folder. I have no idea now why the My Changes Add oN is need, this was so simple to do.

I am definitely getting better at hacking my way through CS-Cart.

The reason you don't want to edit the files in the common directory is so that your changes are not all lost when CS-Cart overwrites these templates during and update.

It may be as simple as the path to your .less file is incorrect. I think the path you have defined is looking for the .less file in sub-directories of the my_changes/hooks/index folder.

You must be using V4 to use .less files (I think, I'm not running V4 yet), but perhaps this will help:

In V3, I have my custom .css file named black_styles.css and it is in the same location you use (root of my_changes folder) and the path I use to them in the file is:

Shouldn't you be using a path something like this:
{style src="../../../addons/my_changes/styles.less"}
{style src="{$config.skin_path}/addons/my_changes/styles.less"}


I just installed version 4.0.

Now I can't get to the files through sjabloon editor.

Is there another way to edit the CSS files in CS Cart 4.0?

I'm used to work with C 3.06. But now this is changed.

I've attached an picture what I'm getting.

My files are located at:


designs\themes\basic\templates\addons\my_changes\hooks\index[b][/b] has the following code: {style src=“addons/my_changes/my_styles.less”}

Who can help me with this problem.