Hi, I would like to leave the size of the content column of my theme as it is but make the white margins on the sides bigger. Basically - I want to narrow the place of the text. The site's URL is http://best-offers-online.com CSS Stylesheet is: /* Theme Name: Red City Theme URI: http://www.realitysoftware.ca Description: WordPress theme designed by <a href="http://www.realitysoftware.ca">Reality Software</a>. Version: 1.0 Author: Reality Software Author URI: http://www.realitysoftware.ca */ body { margin:0; font-size:0.9em; line-height:20px; background: #601719; font-family: Arial, "Myriad Pro", "Trebuchet MS", "Arial";} a { color:#FF5220;} a:hover { text-decoration:none;} #header { background:url(images/header_bckg.jpg) repeat-x;} #logo { padding:30px 0 0 40px; height:36px; } #logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:36px; font-size:26px; text-transform:uppercase;} #logo a:hover { } #menu { background:url(images/menu_bckg.jpg) repeat-x; width:800px; margin:0 auto; height:32px; margin-top:47px;} #menu ul { margin:0; padding:0;} #menu ul li{ display:inline-block; width:100px; list-style:none; text-align:center; height:32px;} #menu a { display:block; width:100px; color:#FFFFFF; font-size:14px; font-weight:bold; text-decoration:none; padding-top:8px;} #menu a:hover{ background: #FF5220; padding-top:8px; height:24px;} #main { width:100%;} #content { margin:0 auto; background: #FFF; width:780px; padding:0 10px 30px 10px;} #content h1 { padding: 30px 0 15px 0; margin:0; font-size:1.5em;} #content h2 { margin: 30px 0 5px 0; font-size:2em;} #content h2 a { color:#000000; text-decoration: none;} #content h2 a:hover { color:#FF5220;} #content p { padding:0 0 5px 0; width:750px;} .entry p { margin: 5px 0 0 0; width:750px;} #content .post { border-bottom:15px solid #fafafa; padding-bottom:15px;} #content ul li {list-style:none; margin-left: 10px; padding-left:20px; background:url(images/li.gif) no-repeat 0px 4px;} #content ol li { margin-left: 20px; } #footer {background:url(images/footer_bckg.jpg) repeat-x #000000; height:102px;} #left_footer { float:left; padding:40px 0 0 30px; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:11px;} #left_footer a { color:#FFFFFF;} #right_footer { float:right; padding:40px 30px 0 0; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:11px; text-align:right;} #right_footer a { color:#FFFFFF;} .navigation { text-transform:uppercase; margin-top: 20px;} blockquote { font-style:italic; border-left:3px solid #F4F4F4; padding-left: 5px; margin-left: 20px;} code { line-height:normal; font-size:12px;} I will appreciate any advice, thank you
It's this bit you want to change : #content { margin:0 auto; background: #FFF; width:780px; padding:0 10px 30px 10px;} to #content { margin:0 auto; background: #FFF; width:780px; padding:0 20px 30px 20px;} change the 20px values to change the right and left hand side padding.
Thanks but it doesn't work - it changes the size of the white space - how to I leave the white space as is and only change the text?
#content { margin:0 auto; background: #FFF; width:740px; padding:0 30px 30px 30px;} Looks like that does the trick
Yes, it does Thank you. How come changing just one of the variables width and padding gives unwanted results?
I now have another problem with the theme all the images are floating to the right of the screen past the end of the white space allocated for text - like here: http://best-offers-online.com/barack-obama-survey How can I fix it ? this has never happened to me with any theme
It's because the width of a div doesn't include padding in the 'width' attribute, so adding padding increases the overall width which you can manually change by subtracting your new added widths of the padding from the width tag. Ok I just did some experimenting, and here's how I did it. 1. Get rid of all those tables! If you have dreamweaver it'll be obvious about which ones are table tags because they're in a pale greenish-blue color. 2. Add the id tag to the image of your advert : <img id="barackad" src="BARACK ADVERT PATH" alt="" border="0"> 3. Add the corresponding CSS : #barackad { position:relative; left:400px; bottom:400px; } That should work, and if you're using a fixed width layout then it should be fine .
Thanks! But it happens to all my images on every page, isn't there like a change that I can make that applies to all the images at once?
Aha, got it! Scrap what I said last time, just get rid of the width part of the p definitions : #content p { width:750px; .... }
So maybe the problem is something else? for example the image here: http://best-offers-online.com/ is aligned to the right but the theme aligns it to the left