Need help? Check out our Support site, then


How to widen main blog area?

  1. blondecroatian
    Member

    I would like my entire blog area to be wider. Does anyone know how to do this? I am using the Delicacy theme.

    The blog I need help with is tacklingmommyhood.com.

  2. I think that will be in the same inner-wrapper css as mentioned in my reply to your previous post http://en.forums.wordpress.com/topic/how-to-change-color-of-entire-blog-border?replies=2#post-1062225 - change the width number (but be careful that you don't make a page that is not usable on smaller devices like our ipads and smaller notebooks)

    Add width: 980px; to the code I gave you in previous post and change the 980 to a pleasing width.

    I'm just another user, not an expert so maybe the big guns will come on with other advice...

  3. or you might be able to narrow your widget sidebar and widen your main content area if that is what you mean. I didn't play with that.

  4. blondecroatian
    Member

    yea, it widened it, but then it kind of ruined the ribbon on my Delicacy theme (since htat didn't widen as well).... oh well, im just going to leave it as is

  5. Maybe one of the staffers will slide by and come up with a total solution.

  6. To make the Delicacy theme wider, you actually need to adjust several of the page elements. Here is an example:

    #header-top a {
    	display: block;
    	width: 1180px;
    	height: 274px;
    	background: url('http://tacklingmommyhood.files.wordpress.com/2012/11/cropped-blog-header.png') center no-repeat;
    }
    #header-top a img {
    	display: none;
    }
    #inner-wrapper {
    	width: 1180px;
    }
    #navigation {
    	width: 1198px;
    }
    #content {
    	width: 800px;
    }
    #content-wrapper {
    	background-position: 200px 15px;
    }

    To make the header image wider, create one, upload it to your blog's media library, and copy the URL. Then replace the link inside url() with your new image. Note that if the new image is taller than 274px, you also need to adjust the height in that same block of CSS. For the best results using the example above as a starting point, make an image that is 1190 x 274 pixels.

    If you change the main content width, you should also update the "Content Width" value on your Appearance → Custom Design → CSS page. Look for it in the "Publish" box on the right. Change it to match the width value in the #content CSS block, which is 800 in the example above.

  7. blondecroatian
    Member

    Thank you so much, "designsimply"!!!

Topic Closed

This topic has been closed to new replies.

About this Topic