Support » Fixing WordPress » How to change Post and Content width in Twenty Ten

  • Resolved pigandfish

    (@pigandfish)


    Hello.

    I’m designing a new site using Twenty Ten, but I don’t like the current width of the blog post and page content areas. I’ve printed out the style.css for Twenty Ten so I can study what needs to be changed, but my limited knowledge prevents me from knowing exactly where to go. Insight would be greatly appreciated.

    My site is: http://www.pigandfish.com

    The site I’m using for inspiration is : http://www.pigeontoeceramics.com

    I would like to pull in the width of blog posts and page content to allow more space b/w the right sidebar.

    Thank you for your help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Michael

    (@alchymyth)

    Forum Moderator

    as you are working with a child theme of twentyten, it is a bit different:

    append these styles at the end of the theme options styles:
    (if i remember rightly that the theme has these):
    for a 50px shift:

    #container {
    	margin-right: -290px; /*was -240px*/
    }
    #content {
    	width:600px; /*was 650px*/
    }
    #primary,
    #secondary {
    	width: 270px; /*was 220px*/
    }

    Thank you for reply alchymyth.

    I feel like I’m close, but I need a little more information.

    I am using Twenty Ten Weaver and I thought I could grab your code and drop it in, but it’s not working. (if you’re not familiar with Twenty Ten Weaver, there is a place where you can drop in snippets to alter the theme) When you say ,”append these styles at the end of the theme options styles:” do you mean in the style.css for Twenty Ten? I’m still learning, so the more details, the better for me.

    Thank you!

    Is this the code you were thinking of? It has #content margin and not width. I’ll try playing with the numbers.

    #container {
    	float: left;
    	margin: 0 -240px 0 0;
    	width: 100%;
    }
    #content {
    	margin: 0 280px 0 20px;
    }
    #primary,
    #secondary {
    	float: right;
    	overflow: hidden;
    	width: 220px;
    }

    It worked!!!

    I changed the code to the following:

    #container {
    	float: left;
    	margin: 0 -290px 0 0;
    	width: 100%;
    }
    #content {
    	width: 550px;
    }
    #primary,
    #secondary {
    	float: right;
    	overflow: hidden;
    	width: 270px;
    }

    This code is found in the very beginning of the Twenty Ten style.css under /* =Layout. I copied the code and dropped it into the <advanced options> of Twenty Ten Weaver. Wonderful.

    I’ve been searching the internet for this information and I am so grateful to have finally figured it out!! Thank you alchymyth. This will surely be a resource for other people.

    The site looks perfect now:

    http://www.pigandfish.com

    Michael

    (@alchymyth)

    Forum Moderator

    well done;

    with ‘append these styles at the end of the theme options styles’ i meant indeed ‘Twenty Ten Weaver, there is a place where you can drop in snippets to alter the theme’

    in the original Twenty Ten, it would have been slightly different to change the width of the columns – however it would have been changes to the same styles that you quoted in your second last reply.

    slight modification to code:

    #primary,
    #secondary {
    	float: right;
    	overflow: hidden;
    	width: 220px;

    Changed above width back to 220px from above stated 270px. 270px made my flikr widget act funny.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to change Post and Content width in Twenty Ten’ is closed to new replies.