Help for a N00b

[JShar1]

Ok guys, I guess I'm an idiot.
I thought I was relatively tech savvy and a quick study.
Apparently I'm not.
I just signed up for a JustHost account and am trying to set up a site to sell the jewelry I make. I already had a site with another provider but wasn't happy at all with the support, pricing, features, etc. The one thing that the other place had going for it was their eStore: It was dead simple.
I assumed JustHost would have a similar system.
I was wrong. After looking at the other options (osCommerce and CubeCart) Zen Cart looks to me like it would be easiest to use.
Unfortunately I built my site to look like my old one with RV Site Builder before I installed Zen Cart. Now I'm faced with the problem of trying to integrate my Zen Cart into my existing site. I would really really like it to function like just another page in my site where people click the link in the nav bar and oh look, there's my products. I'm getting the feeling this is not possible.
I know I could just reinstall Zen in my main directory and have it run my whole site, but I've put a lot of work into it and don't want to trash it all.
I don't script, I don't code, I'm not a professional, and it's not pretty. But It's mine, and I'm kind of proud of it.
Also, I have no clue how to really customize zen cart to look like my existing site. I get the feeling its going to take some coding work, which like I said I don't do.
So my question is this: What do I do? Yeah, I'm pretty much clueless.
If you would like to take a look my site is ShartzerStudios.com
Any help would be appreciated.

I'm running v1.3.9h and have installed the MostlyGrey theme.

[stevesh]

Most people familiar with Zencart could duplicate your current look in Zencart in an hour or two, so it isn't the monumental job it looks like now. I would suggest you do that (create the site in Zencart) rather than try to incorporate Zencart functions into your existing site, which can be done but requires a lot more work and the results are rarely optimal.

Gather your tools:

An FTP program (many here use Filezilla - I use the Firefox plugin FireFTP).

A good text editor (I use Notepad, and Notepad++ when I need line numbers).

Web Developer plugin for Firefox. You can use this to see where in the stylesheet you change the styling of the various page elements.

Ctrl-Shift-Y will allow you to hover over a section of the page and see the class and id names for that section in the box at the top. The statements in the stylesheet that begin with # are id's and the ones that begin with dots are classes.

Ctrl-Shift-E will open the CSS editor and allow you to edit the stylesheet and see the changes in real time without changing anything permanently. An essential tool.

Some prefer Firebug, which does much the same thing.

Then just start reading through the Tutorials/FAQ and search for stuff you don't understand in the forums, posting a question when you can't find an answer.

Another tip - if you didn't install the demo products when you installed Zencart, I would re-install and do so. They're a great resource about how things (especially attributes) work, and you can just delete them later.

[kobra]

I built my site to look like my old one with RV Site Builder before I installed Zen Cart. Now I'm faced with the problem of trying to integrate my Zen Cart into my existing site.

As you already know one does not integrate ZenCart into an existing site

It should be mostly replacing graphics and settings in the admin to get very close to what you currently have but not sure that Mostly Grey is your best start point

[schoolboy]

Well... you seem to have installed ZC ok and are now entering "excited novice" stage.

My first comment is the width of the MAIN WRAPPER. Your header image is 1024 pixels, and that (and the FOOTER) are centering nicely on my screen.

But in your stylesheet.css file, you have set the WIDTH of the main wrapper to 99%

#mainWrapper {
background-color: #444;
text-align: left;
width: 99%;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

You should set it to be the SAME WIDTH as your header image:

#mainWrapper {
background-color: #444;
text-align: left;
width: 1024px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}

... remember - people with wide screens will see a rather "messy" layout if you have one element expanding at a pixelated rate, and others expanding at a percentage rate.

Additionally... 1024 pixels is OK for MOST computer monitors these days, but anyone with a lower resolution will see horizontal scroll bars on their screen.

The SAFEST width to use on any website is 980 pixels.

[kobra]

A fluid layout is also acheivable and you already have created a seperate logo image at 192px × 64px
You can sepcify a background color for the logoWrapper in the stylesheet or the background image with the text removed into another image file

This text image file can be inserted and centered over the background image by specifying it as your "tagline"
Editing the language file(I believe it is meta_tags.php)
and replacing the red text with the text image

define('HEADER_SALES_TEXT', 'Tagline Here');

define('HEADER_SALES_TEXT', '<img src="url(../images/image.jpg)" alt="description of your image" />');

Might need a bit of css tweaking for placement to the #tagline rule