Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Implementing LESS CSS Rate Topic   - - - - -

 
  • Rachel
  • Member
  • Members
  • Join Date: 07-Aug 13
  • 19 posts

Posted 26 August 2013 - 11:12 AM #1

Hi,

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
/public_html/design/themes/mytheme/css

I then did a quick search for styles.css for a clue and saw
app/functions/fn.common.php

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.
CS-cart V4 multi-vendor

 
  • brandonvd
  • is Super Awesome
  • Members
  • Join Date: 19-Dec 06
  • 2633 posts

Posted 26 August 2013 - 02:37 PM #2

Did you look at http://docs.cs-cart.com/my-changes ?

Thanks,

Brandon

 
  • Rachel
  • Member
  • Members
  • Join Date: 07-Aug 13
  • 19 posts

Posted 26 August 2013 - 06:57 PM #3

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:

  • 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 styles.post.tpl 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?
CS-cart V4 multi-vendor

 
  • tbirnseth
  • CS Cart Expert
  • Authorized Reseller
  • Join Date: 08-Nov 08
  • 11425 posts

Posted 27 August 2013 - 05:05 AM #4

Correct and ensure you have the corresponding less file in the design/themes/<your_theme>/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)

EZ Merchant Solutions: Custom (USA based) B2B Development, Consulting, Development and Special Projects (get a quote here).
Commercial addons, payment methods and modifications to meet your business and operations needs.


 
  • Rachel
  • Member
  • Members
  • Join Date: 07-Aug 13
  • 19 posts

Posted 31 August 2013 - 10:52 AM #5

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.


Posted Image
CS-cart V4 multi-vendor

 
  • Rachel
  • Member
  • Members
  • Join Date: 07-Aug 13
  • 19 posts

Posted 15 September 2013 - 11:53 AM #6

I gave up on this and then discovered how to do it half b accident.

Just add a line to
your-theme / templates / common / styles.tpl

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.
CS-cart V4 multi-vendor

 
  • Magpie Don
  • Senior Member
  • Members
  • Join Date: 01-Apr 09
  • 822 posts

Posted 15 September 2013 - 05:39 PM #7

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 styles.post.tpl file is:
<link href="{$config.skin_path}/addons/my_changes/black_styles.css" rel="stylesheet" type="text/css" />

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

CS-Cart Ultimate ver 4.9.3 SP1


 
  • JDP2012
  • Advanced Member
  • Members
  • Join Date: 19-Jul 12
  • 95 posts

Posted 14 May 2014 - 10:06 PM #8

Hi,

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\css\addons\my_changes\my_styles.less
designs\themes\basic\templates\addons\my_changes\hooks\index\styles.post
styles.post has the following code: {style src="addons/my_changes/my_styles.less"}

Who can help me with this problem.

Attached Thumbnails

  • sjabloon-editor.jpg

Dennis Teppema
Wikoop, www.jd-products.nl
Netherlands