WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How do I change width of Twenty Ten to 800 pixels? (7 posts)

  1. srosen
    Member
    Posted 3 years ago #

    I'm using the Twenty Ten theme, and I'd like to make the overall width 800 pixels. I would reduce the width of the sidebar a little, and then reduce the width of the main content area as much as necessary. I've looked in the Stylesheet template, but I'm not sure how to make those changes.

  2. Digital Raindrops
    Member
    Posted 3 years ago #

    There are a number of widths you would need to change in the twenty ten theme, one in the functions.php the others in the style.css.

    So first thing is to create a child theme

    Create a folder for your child theme

    Create a file in the folder functions.php

    <?php
    
    add_action( 'after_setup_theme', 'child_theme_setup' );
    
    if ( !function_exists( 'child_theme_setup' ) ):
    function child_theme_setup() {
    	define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 800 ) );
    }

    Create a file in the folder stylesheet.css

    /*
    Theme Name: Twenty Ten Narrow
    Theme URI: http://digitalraindrops.net/
    Description: A WordPress 3 child theme from Digital Raindrops.
    Author: David Cox of Digital Raindrops
    Author URI: http://digitalraindrops.net/
    Template: twentyten
    Version: V1.1.1
    Tags: fixed-width
    */
    
    @import url('../twentyten/style.css');
    
    /* Start change the sidebar width 220px to 180px */
    #container {
    	margin: 0 -200px 0 0;
    }
    #content {
    	margin: 0 200px 0 20px;
    }
    #primary,
    #secondary {
    	width: 180px;
    }
    /* End change the sidebar width */
    
    /* Start Content and Container reduced from 940px to 800px base = -140px */
    #access .menu-header,
    div.menu,
    #colophon,
    #branding,
    #main,
    #wrapper {
    	margin: 0 auto;
    	width: 800px;
    }
    .one-column #content,
    #content img{
    	width: 480px;
    }
    #content .attachment img,
    .single-attachment #content {
    	width: 760px;
    }
    #site-info {
    	width: 560px;
    }
    #site-title {
    	width: 600px;
    }
    #site-description {
    	width: 180px;
    }
    #access {
    	width: 800px;
    }
    #access .menu-header,
    div.menu {
    	width: 788px;
    }
    /* Start Content and Container reduced from 940px to 800px base = -140px */

    There you go that should cover it!

    HTH

    David

  3. srosen
    Member
    Posted 3 years ago #

    Thanks so much. I'm just getting started with WordPress, and was nervous about changing the existing template files. Using a child theme looks like a great solution. Thanks again.

    -Stuart

  4. Digital Raindrops
    Member
    Posted 3 years ago #

    One other thing is to copy the screenshot.png from the parent to the child themes folder.

    As you are new then you might like my tutorials, these are all using a child theme and cover many new WordPress 3 features, and there are solution downloads available.

    David

  5. srosen
    Member
    Posted 3 years ago #

    Your tutorials, and Digital Raindrops in general, look like they will be extremely useful. I've got another site I'll be putting up soon, and I'm thinking about doing the whole thing with WordPress. Thanks again.

    -Stuart

  6. rpb1001
    Member
    Posted 3 years ago #

    Thanks very much David. This was very helpful!

  7. rogeratsf
    Member
    Posted 3 years ago #

    I got a syntax error running the function.php. However, it worked when I eliminated the colon in the if statement and enclosed the entire child_theme_setup() function in curly braces.

Topic Closed

This topic has been closed to new replies.

About this Topic