Serious design help needed

Hey guys,

I just do not know where to start. I want to make my own template, something very simple (I love the layout of this demo avactis store: http://demo.avactis.com/1.7.1/flowers/ ). I just want it to be clear, and easy to use and follow.

But I don't know where to start! I downloaded this template from template monster (http://www.templatemonster.com/zen-cart-templates/15120.html) but it's nothing but trouble. It's not clear, and breaks constantly, especially in IE.

I don't know what the stylesheet does, and dont know how I would begin to create something along the line of the avactis template linked to above.

I know HTML and also have Dreamweaver.

Someone please help!

Thanks so much.

The first thing to do is use your Zen Cart admin to set the overall layout - right column disabled, arrange desired sideboxes on the left, etc.
Then you can start setting fonts, colors, etc with your stylesheet. Getting rounded corners like the demo will probably require adding some wrapper divs in template files.

Get started, and then ask for help with specific tasks as necessary.

Oh, and be sure to read the FAQ and other info on creating your own template. Don't just edit the /classic/ files in place; copy anything you need to your own custom template folder and edit there.

Thanks for your help - I realise my question may have been a tad vague!

I'm in the middle now of arranging sideboxes and the general layout of the site.

One of the things that I do not how to do at all on the avactis template, is how to display the shopping cart contents in the way that it does. I have the source code, they have used a table with an image as the backgound, and the shopping cart code inside the table (obviously the code is different for their software however) - how would I make that?

Thanks!

There is a mod in Downloads - Shopping Cart Totals In Header - designed for that purpose. It could be adapted for other locations, like the top of the center column for you.

Wow!

Cool. Can I add currencies to the header in a similar way? And if I wanted them at the top of the centre column, do I control that from the boxes controller or do I have to add some code somewhere?

Thanks so much.

Try looking through the downloads (unfortunately there is not yet a search facility there) just to see what all is available.

Also, search the forum on specific keywords like "currencies header" or the like. People have done this before and posted about it.

To get currencies or shopping cart totals at the top of the center column, you would probably add the code to tpl_main_page.php near the breadcrumbs code.

Thanks so much for your help so far.

I downloaded the shopping cart code and have put it into the tpl main page file. It displays the information, but how would I make the information a link to the cart so that the customer may checkout?

Look at the code for the standard shopping cart sidebox. Its heading is a link to the cart page, and you should be able to use that. You may need to trace from a tpl_ file back to a module file, not sure...

Thanks for your help so far again!

I've been working tirelessly on the layout. The left hand column has a kinda peachy colour background, that runs all the way down the left of the page (and the sideboxes sit on top of this) - I need to change this to white. How can I do this?

Thanks!

the stylesheet.

That's what I was asking.

I know that I would edit it in the style sheet, but I can't find the correct code in the style sheet to edit.

Which part is it?

Right click on your page, choose view source, find the html for the area you want to change, find the ID or class to change in the stylesheet or get the FireFox Developers Tool bar that will show you all the IDs and Classes on a page.

Hi!

A couple of things if anyone can help me.

• I want to edit my 'Search' sidebox so that it doesn't have a header, and doesn't have the link to 'Advanced Search' under the text bar. I also want the text bar to have text written in it as default, but for the text to disappear when a customer clicks on it to enter their search, how can I do this?

• Actualy that's it for now!

Thanks!

In your stylesheet, add:

#searchHeading { display: none;}

In the appropriate language file, edit the definition of HEADER_SEARCH_DEFAULT_TEXT (I think that's the way it is written) - use the Developers Toolkit in admin > Tools to find the location.
For the other bits I can't help you right now.

Thanks for that, it helped great :)

I need to completely remove my Zen Cart and install the latest version, with my new template (the template monster one has broken everything!), but I need to keep my registered customers, products, and order history, can I do this? And how?

Thanks!

The regular ZC upgrade process will do that. You need to back up your database, and you can import that into the new install and select "upgrade database". Plenty of info in FAQ & elsewhere on that.

Thanks again!

I want to add bullet points and larger spaces between the categories listed in the categories sidebox, how can I do that?

Thanks!

You can control every aspect of that display in your stylesheet.
Add

a.category-top {
display: list-item;
}

to get bullets. This will then force an extra space between categories, which will probably not look just right to you. Something like
margin-bottom: -13px;
will close that up as much as you want, but IE doesn't understand that more advanced CSS usage and will cause an annoying intermittent glitch.
The positive solution is to remove the <br /> built into tpl_categories.php to function with the standard inline item output. The Categories Dressing mod handles this and a bunch of related issues.

Thanks! Your help has been so great!

I think I only need one more thing...

I've got the products listed on my homepage in the way of the default template (ie a grid of 9, 3x3) but how do I increase the vertical and horizontal spacing between each product? They're too cramped together. Also, I need to do the same (increase the vertical space between products) on the search results page, how can I do this?

Thanks!