WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to change Post and Content width in Twenty Ten (7 posts)

  1. pigandfish
    Member
    Posted 3 years ago #

    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.

  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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*/
    }
  3. pigandfish
    Member
    Posted 3 years ago #

    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!

  4. pigandfish
    Member
    Posted 3 years ago #

    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;
    }
  5. pigandfish
    Member
    Posted 3 years ago #

    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

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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.

  7. pigandfish
    Member
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic