cant figure out CSS

[oxicottin]

Hello everyone! I have been searching everywhere on ZenCart site for ideas and help tuts but im lost. I have a website I built for my mom in html and wanted to get out of it and into somthing more automated with an admin pannel ect. I wanted the site to look as simmular to hers as much as I can without the flash. Can someone help me make a template? I can make all the buttons ect. or head me in the right direction because I hate adding pictures and descriptions ect in my existing website!!!! Here is my website http://rbackyard.net Please help

Thanks,
Chad

[afo]

Very nice! You should be able to translate that into ZC. I recommend installing ZC in a separate folder, so you can play with it without disturbing the existing site.

To create a very basic custom template (you can build from there), you need:
includes/languages/YOUR_TEMPLATE/english.php
includes/languages/english/YOUR_TEMPLATE/index.php
includes/languages/english/YOUR_TEMPLATE/header.php (to change the logo)
includes/templates/YOUR_TEMPLATE/template_info.php
includes/templates/YOUR_TEMPLATE/common/tpl_header.php
includes/templates/YOUR_TEMPLATE/common/tpl_footer.php
includes/templates/YOUR_TEMPLATE/images/logo.gif
includes/templates/YOUR_TEMPLATE/css/stylesheet.css

Any where you see a /classic/ folder, you can create a folder for your custom template. You can copy the necessary files from either the /classic/ folder or the /template_default/ folder.

[oxicottin]

I have messed with the recent upgrade for a week (In a seperate folder) or so and have made some progress by reading ZenCart posts but I cant figure out what files I can mess with? I want a transparent background so I can see the blue background ect. just like my moms website. What do I need to do to make it look like hers?


Thanks,
Chad

[clydejones]

First create a custom template as outlined by AFO.

Once you have your custom template created, open the stylesheet.css

includes/templates/YOUR_TEMPLATE/css/stylesheet.css

The first declaration you see will be:

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
background: url(../images/star_background.jpg);
}

make the change highlighted in red:
place your star_background.jpg image in includes/templates/YOUR_TEMPLATE/images

once you've uploaded the files to your server, you should have a page with the background image that matches your reference site.

[afo]

Clyde is right on target, Chad. It's not as difficult as it may seem. I know you're confused and frustrated, but I'd be worried if you weren't. It's perfectly normal when you're just starting out.

You'll go from and to and in no time.

[oxicottin]

Ok now once that is done with the background how do I set the pictures up the way I have them on my site? Oh and I saw a cool thing on someones site but I cant rember which one it was. When I moused over on the picture it showed a slightly larger picture. How is that done? One more thing. In the template there is a ZenCart header and I see it in the includes/templates/My_Template/images. what do I do just make a header the same size and replace it using the same name? Also, there is the logo. How do I get rid of this and its link? One more thing. This is where I put my background picture right? I have more questions but a few at a time....

Thanks,
Chad

[afo]

About the images... the site you saw probably had ImageHandler2 installed. You can get a copy in the downloads section. Just follow the instructions to install it. It's pretty simple.

Yes, you can make a logo (and/or the background image), use the same names (or different ones, if you want... you just have to edit a file or two) and upload them to your image directory.

The images for products are uploaded when you create the products.

If you want to see a prototype cart I created using the list of files I posted earlier (and it has IH2 installed), go to http://www.pamperedwebsites.com/kstreet/ and see what it looks like. Don't create an account or order anything... it's just a sample I did for a potential client who's still deciding, so there isn't really anything being sold.

[oxicottin]

AFO, How did you get you page to be the whole width? thats what I want to do.... O h and can I make my own directorys files in the images folder befor I upload the website again? Because I read you cant make changes to these folders once installed.

thanks,
Chad

[afo]

Create the folders as I laid them out earlier. You can either create them through your webmaster panel, your FTP client or by creating them on your local drive and uploading the entire folder into the correct place using FTP.

I do all my editing on my local drive and then FTP the folders/files to the website. That way I always have a copy. Of course you can make changes as you go along! Feel free and play!

Lots of stuff gets done in the stylesheet. I don't remember all the changes I made offhand. I'd have to compare the stylesheet I changed with the original.

Zen Cart is very hard to break if you use the override system because you can always go back to the original file and start over if you really foul it up.