Need help? Check out our Support site, then


Change main column width in Forever Theme

  1. Just wanting to know what CSS codes I need to use to increase the width of the main column on my blog.
    Thanks

    The blog I need help with is atthetreehou.se.

  2. I found one example that talks about removing the sidebar and making the content area bigger:
    http://en.forums.wordpress.com/topic/make-photos-bigger-than-width-of-forever-theme?replies=9

    But that might not be exactly what you're looking for.

    Here is another example you can use to start with. It will expand the overall container and the content container by 200px. Note that it will not adjust the images in the featured image slider, so the left-margin works to center it:

    #page {
    	width: 1160px;
    }
    
    #content {
    	max-width: 760px;
    }
    
    .featured-post {
    	margin-left: 92px;
    	display: block;
    }

    When you adjust the main content area, you should also adjust the content width setting on the Appearance → Custom Design → CSS page. For the example above using a #content width of 760px, you would want to set the content width value to 677. Changing that value will adjust any images that were inserted at full width. Other images may need to be re-inserted to show up as full width.

    There isn't really an elegant way to stretch images in a featured image slider with CSS only. Here is an example you can add to the above CSS and preview to see what I mean:

    .featured-post,
    .featured-post img{
    	width: 100%;
    }
  3. Can you clarify how to adjust the header width after stretching the content area?
    You briefly mentioned it above, but you referenced two content width values that need to change (760px and 677x). It sounds like you are entering the #content width values in two separate places on the CSS sheet.

    Thanks for your help!
    My website is: http://www.thehappyones.me

  4. Forever has the flexible header feature so you just need to create a header with the correct width, and the height you desire, and then when you upload it, select the "use as is" button.

    http://en.support.wordpress.com/themes/custom-header-image/#flexible-headers

  5. You briefly mentioned it above, but you referenced two content width values that need to change (760px and 677x). It sounds like you are entering the #content width values in two separate places on the CSS sheet.

    That's because you want to set the content width to the #content area minus any padding or margins. Using Firefox's built in web inspector is a nice way to visualize it. To see it, open Firefox, right-click on an element you want to check, and click the "Inspect Element" option. If you've clicked "Style" at the bottom right, you should see an image showing the numbers for the real width of the element as well as all of the padding and margins that apply to it.

    In this example, I used my CSS from above and you can see in the bottom right that the #content element is 677 px wide: http://cl.ly/Niax

Topic Closed

This topic has been closed to new replies.

About this Topic