Need help? Check out our Support site, then


TwentyTen theme, wider main column

  1. Hello,

    Im wondering how to make the main content column on my blog http://thestarrlegacy.wordpress.com wider?
    I want to be able to post pictures with a width of 800pixels, but it just breaks the layout.
    The column is obviously not wide enough, could someone please tell me how to change the size of it?

    Thank you,
    Sarah

    The blog I need help with is thestarrlegacy.wordpress.com.

  2. kerrymurrayphotography
    Member

    You would need to have the (paid) CSS upgrade, or, easier: choose another theme with a wider main column.

    This links a comprehensive source of image width info for all themes: http://wpbtips.wordpress.com/2009/07/23/maximum-image-width/

  3. @starsarahs, the twenty ten theme has an overall width of 990px, which is about the widest you want to go considering that over 44% of internet users are still on 1024 x 768 monitor resolutions or less. The number that are on widescreen and higher resolutions (1280px width and higher) is growing by the day, but if you go too wide, then people are going to have to scroll horizontally to be able to see your whole site. With your site at the point it is now, there are a number of things you are going to have to rework.

    1. Background image
    2. Header image

    #access, #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
    width: 1080px;
    }
    
    #branding {
    background: url("put URL of header image here") no-repeat scroll 0 0 #000000;
    height: 203px;
    }
    
    .entry-content {
    width: 800px;
    }

    You will have to make a new header image, but do not use the header uploader in the dashboard. You will actually go to appearance header and use the "remove header" feature. Upload the new header image to your media library, get the URL of it and put it in the background declaration in #branding above.

    After adding the above, on the CSS edit page in the field for maximum image and video widths, put 800. and save.

  4. Thank you!

    Sorry for late reply, just havnt gotten around to try this. It seem that it will be too wide though as you pointed out. Might just have to accept it as it is.

  5. One thing you could do is to delete the sidebar and then use the bottom bar locations for your widgets and then maximize the post/page area width to the wrapper area (white area).

  6. You might be able to try this... If the overall width is 990 then you can make the left column 800px and the right column 190px.

    Find:

    #primary,
    #secondary {

    Change this from 220px to 190px

    Find
    #content {
    Change this from (margin: 0 280px 0 20px;) to (margin: 0 250px 0 20px;)

    Find
    #container {
    Change this from (margin: 0 -240px 0 0;) to (margin: 0 -210px 0 0;)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags