Editing your templates the EASY way!

Xtreme · #1 04-20-2003, 12:49 AM

Most ppl get extremely confused when editing Smarty Templates. The thing is, they are not set in stone - they are in fact templates! A guide, a jumping off point. Remedial knoledge of HTML can make all the diffrence when editing your templates. Here is how I make it happen.

First, if you dont have Dreamweaver - GET IT! Save yourself time, money and your hair and just buy the darn thing. Trust me, you'll be glad you did. I'll prolly get flamed from the FrontPage guys, so go ahead. Gimme your worst! Fact is, Dreamweaver is probably the most powerful and intuitive HTML editor in human history - (shameless plug for my editor now complete

)

Now, go find the template you want to edit in the admin section of X-Cart. Next, highlight everything in that box and copy the code except the top line which will look something like this ie. {* $Id: head.tpl,v 1.22.2.1 2003/02/19 13:23:08 svowl Exp $ *}. Next, open DREAMWEAVER and create a new page. Just create a regular HTML page because if you create a PHP page, you are stuck with just the code again and wont be able to utilize the WYSIWYG part. Now, paste the code copied from X-Cart between the <BODY> tages in the newly created HTML page. Then, simply edit the layout of template until you like what you see.

NOTE: Be careful not to damage the PHP includes and such. Just edit the layout only. Heck, if wanna go a little crazy, its 100% possible to actually create you're entire site first (in Fireworks or Photoshop) and simply take the PHP code and insert them where you want them to appear.

Also, when you are editing a template, use a little common sense when editing the code, some templates have ABSOLUTELY NO HTML CODE! If this is the case, then it is safe to assume that you cant edit it. When searching for templates to edit, please first look for tell tell signs of HTML. Namely the <HTML> tags. But other tags can be seen pretty easy as well.

Finally, after you are done with your customizations, copy everything between the <BODY> tags and repaste them into the template box in the admin panel of X-Cart. If you do decide to use a completely customized website for your store, dont forget to place the new images in the images folder in the skin1 dir.

Oh yea, anyone still confused about how to edit the default text of your store. Check out the "Languages" link in the admin section. It can be a drag sometimes cause you have no clue what the assigned label is, but you can use the search function which can provide some fruitful results from time to time.

Hope this helps!

shan · #2 04-21-2003, 03:03 AM

or .....

http://forum.x-cart.com/viewtopic.php?t=74&postdays=0&postorder=asc&start= 0

fearthespear · #3 04-21-2003, 02:24 PM

XTreme, you rock dude!

I'm gonna giv eyour advice a shot!

fearthespear · #4 04-21-2003, 02:27 PM

Shan thanks for that link too, you rock 2!

Ima gonan give both of your posts a shot, this is exactly what I needed!

sroode · #5 08-23-2006, 02:39 PM

Hi Xtreme
I tried your method but only get "File Error!" and a bunch of code in design view. I am using dreamweaver mx and have installed Smarty etc. Please help! Did everything "shan" suggested. I'm lost, been tinkering with this for hours. Any advise will be appreciated.

wjbrewer · #6 08-24-2006, 10:23 PM

Just a FYI. If you create a new HTML page in Dreamweaver, you can just delete everything that is in there by default (<html><body>...etc.), copy the entire template file, and edit it.

Another method, which I like, is to just copy the template file to your computer through FTP, then drag and drop it into Dreamweaver...done. This is especially helpful because you can make changes to the file, save it and upload it, and if you don't like the results you can use the undo function and save it and upload it again. You don't have to copy and paste anything.

wjbrewer · #7 08-24-2006, 10:25 PM

Quote:

Originally Posted by sroode

Hi Xtreme
I tried your method but only get "File Error!" and a bunch of code in design view. I am using dreamweaver mx and have installed Smarty etc. Please help! Did everything "shan" suggested. I'm lost, been tinkering with this for hours. Any advise will be appreciated.

Make sure you copy the contents into the code view. Also, until you install the Smarty plugin you will still get a lot of smarty code showing. After you have the plugin installed you will only see a small icon where the smarty code is.

sroode · #8 08-25-2006, 08:42 AM

Thanks Bill I appreciate your reply.

I did what you suggested. I took the code from the template file, created a new html file in dreamweaver (deleted all the standard code (<html><body>...etc.), and pasted the code from the .tpl file. If i go to design view this is what I get. http://nativesoul.org/images/screenshot.jpg

Is this how it is suppose to look. What am I missing. You can see that I have the Smarty plugin installed.

Thanks for your help.
Stephan

wjbrewer · #9 08-25-2006, 09:26 AM

Yes that is how it is supposed to look. One of the problems with editing smarty templates with a WYSIWYG editor is that there is a lot of HTML code that may or not be displayed based on the {if} {else} statements, Dreamweaver displays everything. This is where you will have to learn the basics of smarty and HTML so that you know which parts to edit.

As far as the File error part, I'm not really sure. I have never had that problem. From the picture it looks like it is text in the template file. It may be something to do with LiteCommerce, but I don't use it so I am not sure.

sroode · #10 08-25-2006, 09:38 AM

wow, thanks for taking the time. looks like I have a little bit of a learning curve ahead of me.

appreciated
stephan