Design Own Template from Scratch
 

Hi everyone ive been searching the fourms for a guide on how to use your own template design instead of xcarts.

I would be designing the template in fireworks and exporting it to html.. would it be as simple as adding in the correct tpl file links to include in the html page?

Thanks!

There is not really a how to guide.

It's going to be more difficult than just adding a few .tpl file links. You can pretty much customize x-cart to look any way you like. But you will have to have a decent understanding of how html and smarty works. If you already know html, you will catch on to to smarty pretty quickly. Just take a look at the quick start guide on the smarty website.

Bill is right - there is no guide, just a massive learning curve! Using webmaster mode though is your best "guide" to what templates to change.

It can certainly be done and you should definately be saying how can I make x-cart fit my template, rather than trying to get a template to fit x-cart. That way you are going to get something a bit more cutting edge.

From a business advice point of view, you may be better off getting the design done and getting a developer to integrate it. Would be much quicker, allowing you to start trading sooner and start getting a return on your investment.

Also, never use Fireworks or Photoshop to design a web site. They create image slices, which are not readable by the Search Engines. Dreamweaver is your best bet for a WYSIWYG html editor, it even has a Smarty plug-in so that you can edit X-Cart templates.

True photoshop and fireworks create "image slices" but its the content thats spiderable not the images.. When exported to HTML and opened up in dreamweaver you have full control over alt tags of the slices if you needed to do so..

Back on topic i guess ill read up on dreamweaver and smarty plug-in.

Yes, but what i mean is if you design text into the images the search engines can't read that. It needs to be physical text, not an alt tag. Not to mention the fact that Fireworks and Photoshop create awful nested table code.

Fancy fonts are great, but not at the cost of Search Engine Optimization :)

So far I have installed 2 different smarty add-ons for Dreamweaver. They may as well not even be in there as Dreamweaver shows all the smarty tags as text in design view.

One add-on was one that you copy into the Dreamweaver directories, the other was a Macromedia extension that I installed.

I got both from links I found in here.

Is there one that will show the page as x-cart shows it?

I realize that the first information I will receive will probably be as above, buy a template and have someone install it. I have looked at all the templates that came up in many web searches and none of them are even close to what I need. Not to mention with the cash outlay for X-Cart and all the mods I purchased, I can't really afford anything else.

Even though 7dana has many attractive templates that are affordable, I would still have to have them customized. Just about all the templates I have found are really just the basic stock layout made pretty and a bit more fancy. Needless to say if I can't really afford a template, I definitely cannot afford customization.

I need to totally change the main page except the left column which can stay as it is but needs rounded borders (yes found the tutorial). I need to split the second column and add boxes with round corners with items such as best sellers and specials.

I know about webmaster mode however I really prefer not to directly edit the "real" pages, plus I tried it and found it to be a poor editor set-up that is barely able to be called a wysiwyg editor.

I miss being able to use Homesite and the ability to write everything manually.

I'm sorry I digressed, just a mini rant to vent some frustration with myself.

So anyway my questions is are there any dreamweaver smarty template add-ons that will allow you to see the site as it appears oon the customer side in X-cart?

Thank you for your patience with my mini-rant and questions,

Alex

Hi. If you can see the smarty tags in the Dreamweaver design view the smarty plugin was not installed. The plugin basically takes everything that is in {} and turns it into a small server markup icon in Dreamweaver. This way you can edit tables, and line breaks without the Smarty code in the way.

If you don't want to edit the real pages I would use ftp and download the template to your local hard drive, then open them in Dreamweaver make your edits and then re-upload the file. This is also helpful if you keep the file open in Dreamweaver after you upload it, you can use the Dreamweaver undo and redo for trial and error. (Make and edit, upload the templateБ─╕if you donБ─≥t like it undo and upload the original.)

If you used Homesite and know HTML you should have no problems making the modifications that you need. Webmaster mode will be your friend, I would give it another shot, it is not intended to be a WYSIWYG editor, but it will let you know which files to open in Dreamweaver

Thank you for the information Bill.

I am currently editing by making changes locally and uploading them. I've saved every file by renaming it that I've added mods to or changed myself.

I have no clue what's wrong with my dreamweaver add-ons as the macromedia extension one I installed myself so I know it's there somewhere.

I guess I need to do a web search this time to see if I can find one that Dreamweaver acknowledges.

I thought I had been getting the hang of it as I made several mods already on the main page, however they look awful in Firefox when I checked it earlier today. Instead of the store being aligned in the middle, Firefox wants to put everything far left.

Why can't these browsers just all get along ;)

Thank You again!

Alex

I agree, Fireworks and Photoshop/Imageready are old ways to create sites. I still use Photoshop on occasion to mock up a site but instead of cutting up graphics to tables and such using automation I just export a few individual graphics and use CSS. It's whole lot cleaner, streamlined, and less graphics heavy.