HTML-designed site and Zen cart?

Hello:

I designed a relatively simple website designed in Dreamweaver with CSS which uses a lot of image files. Is there a way to integrate the look achieved in HTML with Zen cart pages? I worked with HTML, but I'm new to PHP.

I understand that it may be fairly complex, so I'd appreciate any help pointing me in the direction of the appropriate resources.

Many thanks in advance!

The "look" is achieved with CSS, not PHP.

OK; can I copy and paste HTML code in, let's say, define_main_page.php? (And use the css stylesheet, of course.) Can I set up separate pages this way?

(Thanks for your help; I'm pretty good with Dreamweaver, but getting into coding is throwing me off! :smile: )

Well what you will need to do depends on the layout you are trying to achieve.....
Somethings will need to be adjusted in the admin, some in the stylesheet, and moving of code blocks around in the template files.....A page in ZC is cobbled together from many different files, so its not as straight forward as a static html page. A screen shot of what you want to do might help in lending assistance.

and...
You'll want to drop Dreamweaver for something that doesn't leave "strays" behind. It's not as bad as Word, FrontPage, etc. but, can add spaces that will cause you to tear your hair out looking for them.

Get yourself a copy of firefox with the firebug add-on. Learn to use them to change the look of templates. They allow you to do it "on the fly" without creating unrecoverable havoc.

hey there,

Well I am a bit good myself with Dreamweaver and what i was able to do, while editing the tpl_main_page is on my link below.

i inserted my own image for the header in the tpl_header and tpl_footer as well as tpl_main_page. I then removed the logo tags from the file so it wouldnt call the one already in zc. I then edited the CSS and uploaded my own images into the images folder.

mycellmonsters.com

Now, the site is still under maintenance and truly, im only testing the layout before i actually move my Real-live site to ZC. what i wanted to do was to duplicate the look i already had online to ZC so my customers do not even realize the change on the front end as i look into moving the store to another server.

I currently use, photoshop, fireworks and dreamweaver.

Let me know what you guys think. looks pretty identical to cellmonsters.com huh?

Hi everyone:

barco57, I suspected as much--that in ZC layout stuff needs to be adjusted in several places. I'm attaching two screenshots of my website done in Dreamweaver (sorry they're small). I've seen other people's sites with adjustments to ZC layout, so I know it can be done, but where do I start?

dbltoe, thanks for your suggestions as well. I have Firefox so I'll get Firebug for cleaning up HTML code.

cellmonsters, thanks for the hint where to start :-)

That seems a very straightforward design to implement in Zen Cart. (No doubt you'll hit a few gotchas, but persevere!)

Start by finding a template in the downloads area that gets you moving in the right direction. Then have a close look at it using Firebug and other tools to analyze its layout. Generally you'll be looking for a 2- or 3-column layout with a top logo area that either spans the whole width or is only over the center main column -- your choice.

Then chop up your graphics so the top logo area can be put into the logo area of the template, and any other key graphics are cut to size for their locations. Assume any text -- other than a major title or sub-title -- will be rendered by the browser and is largely out of your control. (What I mean is that you can't assume your web site visitor will have the font Uber-delicate sans MS on their machine, so it may get replaced by, heaven help us, Helvetica! But that's no excuse to try to use pictures of text instead.)

In the admin area of ZC turn off the right column (most templates have it on by default.) Input your text. (That short sentence can cover days of work setting up categories and products and descriptions. :lamo: )

Don't forget the settings in the language files so that standard site text comes out right. Upload your product images in the usual three sizes.

Did I mention OVERRIDES? Read about the override system and use it. Really. You'll be glad you did.

I've probably forgotten many things, but that's what the forum is for ... and the FAQ ... and the wiki ... and the tutorials.

That's a good looking design. You can do it. I look forward to seeing it as a ZC site.

Rob

Rob:

Thanks for your encouragement ;-) Your suggestion to look at the templates was very helpful; I didn't think of that (duh). Of course, it's incredibly confusing that files need to be customized in many sections -- and using the stylesheet. But I'm getting the hang of it; here is the home page: https://www.mishutkadesign.com.

Quick question that I failed to figure out: How and where do I instruct the browser to center the site instead of putting it on the left in the browser window?

Many thanks again for everyone's help!

Nice design - you may want to do some image optimizing though - 300k+ is pretty heavy - http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.mishutkadesign.com/

Thanks for the tip and the pointer to the optimization site! The main image is just a placeholder, it's not optimized; I'm trying to get the layout done first... ;-)

Hey mishutkadesign

You may want to take a look at the mainwrapper style in the stylesheet.

When i did my layout I had the whole site moved to the far left until i had to change the Width of the mainwrapper to 1012px. at least for my design.

Try to play around with the width on that section and see what px # gets the site in the middle.

Thanks cellmonsters, I tried your idea, it didn't work for me...

Thats wieed. Unless you need to put a center tag in the tpl.header and tpl main_page as well as footer... maybe?:lookaroun

Edit: I just checked and yes, I actually have the center tag on my site.

#mainWrapper {margin: auto;}

will keep the page in the center of the screen.

Hi,

Glad I could help.

Almost the very first line in your style sheet...

change (in the body element) margin: 0px; to margin: auto;

Lookin' good.

Rob

Everyone -- thanks for your suggestions!

Using margin: auto in the #mainWrapper alone didn't work, but once I changed margin: 0px to margin: auto in the stylesheet -- it worked beautifully!

MANY THANKS! ~ Irina

Ordinarily, the body covers the entire window (100% width & height) by default, and #mainWrapper is used to define the size & location of the content.

You have limited the body element to a fixed width, the way #mainWrapper is usually used, so that is why the margin: auto; needed to be applied to it. There is nothing outside the body except the html, so you have a blank gray background.

Thanks for the explanation, Glenn! It makes perfect sense ;-)

OK, need some help from you guys on one little tweak:

Looks like there's a space between my header and the main body, and it's separating the two images -- you can see a break in the border (as if there is another row in between). I looked everywhere, can't find it. Any thoughts on what it is? THANK YOU!!!

http://mishutkadesign.com