Newbie Help :P With CSS and Homepage Customisation

Hi Guys,

I would say that i have dabled in ZenCart but have never had the need to customise the stylesheets.

Is there any newbie guides on the web that can give me a really basic hook on changing the style sheet and general apearance of the home page, simple things like changing colors and layout on the site.

Would really apreciate some help.

Many Thanks

:eek:

mtsuvios

What is your current level of expertise? Do you already understand CSS but want to know how to find your way around the Zen Cart stylesheet, or are you asking how stylesheets in general and Zen Cart's in particular work?

If you don't know CSS, I'd strongly recommend some basic tutorials such as those at https://www.htmldog.com/guides before trying to amend the Zen Cart stylesheets.

If you're already fairly competent with CSS, then I recommend looking at the HTML source for the pages you want to modify and identifying the relevant HTML tags together with their IDs and the classes that apply to them. Then search the stylesheet for them. Sometimes you won't find them - no problem, just add the IDs and classes ypu need and style using normal CSS rules.

Thanks for your reply.

I have a basic understanding of css and am ok with changing colors there, have been researching most of the day and have solved my first problem (changing the orange/gold default color) found that if i edited tile_back.jpg i can actually change the default color. :) wohoo was hunting the stylesheet for ages.

I gues im just really after an online guide that can walk you through changing the visual aspects of the site be it with css or editing pictures.

http://www.creatusitio.com/Modulos/ComercioElectronico/demo/index.php?main_page=page_1

was quite usefull

Thanks

Kuroi,
Sorry to resurrect a really old thread - but would you also look in PHP files as well? Also is there logic to which folders the HTML/PHP files would be in?

Arnold,
What's logical for one is totally illogical for another. As with any new item, you need to feel your way around for a while. Tools that can really make your job easier are:

1. A reliable ftp program
2. firefox as a browser
3. firefox add-ons like firebug and web developers toolkit
4. possibly a copy of TopStyle Lite for editing css
5. a copy of WinMerge to check out files
6. the developers tool kit in the admin section
   And, like ZenCart, they're all powerful but free.
   It's often said that we quit looking for something as soon as we find it. Many quit looking long before they find it. Learning how to look and looking in all the places will make you successful.
   I'd also recommend that you take the time to go through the options in the admin panel to see what they do. No need to memorize them but, the more you look at how things are laid out, the more you will get a handle on what was logical to the developers. That done, you'll be better able to find something in the future.

Thanks!
I've only been at this Zencart stuff for a few months and some days it feels like I know less than when I started! But then I stumble across something and it keeps me going.

arnold931:

Kuroi,
Sorry to resurrect a really old thread - but would you also look in PHP files as well? Also is there logic to which folders the HTML/PHP files would be in?I'd always look at the generated HTML first. Most times just styling that through the stylesheet is all that's needed and knowing how the underlying HTML was generated is just a complication.

When the HTML isn't the right shape for what you want to do - maybe things come out in the wrong order (templates), or you want things on your page that Zen Cart doesn't include by default or though Admin switches (modules) - that's the time to dive into the PHP scripts.

By "generated HTML" do you mean the way the page looks, or are you talking about using something like Firefox Web developer to View the generated HTML. Either way, how do I figure out what part of the CSS to change?

The generated HTML is what you see when you do a view source. No CSS class or id can be effective unless it first shows up through that, so it is a good low-tech way of working on styling.

FInd a class, id or other HTML element/tag that is shortly before your target in view source, and you can often affect your target by editing that in your stylesheet. If it is not already mentioned in the stylesheet, add it yourself.

Thanks.
Is it different for the Logo? I see where my logo is defined in my header.php along with the size. When I View Generated Source it is a different size.
Also, I wanted to reposition the logo. I couldn't find any reference to it in my stylesheet so I added a #logo with a background-position. The problem is I ended up with 2 logos!

/includes/templates/your_template/common/tpl_header.php handles the output of the logo which is defined in header.php. It is a foreground image. Adding a background image will give you two logos.

The default stylesheet has references to #logo, but mostly grouped with other items. You can specify position, margins, padding etc. for #logo and #logoWrapper; just don't try to use bg and fg images at the same time.

The definitions in header.php specify the filename and area reserved for the logo. You should set them to the actual dimensions of the logo image you are using. A discrepancy can sometimes cause errors in the display.

Thanks. I understand what you mean about the image size.
I thought I could add a #logo{background-position:left;} to my stylesheet to shift the logo to the left, but it didn't do anything.

You may need to style #logoWrapper instead of or in addition to #logo - that depends on your specific layout.

{background-position:left;} will only affect the starting place of the background within the logo, it won't affect the location of the logo.

You can use margin, padding and float or text-align, and position: absolute or relative to locate the logo and wrapper.

Thanks.
I am going to go learn CSS and come back and try this again.

You may want to get a copy of something like TopStyle Lite. Might be a good start on your way to conquering CSS. Firebug with firefox is invaluable as well.