Understanding the stylesheet.

[blessed]

I've been playing with setting up a zencart. I understand how to create and link to the new template. I've got it registering the changes I make. I think that was 1/2 the battle.

Now it's to figure out what everything is. H1, H2, .myaccount etc. Is there a link to somewhere that explains what these are?


The changes I want are not that big but I'm dumbfounded how to accomplish them.

When you click on a category and it lists the products. I'd like for it to display within a table, and that the cells alternate in color. I'm sure it's the stylessheet, but I'm not sure what each is. I'm checking it out.

I'd like to have the left column boxes centered, not to the left. I'd also like to have some padding on the right so that the main area doesn't touch the border of the boxes. Does that make sense? LOL. I've been staring at code too long.

[SodaJim]

Hello,

Just piggy-backing on this thread since it's related...

Is there any current documentation with explicit definitions of all the CSS in the new style sheets...?

[kobra]

ZenCart just uses the css convention and is not the source for what can be defined or not. All css definitions can be used and are compliant with the standard.

You can see an interactive display of them and how to apply here:
Online CSS Tutorial

Also, some of what you asked about is HTML based like H1, H2 and there are also section at the same link for HTML tags and definitions.

HTML Tutorials

[SodaJim]

Hello kobra,

Thanks for the reply!

My concern is locating documentation on what elements of the style sheet affect what display elements throughout the cart system...
It's very tedious looking at page source info to locate various classes/id's and then search the style sheet in order to modify colors, fonts, etc, etc...
I was hoping for documentation about which CSS elements affect the various display elements...

[ladysaat]

Okay here's what I did. I use Firefox as a browser, if you don't, then get it and use it for this, it'll prove invaluable when you want to cross check your stuff and whatnot.

Then get the Web Developer add on for firefox. Install it yadda yadda yadda. Open up your zencart, the main page or whatever page you're looking to alter, go to "information" in the web dev. toolbar in firerfox. Click on display ID/class and it will show you where and what each thingy is called. As you can tell I am NOT a coder/knowbee programmer person. This was majorly a huge help in figuring out what the heck corresponded to what and where it was.

[SodaJim]

lagysaat,

Thanks for your reply!

I use Firefox as well; but I'll need to install the Developer tool...
I'll give this a try and see what I can extract from the page css...

With the improvements in the Wiki section, I was hoping for a good explanation of all the css elements and their respective display locations in some form of documentation...

Thanks again,
Jim

[wolfear]

This may be a bit late, but thought it might be helpful: I also use Firefox and using the ColorZilla extension, you can see which style, color, etc. is being applied by clicking on an icon in the lower corner of your browser window and placing your mouse over the desired section of the displayed page. It will also outline element/ table areas. This has proved a lifesaver in customizing templates and learning which elements are controlled by what.

An example...the information displayed for the editor bar as I am writing this post:
(RGB colors) R:225 G:225 B:226 (hex)#E1E1E2 (my curosr position) x:447 y:94
(element info) td.controlbar#vb_Editor_001_controls

Should this have been one of my pages in need of editing, I would know what to look for in the CSS or code (using my editors search feature if necessary).
Probably not the simplest method, but it's worked so far...lol
Thought this might prove useful.

[homeofgoodies]

I have looked all over the support forum, and I am looking to get rid of the Span or the blue border around the main portion of my website. I have changed the mainwrapper from 100% to 760px, and the website did not budge. I want to fill the entire screen with the main part of my website (homeofgoodies.com), if you visit that site, you will see the "border" around the whole website.

[clydejones]

I have looked all over the support forum, and I am looking to get rid of the Span or the blue border around the main portion of my website. I have changed the mainwrapper from 100% to 760px, and the website did not budge. I want to fill the entire screen with the main part of my website (homeofgoodies.com), if you visit that site, you will see the "border" around the whole website.

Did you make the change in both of your stylesheets?

stylesheet_original and stylesheet_new

[wolfear]

homeofgoodies,

Just curious, but if you want to fill the whole window, why would you change from 100% to 760px?
That limits you to a fixed width and would not size properly for anyone viewing your site with a different resolution.
I think the borders you are looking for are in "stylesheet_new" under "#navColumnOne" and "#navColumnTwo" approx. lines 274 and 278, and in "stylesheet_original" under "TABLE.footer", approx. line 244.
I didn't see a border around your header area.

Something I did notice:

<td id="navColumnOne" class="columnLeft" style="width: 150px">

but immediately following you have these widths:

<div id="navColumnOneWrapper" style="width: 200px"><!--// bof: loginbox //-->
<table width="200px"

I don't know if that could cause any problems or not (I'm still learning this stuff myself)
Very nice site, by the way.