WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty Ten: Widen Sidebar, Remove Title, Resize Header (14 posts)

  1. X-Maj
    Member
    Posted 3 years ago #

    Hi

    I like the new default theme, but it would be nice if the dimensions were more customizable. I just want to do three things:

    1) The sidebar seems to be 220 pixels wide. How can i increase it to 260 pixels and reduce the main content area by the same amount?

    2) The site title above the header image seems unnecessary. Is it possible to remove that title as well the tagline?

    3) The header image is cool, but it's too thick. Is it possible to reduce the height of the image?

    If someone could help me with even one of these things, i'd be very grateful. I'm guessing i have to edit the CSS file but i don't have much experience with CSS. I just don't want to leave any loose ends that could cause formatting problems in the future.

  2. marjiec
    Member
    Posted 3 years ago #

    You can change the height and width of your header by adding a bit of code to the functions.php.
    Below is what I used to change the height and width of my header image.

    <?php
    add_filter('twentyten_header_image_height','my_header_height');
    add_filter('twentyten_header_image_width','my_header_width');
    function my_header_height($size){
       return 154;
    }
    function my_header_width($size){
       return 780;
    }
    ?>
    
    I then changed the width of the site using css.
    .one-column #content {
         margin-top:-40px;
         width:780px;
    }
    #wrapper {
         margin: 0 auto;
         width: 780px;
         border:1px solid #000;
    }

    To find the width of the sidebar look in your core css copy and paste what you need into your child theme then change it. Below is where your sidebar css is located in your core Twenty Ten Theme.
    /*
    LAYOUT: Two columns
    DESCRIPTION: Two-column fixed layout with one sidebar right of content
    */

    You can see my results here, I changed most all dimensions.
    http://retechsystemsllc.pacificsites.net
    Before changing anything you need to make a child theme.
    Never edit core.

  3. Digital Raindrops
    Member
    Posted 3 years ago #

    As Marjiec says use a child theme do not edit twenty ten,

    if you do not understand child themes then these will help and you will find 'how-to' for many different 2010 template layouts as well.

    1. I am reading the question different to Marjiec, and if I am reading it right it is not the sheet width but just the sidebar and content area you want to adjust?

    In the Child Themes style.css add:

    #container {
    	margin: 0 -260px 0 0;
    }
    #content {
    	margin: 0 320px 0 20px;
    }
    #primary,
    #secondary {
    	width: 260px;
    }

    2. to Hide the Titles

    3. see above the reply from Marjiec

    HTH

    David

  4. X-Maj
    Member
    Posted 3 years ago #

    Thanks guys, this is very helpful. I'm just learning about child themes now, because i've never had to edit anything major before.

    Is there a reference for what all these declarations represent?

    I'd like to do the addition/subtraction myself, but i can't figure out what #container, #content, #primary, and #secondary stand for exactly.

  5. piccs3o
    Member
    Posted 3 years ago #

    This has been very helpful to me as well. I am also learning about child themes.
    I have one more question that is related to this thread.

    I changed the header image size in functions.php to be larger that the content width.

    This worked, but the header image position was unchanged and the image was no longer central to the content div.

    I can't see how to centralise the header image.

    Any help would be very welcome.

  6. X-Maj
    Member
    Posted 3 years ago #

    I don't know the answer to your question, but i did find some helpful resources. Here's some CSS tweaks posted by wpweaver in another thread.

    And it looks like Adeptris answered my question in another thread as well:

    Container needs the -sidebar width
    Content Needs sidebar width + 60px
    Primary and secondary are the sidebars

    -260 / 320 / 260 worked for me, and so did hiding the title. Now i just have to get the header taken care of, and hope nothing else breaks in the process.

  7. piccs3o
    Member
    Posted 3 years ago #

    Cheers for the link X-Maj! I am slowly making progress-it's the split between PHP and CSS that is warping my brain. Got to love WordPress though!

  8. X-Maj
    Member
    Posted 3 years ago #

    Okay, new problem. I created a child theme and all i did was change those layout numbers, change the font, and hide the title.

    Here's my website: ComboVid (not launched yet)

    The problem is if you scroll all the way to the bottom, the "Older posts" link has dropped onto the footer bar. How do i fix that?

    What i've found is that deleting all the layout changes from style.css fixes it, but the mystery is that using the original Twenty Ten numbers doesn't. In fact even if i copy and paste the entire layout segment directly from the Twenty Ten style.css it still causes the same problem.

    Any ideas?

  9. X-Maj
    Member
    Posted 3 years ago #

    I think i figured it out through sheer trial-and-error, although i can't explain it. Adding this to the style.css file fixed the issue:

    #content {
    	margin-bottom: 36px;
    }

    So there's no way to change the header image height from within style.css?

  10. rainforestrobin
    Member
    Posted 3 years ago #

    Hi,

    I am trying to make my sidebar width narrower.

    Here is my site: http://nakedineden.com/nakedinedenblog/

    I am using "Concept 1.0 theme" created by Ed Merritt. I want to make my sidebar narrower, (no more than the width of my largest icon), which is my "Purchase Book" icon.

    Then I want to move the whole sidebar all the way to the right so it's right side is lined up with the right side of my header. Just as the text is on the left side of my blog post.

    I want more width in my "writing area".

    I have searched my php and even css to find where to do this and cannot find it. I know very little about this and am not a tech so please speak verrrry simply. ;)

    Thank you for your help,
    Robin

  11. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Please post a new topic. Your question is not related to the Twenty Ten theme.

  12. rainforestrobin
    Member
    Posted 3 years ago #

    I could not find where to post a new topic. Link? Thanks.

  13. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

  14. rainforestrobin
    Member
    Posted 3 years ago #

    Thanks! :)

Topic Closed

This topic has been closed to new replies.

About this Topic