Need help? Check out our Support site, then


Misty look Theme

  1. mareenasrecipecollections
    Member

    I am new to wordpress and would like to widen the main text column of my blog. Kindly guide..Thanks in advance

    The blog I need help with is mareenasrecipecollections.com.

  2. To widen the main column in Mistylook, try this:

    #navigation {
        width: 860px;
    }
    
    #navigation .menu {
        width: 860px;
    }
    
    #container {
        width: 880px;
    }
    
    #content-main {
        width: 620px;
    }
    
    #footer {
        width: 860px;
    }

    That will increase the main container elements and the left column "content-main" area by 100px. You can adjust all of the numbers up or down by the same number of pixels to make it wider or thinner if you'd like.

    You will also want to adjust your header image. What size header image you need will depend on the final widths you choose for the elements above. If you use 860px as your final container widths, then a 860 x 200 pixel header image would fit nicely and you could use this CSS to update it after you upload the correctly sized image to your media library and get the image URL from there.

    #headerimage {
        background: url('YOUR_HEADER_IMAGE_URL') no-repeat;
    }
  3. mareenasrecipecollections
    Member

    Hi designsimply,

    Thanks for the help.I was able to successfully widen 100 px each of the above config..However I am slightly confused about how to go about with the header image.currently its displaying 760 x 190.Thanks again

  4. mareenasrecipecollections
    Member

    I mean now the width is 960 pix..

  5. Looking good. :)

    Since you choose a wider width, next you should create a header image that is 960 x 200 pixels, upload it to your media library, and copy the image URL: http://en.support.wordpress.com/images/

    Then add the following CSS and replace YOUR_HEADER_IMAGE_URL with the image URL from your media library:

    #headerimage {
        background: url('YOUR_HEADER_IMAGE_URL') no-repeat;
    }
  6. mareenasrecipecollections
    Member

    Thanks a lot for ur prompt reply.Truly appreciate it.. :-)

  7. mareenasrecipecollections
    Member

    Hi,
    I followed the above mentioned instructions. One thing i noticed is that evrytime i tried, the header is ending where the right column( archives,categories etc) starts. Is that how its supposed to be ? Is it possible to further widen the header image? eagerly waiting for ur reply..Thanks..

  8. You need to prepare, upload and use an image that is 960px wide (980 - 20 = 960).

  9. Oh, wait, you are trying to upload it through the header uploader and you can no longer do that. You have to put the URL into a background declaration in #headerimage in your CSS like designsimply mentions.

    #headerimage {
    background: url('YOUR_HEADER_IMAGE_URL') no-repeat;
    }

    Upload the 960px wide image to your media library, get the URL of that image and then put the above into your CSS and where it says "your header image" between the single quote marks, put the URL of your uploaded image.

  10. [Code removed by staff. It's too long for a comment on an existing thread, and is unrelated to this thread in particular. Please create a new post.]

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags