Re: Adding Second Column on Main Page
Jason.
Okay so I worked this out last night, and for the most part it is just a matter of playing with the css. I'm going to assume that you have at least a working knowledge and understanding of css layout techniques, since you mentioned you tinkered around with the theme files. Open open up style.css from the classipress theme folder and make these modifications. Note, that these do no replace the current css declarations, but are just modifying certain attributes (for the most part just the
width attribute).
.header {width: 1024px;}
.topbar {width: 1024px;}
.content {width:1024px;}
.main {width: 750px ; float: left;}
open header.php and navigate to lines 48 and 53 and change the width attribute to 150px (I'm not sure why there are inline styles here, but there must be a reason for it:
.listing .head .name {width: 150px;}
.name {width: 150px;}
Ok this sets up room for the ads, now we need to add the banners to the layout, so open index.html. At around line 96 there is a closing tag for the "main" class div. It may be a bit tricky for you to find since the html has not been commented, but for me that div ends on line 96 and it should be the same for you. Go ahead and comment that line so that you know where you are looking in the future like this <--end main--> Right below that add this html:
Code:
<div class="secondary">
<div id="adContainer">
<div class="ads">
Ad Placeholder</p>
</div>
<div class="ads">
Ad Placeholder</p>
</div>
<div class="ads">
Ad Placeholder</p>
</div>
<div class="ads">
Ad Placeholder</p>
</div>
</div>
</div>
This puts 4 ad divs in you can copy and paste these to add more if you want. Ok now for the css (i only did placeholders for you, so you will have to change this to make it look the way you want. Anyway, here is the css...i inserted this at the end of the css file, though realistically it should be in a more intuitive place in your code...
Code:
#adContainer {
float: right;
width: 200px;
}
.ads {
background: gray;
display: block;
margin: 0 0 10px 0;
padding: 0;
width: 200px;
height: 100px;
}
.ads p {
margin: 0;
padding: 0;
}
Ok. that sets up ad placeholders and you are all set to add your ad code from openx.org or whatever you plan to use. Let me know if I missed anything, as I built it last night, but was too tired to post.
Rich
