Customizing the Cart/checkout pages...

OK, I have my site up. I've created my own pages and forced Zen Cart to work with them :-) I have my own template, and I have a ton of files in the html_includes/my_template directory such as define_contactus.php, define_Ladies_order.php etc. to get everything to match the look & feel of the cart.

This was easy enough (well, not really) because I was creating new pages.

NOW, however, the cart page (when you are looking at my custom catalog page and click on add to cart), the checkout pages, etc. are all awful.

They have a white background, the font size is too big, etc. Additionally there are Firefox/IE issues. For example, in IE when entering in your account information, everything is left-justified as it should be. In Firefox, the first item is left justified, the last item is right-justified, and all fields in between are spread out between the two. If I stretch out my Firefox window, the text entry fields (such as address, city, state, zip, etc.) dynamically move across the page. I want everything left justified.

So how do I control the look of these pages?

I see that the cart page is shopping_cart, or shopping_cart.php

So I search the drive and look at the shopping_cart pages found.

/includes/classes/shopping_cart.php - this is all of the php code for interacting with the database, and doesn't seem to have anything to do with the page layout/look&feel itself.

/includes/languages/english/shopping_cart.php - this basically defines some of the text on the page (Nav header, page header, etc.) and also doesn't have anything to do with the actual layout of the page, and item placement on the page.

/includes/modules/pages/shopping_cart/ has 2 files - a header file & a jscript file. Does not govern form field layout on the page

/includes/modules/sideboxes/shopping_cart.php - for the side boxes, which I am not using

/includes/languages/english/my_template/shopping_cart.php - my edited version of the 2nd one listed above.

So, I can't seem to find anything that controls the form fields layout on the pages. I view the source of the page and see things like (this is actually on the checkout page, but the concept is the same):

<fieldset> <legend>Address Details</legend> <input type="radio" name="gender" value="m" id="gender-male" /><label class="radioButtonLabel" for="gender-male">Mr.</label><input type="radio" name="gender" value="f" id="gender-female" />

Yet I can't find in any of the PHP files where this stuff is created.

Say I wanted to change the above to:

<fieldset> <legend>Address Details</legend> <DIV id="MyOwnCustomDiv">

<input type="radio" name="gender" value="m" id="gender-male" /><label class="radioButtonLabel" for="gender-male">Mr.</label><input type="radio" name="gender" value="f" id="gender-female" />

I don't see anyway to enter in that code. Lets say I decide that next to the <legend>Address Details</legend> I want to add an image so it looks like

<legend>Address Details</legend><img src="images/mailbox.jpg"><br />

or something like that. Where can I do this? What files can I edit?

I need to do this for the following pages:

shopping_cart
login
checkout
shipping
etc

THANKS!!!!

Brain21

I believe you need to look in the "templates" area ... ie: /includes/templates/your_custom_template_name/templates

This is where almost all page-layout content is rendered.

Template System Defined

OK, none of the files that control this are in my directory, so I looked in the template_default dir.

So now I am looking at what seems to control, for example, the address entry form, which is the file

tpl_modules_checkout_new_address.php

I see the line
<label class="inputLabel" for="firstname">

and I look for inputLabel in the css file. It's a float, whcih I think explains the layout problems as far as the placing of the fields.

Cool! This is easy enough to fix. The CSS stuff is no problem...

If I want to add in say an icon, I guess I can just add an <img tag into the code for that page.

For example:

<label class="inputLabel" for="firstname"><?php echo ENTRY_FIRST_NAME; ?></label>

<?php echo zen_draw_input_field('firstname', PHP Code cut out for simplicities sake /> <img src="images/image.gif"> <label class="inputLabel" for="lastname"><?php echo ENTRY_LAST_NAME; ?></label> <?php echo zen_draw_input_field('lastname', PHP Code cut out for simplicities sake /> Is that correct? Or would I have to stick it in the actual PHP code (that I snipped out just for this post) Now, where would I control the actual body background, etc.? Looks like the contents of that php file go WITHIN the <body></body> tags. I can remove headers & footers by creating the appropriate tpl_main_page.php and placing it in /my_template/checkout_shipping_address/ file if I needed to, but I still can't figure out how to change the actual body tag of the page. Say I wanted <body bgcolor="#aabbcc"> rather than just <body>. Clues? Thanks for your help, Brain21