How do I space things out? CSS help please

[SyntheticShield]

I have a question. When I click on a category link from a side box, it takes me to a page that lists all the products in that category. What file controls that page? I want to space things out some. The products in the category are right under the horizontal bar that has the links you can click on to sort the listing and Id rather there be some space between there.

Also, I resized the width of the classic template from the css file. However, the center column in all the pages doesnt stretch across the page. Where can I go to change this? I havent found it yet in the CSS, so if it is there I guess Im overlooking it.

Lastly, is there a way I can tell what file is being used on a particular page. I know when you click on a product it displays the info for that product using the tpl_product_info_display.php file but what if I wanted to know what files were being used to display other pages, how can I find that out?

Thanks.

[bombknex]

Hey, I know the answers to some of your questions. Your mainly going to want to edit the template CSS file. First off it's recommended that you be working in a copy of whatever template you want to modify. Not only for the stylesheet but for every aspect of the template (sideboxes, stylsheet, modules, etc..) Read up on overrides or setting up a custom template. After you've got that setup edit your 'stylesheet_new.css' file in the templates css directory.

To find CSS classes and/or div ID's I just peak at the source of a page. This is basically my entire source for one of my category listings:

##############################################################################################################_
<div class="centerColumn" id="indexCategories">
<h1 id="indexCategoriesHeading">Boys</h1>


<div id="categoryDescription" class="catDescContent">Tops, bottoms, and everything in between for your little boy!</div>
<!-- BOF: Display grid of available sub-categories, if any -->

<div class="categoryListBoxContents" style="width: 102px;"><a href="..." alt="Tops" title=" Tops " width="100" height="115" /><br />Tops</a></div>

<div class="categoryListBoxContents" style="width: 102px;"><a href="..." alt="Bottoms" title=" Bottoms " width="100" height="115" /><br />Bottoms</a></div>
<div class="categoryListBoxContents" style="width: 102px;"><a href="..." alt="Jumps/Onesies" title=" Jumps/Onesies " width="100" height="115" /><br />Jumps/Onesies</a></div>
<div class="categoryListBoxContents" style="width: 102px;"><a href="..." alt="Accessories" title=" Accessories " width="100" height="115" /><br />Accessories</a></div>
<div class="categoryListBoxContents" style="width: 102px;"><a href="..." alt="Footwear" title=" Footwear " width="100" height="115" /><br />Footwear</a></div>
<br class="clearBoth" />

<!-- EOF: Display grid of available sub-categories -->



</div>
##############################################################################################################__

So here you've got tons of possibility for editing pretty much everything on the page through CSS. Awesome! Just find the class or id you want to mess around with in your CSS file, if it doesn't exist create one! Then make your changes and upload them.

I've found this to be the best way to really modify the layout. You can do some additional things by editing the tpl files and what not. I recommend taking those same classes and then searching for them with the Developers Tool Kit under the tools menu in the admin. If you search in all files you'll see any reference of that class and will probably be able to see where to look to do any more edits.

Again though, I've messed with some of that stuff but overall the most changes I've done have been in the spreadsheet OR also in the Zen Cart control panel. There's a lot in there if you just search around a bit.

IMPORTANT - Like I said before read up on overrides and try setting it up if you havent already. It's very worth it in the long run because if you screw something up you can always revert back to the original default stuff....

Hope this help. Cheers,

Jonah

[SyntheticShield]

Hey bombknex, thanks for the reply.

I had been doing as you mentioned, searching through the outputted code to see what I need to be searching for and was indeed using the Developers Tool Kit to try and find the source file. I must add that the Developers Tool Kit has to be one of my favorite features of ZC just for the reason it can search through all the files and find what you are looking for in most cases.

At any rate, I had been looking through the CSS to try and find the parts in question, but hadnt had a lot of luck with that. I can see in the code output that it has a table that is already set to 100% so I can only surmise that its the CSS that is restricting it. I had searched through the CSS for the div and class id's that I was seeing but hadnt found all of them, so I dont know if some are in the template CSS and others in the template_default CSS folder. I also hadnt thought of creating the stuff in the CSS but that would definately be one way to address it, I would have thought though that it would already be in the CSS file somewhere, but I could do that for some testing though.

I havent used template overrides, another great feature of ZC, but I need to start using that if for no other reason than like you said, I could always revert back to the original configuration.

Again, thank you VERY much for the reply and for taking the time to type all that out for me, it is much appreciated.