Changing the Design of CS-Cart 2.x

I need some help on how to proceed with changing the design of the template.


  1. Tweaking the design in Template Editor or Design Mode is okay for very minor changes only.


  2. Replacing the images (buttons, etc.) would be a good start to changing the look and feel. Problem is, most of the images are broken up into tiny pieces, I suppose they then expand depending on the width required? Most of the images are just a tiny slice of color; very difficult to tell where they go in the design.


  3. Editing the CS-Cart free template in Dreamweaver is another option. Can this be done? Again, editing in pieces is difficult. Do any of you edit the whole template in DW? Which files are necessary to enable the split Code/Design view in DW so you can see the whole page?


  4. Creating a whole new template in DW. This is the easiest option on the face of it, but I’m worried about not being able to duplicate some of the advanced functionality in the CS-Cart template/CSS structure (Smarty, Ajax, etc.). How easy is it to “drop in” CS-Cart into a new DW template?


  5. The handful of CS-Cart templates available for sale don’t suit our design needs.



    So please, what do you feel is the best approach here?

(bump)



Anybody?



My graphic designer has quit on me. “A few comments in the code would have been nice,” he said.

quote name=‘Healthy Pets’



Anybody?



My graphic designer has quit on me. “A few comments in the code would have been nice,” he said.[/QUOTE]

Yeah, then cs-cart will lose big on custome service.

Has anyone (other than a coder or design professional) successfully changed the design substantially (not just fonts/colors) on a CS-Cart 2.x template? Looking for any clues here…



Love the Admin UI, but if I can’t make the storefront design work for me, a beautiful backend is no good.

Yes it is possible. I’m in the middle of that process right now in fact. I am a student working at an internship/contract spot, so I wouldnt consider myself a proffesional in the matter. I’ve added a completley different menu and nav bar. Also, we’ve changed the header quite a bit. I’ve found using Dreamweaver and Fireworks to actually go pretty well with cs cart. The most powerfull tool you have in changing the look and feel is editing the syles.base.css file.

What you need to do is download xampp. Then find the “skins” folder and drop it into “htdocs” in the xampp folder. Then point dreamweaver to the htdocs folder as a site and there you go. Let me know if that helps.

Download the free tpl extension to Dreamweaver from Adobe. This allows you to easily edit the template files (.tpl) in Dreamweaver.



Then turn on Customization Mode under the Design Tab in the Cs-Cart Admin Tool. Log in as Admin in your store and Cs-Cart will then show you what template file is controlling what part of the store layout.



Simply open that template file in Dreamweaver and edit away. It is a little bit of trial and error. But once you get the hang of it it is quite easy to modify the layout or functionality.

Most of my designs are based off the cscart basic template. Its just a matter of diving in and making enough changes to make it look different.



The customization mode helps out quit a bit with finding out where things are.

Step-by-step, how can I actually VIEW the store in Dreamweaver? I’m all right editing various tpl files but frankly speaking I’m fed up with this trial and error approach. I need to me able to open the site in Dreamweaver and just go ahead and change various parts, and preview them.

  1. open dreamweaver
  2. edit site folder inside dreamweaver (tools / edit / site)
  3. Select the folder where your cs cart files are
  4. wait until it opens and selects the whole folder
  5. you can go and make a coffee while its configuring
  6. it will say finished
  7. dont know what else…



    mmm… step by step??? i can write a book for you if you want.

[quote name=‘silverbestbuy’]1) open dreamweaver

2) edit site folder inside dreamweaver (tools / edit / site)

3) Select the folder where your cs cart files are

4) wait until it opens and selects the whole folder

5) you can go and make a coffee while its configuring

6) it will say finished

7) dont know what else…



mmm… step by step??? i can write a book for you if you want.[/QUOTE]



I’ve got CS4, just installed the Drupal / Smarty extensions.

I can view plain html files in live view, no problem. I need to see the TPL files clearly.

[quote name=‘FiligreeStreet’]I’ve got CS4, just installed the Drupal / Smarty extensions.

I can view plain html files in live view, no problem. I need to see the TPL files clearly.[/QUOTE]



How much is CS4 ?

[quote name=‘lawnmowertech’]How much is CS4 ?[/QUOTE]



Way too much ($699.00) unless your day job is “Graphic Designer” :wink:



The Photoshop Elements version is the best deal on the planet and does most of what anyone other than a professional graphics designer could ever need to do for $80.00, you can check it out here:

[url]http://www.adobe.com/products/photoshopelwin/[/url]