Serious design help needed

[Nick_Sonick]

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-c...tes/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.

[gjh42]

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.

[Nick_Sonick]

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!

[gjh42]

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.

[Nick_Sonick]

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.

[gjh42]

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.

[Nick_Sonick]

Thanks for all your help guys, I think I'm finally getting there!

One problem I have now though - When a customer adds a product to their shopping cart, the text in the sidebox does not fit, and flows out of the side, is there a way to fix this, or is there a way to simply display the number of products in the cart?

Thank you so much.

[gjh42]

You have two major problems.

The first is that you added your header image map above the headerWrapper, essentially bypassing but not completely eliminating the entire stock header functions. In doing this, you have gotten an extra </div> or two in the code, so that #mainWrapper which is supposed to enclose the entire site is ended at the bottom of the original header, and the whole page content is not contained.

The second problem is that you edited a stylesheet declaration without separating out the item(s) you wanted to control. This made everything in the list 900px wide.

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 0em;
	}

Remove #mainWrapper from the list, as it is styled just above this line and should not be styled twice. If it needs any of these properties, add them to the #mainWrapper {} declaration. The 900px should probably be changed to 100&#37;. Fix the wrapper div problem, and then tackle this one.

[Nick_Sonick]

Thank you again for your help,

I have done what you suggested, but my problem unfortunately remains. I couldn't change the width to 100% because it stretched the whole middle section, so I left it at 900px.

However, the shopping cart sidebox text still spews out of the right hand side, is there anything else I can do?

Thanks again.

[gjh42]

The solution I posted is what is necessary to control that text. You don't need to make #mainWrapper 100&#37; or fluid width, but you do need to separate it from the rest of the list.

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 0em;
	}

Separate into two declarations and style as required:

#mainWrapper {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 0em;
	}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0em;
	}

You also have not completely fixed the #mainWrapper premature closure yet, so this CSS will make the page body expand. Rather than try to hide the symptom by calling it 900px, find and remove the extra </div> tag, probably in tpl_header.php. Until you do that, you are asking for random unexplained problems.