X-Cart forums

[tnach]

Please note this is my first time working with xcart and any CMS system for that matter but I'm determined to learn it.

I've read several posts on the .tpl files and understand you have to edit the main.css file in the skin1 to style elements etc. And I also understand that to get your own logo in you can just edit the head.tpl file in the customer folder etc..

But my question is where is the HTML file to edit the actual HTML Code. I'd like to get my own customized search bar to search for products in the top right corner of my skin1 (http://jacquelinezinn.com/xcart/) where the Home, Shopping Cart, and Contact Us is. It seems like I could edit the tabs.tpl file but I'm not sure thats right. So I basically need to know how do I start editing this skin?

How did everyone start out? My theory was go through this skin step by step changing bits and pieces of the existing code although I'm not sure thats the best way as some of the items I don't understand. I also don't understand how to edit the HTML in DW etc... I'm using a demo version so I can login to my admin account via the storepanel login but past that I don't use any of the editors Xcart provides.

I've read a couple intro posts on starting out that are stickied but none actually give you a hey this is the first thing I did I started from scratch and made my own template or I modified in existing template the way I'm currently doing it etc.. I have fairly strong knowledge in CSS / XHTML etc.. but everything else is new to me.

Thanks for any help provided hope everyone had a safe and fun Holiday!

[cflsystems]

There are no html files. HTML files are generated on the fly from the template files - they are put together as a final html file by Smarty Engine. You need to edit the templates. And you need to know not only html but smarty as well to be able to do so successfuly. In your version for customer stor side templates look in skin1/customer - most of them are there

[photo]

Although it is for Xcart v4.1.xx you can still clean a lot of useful information from Padraic's thread here

[tnach]

Ok great so I need to understand how Smarty Templates work is there any good resources out there to learn these? Also how did most people start out? Did they first edit an existing skin or just create their own from scratch.

I also noticed a designer also posted they usually down in 750 width but I was looking for some clarification on why 750.

Thanks again for the help everyone wish I could provide some help back but once I learn the system I plan on using my knowledge to help others

[cflsystems]

www.smarty.net

You can edit the existing skin or build your own. You are new to this so editing the existing one will be a lot easier.

For width: if you want fixed width for the site stay on 1000px or less. Fits pretty good even on netbooks without horizontal scollbar

[Shamun]

When I started, I read around a bit and looked at the files.

I believe I'm fairly proficient in skinning, so I'll tell you what I know:

1) The firebug plugin for firefox can be equated to finding out how to travel faster than light. AKA, its epic and you need it.

2) Develop your site using firefox as the primary browser and then once finished go back and check it in other browsers. You can also drop support for IE6 as major sites have as well, so its not a small drop of sites forcing people to upgrade.

3) Keep debugging console active while developing.

4) When you can't figure out which template you're needing to edit, turn on webmaster mode and then highlight the .tpl names in the debug window and then the content inside that template will "pop"

5) If you're not comfortable with starting from a base skin, then you should buy a template from someplace that sort of looks like what you want and then customize from there.

6) Brush up on CSS if you're not fluent in it. For starting out, all you'll need to really know without looking is padding, margin, color, background color/image, positioning.

7) I would suggest using an IDE or text editor (I love notepad++) that will highlight and show HTML easier. This is so you know if you've closed all your tags and such.

When working with smarty it's a good idea to read a crash course on it.http://www.smarty.net/crashcourse.php

The basics are this:
Smarty's delimeters are { and } so any inline javascript should be surronded by {literal}{/literal} tags so smarty doesnt try to parse it.
Variables are called like {$variable}
Arrays are called like {$variable.name2.name3}
Operators are eq,neq,lt,lte,gt,gte or the standard php type of == >= <= etc

9) You will need to clear your xcart cache frequently. www.yoursite.com/cleanup.php

10) If you need help, post on the forums in the right area.

11) Search is a better button to use than the new topic button. Use the search before posting



Right now I'm in the process of updating one of my mods to work with 4.2 and 4.1, but if you need to know a little bit more about smarty {if}{elseif}{else} statements, lemme know and I'll give you a link to an unfinished article I have that relates to X-cart.

[tnach]

"1) The firebug plugin for firefox can be equated to finding out how to travel faster than light. AKA, its epic and you need it."

I'm familiar with firebug but other then mousing over divs to see which each div does and then referring to the templates what can I use firebug for?

" 3) Keep debugging console active while developing."
I've got the debugging console open but I see files like head_admin.tpl instead of just head.tpl4) When you can't figure out which template you're needing to edit, turn on webmaster mode and then highlight the .tpl names in the debug window and then the content inside that template will "pop"

I noticed in webmaster mode you can click on text and replace it with things but you can't actually delete the text but haven't found to much use for it yet.

I've read the smarty crashcourse and most of that makes sense but I'm not 100% how it relates to the .tpl I believe you but I'm having a difficult time relating it to the .tpl files.

I understand these files in the head.tpl

{include file="customer/tabs.tpl"}

{include file="customer/phones.tpl"}

control part of the skin1 where the buttons are in the top right and the phone #'s but I'm having a difficult time understanding how to modify that data or remove it completely obviously I could just remove those lines but I want to make sure I do it properly.


Thanks for any help you've been really helpful in getting me started!!

[SID357]

Originally Posted by tnach

Also how did most people start out?

By pulling their hair out and gnashing their teeth.

Other than what Tal covered, I'd recommend downloading Notepad++ if you don't already have it.
http://sourceforge.net/projects/notepad-plus/

Then back up everything you plan to edit. That way you can go in and change code and see what does what, or doesn't, cause it's overridden by code somewhere else. Then when stuff goes cattywompous, you can just copy the code back and go back to cussing.

Like you, I also have background in HTML and I'm slowly getting CSS, but it's pretty different. I'm currently trying to stretch / scroll my background, which is simple in HTML and next to impossible in CSS.

Might want to prepare for stuff like that.

Good luck man! If I see anything I've already banged my head on, I'll try to help ya out.

[Shamun]

Like you, I also have background in HTML and I'm slowly getting CSS, but it's pretty different. I'm currently trying to stretch / scroll my background, which is simple in HTML and next to impossible in CSS.

background: url("path/to/image.jpg") repeat-x scroll 0 0 transparent

You can use repeat-y as well

[SID357]

Still scrolls from the left, but not the right. Gives me something to play with though. Thanks man

Don't wanna highjack the mans thread.

-sid