I just bought a new blog theme for my site convertingcopy.com (so you can see what I want) and I want to change the look from the 2 columns on the main page to just 1. The guy won't get into how to fix it but mentioned that changes need to be made starting at this point in the code which I've pasted below... so can anyone set me straight as to what to change?: #content div#posts .post { margin-right:11px; background:url(images/post_bg.gif) repeat-y; width:278px; float:left; margin-bottom:11px } #content div#posts .post.right { margin-right:0 } #content div#posts .post .categorie,#content div#posts.teal .post .categorie { background:url(images/post_top.png); height:33px; width:278px; color:#fff; line-height:33px }
If the posts were not having inline style position set few tweaks in the css would have done. #content div#posts .post { margin-right:11px; background:url(images/post_bg.gif) repeat-y; width:278px; [COLOR="red"]<-- change to 576px -->[/COLOR] float:left; margin-bottom:11px } #content div#posts .post.right { margin-right:0 } #content div#posts .post .categorie,#content div#posts.teal .post .categorie { background:url(images/post_top.png); height:33px; width:278px;[COLOR="red"] <-- change to 576px -->[/COLOR] color:#fff; line-height:33px } Code (markup): However, you have to play with the background images with graphic editing software like photoshop to match the new width (576px) As there are inline style, find in the code or find the code which pushing the inline style and remove position related style for the post div(position: absolute; left and right attributes.)
I tried doubling the widths in those lines but both columns still exist as you can see if you check the site again. I know I need to tweak the image files, as well. But still, I think I can figure it out if I can just get rid of the right column but no changes I've made have accomplished that. Suggestions on getting rid of the right column? Will getting rid of the position related style for the post div get rid of the other column?
Yes, I indicated earlier, check the generated source; each post has absolute position, it's not needed and it's attributes. div is block so when the width is max it would automatically stacks one after another. check this image, removed the inline styles for the post HERE
I changed the widths of the images and in the code to what I want, yet that other column still exists as you can see. I don't see how you seemed to change the code to get the desired look, can you point it out for me so I can do the same in my code? I really appreciate it, thanks!
I used a add-on for ff; firebug helps you to debug code. you can debug/edit in realtime on the webpage loaded on a browser however that actually doesn't man that you change your actual code in your hosting server. you'll need check the file which is being used while creating the posts on index page.