WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven - Percentages and Width Adjustments (19 posts)

  1. Bubble Wrapped
    Member
    Posted 2 years ago #

    This is confusing. I'm not having any success in my efforts at widening the sidebar on my website. It seems easy enough, and I had no problems adjusting the content width, making sure the margins and entry content width added up to 100%. But for the darn sidebar, I'm just not getting what to do.

    What does the width percentage correspond to? If I adjust that width, clearly something else needs to be adjusted, but what? I thought it somehow related to the margin-right on #primary, but no luck.

    Here's the website: CLICK HERE

    Thanks!

  2. Bubble Wrapped
    Member
    Posted 2 years ago #

    I would love some help with this. Thank you!

  3. esmi
    Forum Moderator
    Posted 2 years ago #

    Try using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

  4. Bubble Wrapped
    Member
    Posted 2 years ago #

    I'm using Firebug. Again, per my post, I've tried everything I can think of to do. I don't understand what's controlling the sidebar width. It seems to be relative to something else, but I'm not sure what.

    So, can someone please help with this?

    Thanks.

  5. Bubble Wrapped
    Member
    Posted 2 years ago #

    I'm still needing some assistance with this so that I can finish my mother's website. Thank you.

  6. Bubble Wrapped
    Member
    Posted 2 years ago #

    Hello again,

    This seems so silly that I can adjust just about everything else with my website, but I can't figure out how to adjust the width of the sidebar. When I try it disappears, which tells me that the percentage width is partnered with something else. But everything I've tried according to common sense isn't working. If Esmi or another experienced participant is reading this, could you please help me out? I want to make the sidebar wider and to narrow the gap between the entry content and the sidebar.

    Thank you!!

  7. esmi
    Forum Moderator
    Posted 2 years ago #

    You cannot widen the sidebar without either decreasing the width of the main content area or increasing the width of the overall page wrapper.

  8. Bubble Wrapped
    Member
    Posted 2 years ago #

    Ugh, I've tried that. I'm feeling like an idiot. The width of the page is okay (it was decreased), but when I try to partner the sidebar width with the content area, it doesn't work. What specifically needs to be partnered with the sidebar width percentage? It's currently 21%, but what does mean? Where's the remaining 79%? I can successfully alter the main content area, but nothing seems to allow me to adjust the sidebar. There's plenty of room to make it wider. See that big gap between the left content and the sidebar? How do I do this? Man, shoot me now, please. This is nuts.

  9. Bubble Wrapped
    Member
    Posted 2 years ago #

    Here is the solution to this problem:

    When you want to adjust the sidebar bar width via the Twenty Eleven theme, you must also adjust the #primary margin-right so that the #secondary margin-right + width adds up to the same amount. Like this:

    #primary {
        float: left;
        margin: 0 -29.5% 0 0;
        width: 100%; }
    #secondary {
        float: right;
        margin-right: 4.5%;
        width: 25%; }

    I'm not sure why the #primary margin must equal all of the #secondary percentages, but they are partnered together. If you don't change the #primary margin-right percentage, your sidebar could disappear.

    Thanks.

  10. diafotistiko
    Member
    Posted 2 years ago #

    I adjusted these presentages to my site but I need my sidebar width a little wider. Which presentages should be put?

    here is my website http://diafotistiko.gr/

    thank you

  11. zeaks
    Member
    Posted 2 years ago #

    Mainmoose is right, you basically need to increase/decrease the margins equally. This is for the left sidebar layout, so don't copy/paste it unless thats the layout you're using.

    .left-sidebar #primary {
        float: right;
        margin: 0 0 0 -30.4%; /* increased left margin 4% from -26.4% to -30.4% */
        width: 100%;
    }
    .left-sidebar #content {
        margin: 0 7.6% 0 38%; /* increased right margin 4% from 34* to 38% */
        width: 58.4%;
    }
    .left-sidebar #secondary {
        float: left;
        margin-left: 7.6%;
        margin-right: 0;
        margin-top: 20px;
        width: 22.8%; /* increased sidebar width 4% from 18.8% to 22.8% */
    }

    I wrote a guide on how to change the sidebar width in Twenty Eleven, I don't like spamming my site, but here it is http://zeaks.org/twenty-eleven-change-sidebar-width/

    Make sure to use a child theme.

  12. diafotistiko
    Member
    Posted 2 years ago #

    I need to adjust an ad 300x250

  13. tg1
    Member
    Posted 2 years ago #

    MainMoose -

    Take a bow. I struggled and struggled with this until I found your response above.

    Zeaks - I apologize - but your tutorial had me pulling out my hair.

    Probably because I am new to wordpress. But I did not see any "right" or "left" sidebar anywhere.

    Thanks to both of you though. I appreciate all efforts!

  14. zeaks
    Member
    Posted 2 years ago #

    Glad you figured it out.

    @tg1 Twenty Eleven has 3 layouts, left sidebar, right sidebar and no sidebar.
    .left-sidebar and .right-sidebar are the body classes for those two layouts. You don't want the left sidebar layout to use the same CSS as the right sidebar layout, which is why i added the classes.

    I probably should of explained that, I'll update my post.

  15. tg1
    Member
    Posted 2 years ago #

    @zeaks - That would be cool. How does one find the "left" sidebar? I have no idea there was a layout like that in Twenty Eleven.

    Thanks!

  16. blaok
    Member
    Posted 1 year ago #

    Here is a example of adjusting sidebar width to 300px.
    `#primary {
    float: left;
    margin: 0 -33.9% 0 0;
    width: 100%;
    }
    #content {
    margin: 0 34% 0 3.9%;
    width: 58.4%;
    }
    #secondary {
    float: right;
    margin-right: 3.9%;
    width: 30%;
    }
    You can adjust to other percentages or width following this tutorial.
    http://blaok.com/in2012/adjusting-the-width-of-sidebar-in-twentyeleven.html

  17. adlawrence
    Member
    Posted 1 year ago #

    OMG! Thank you, blaok for figuring out the calculations to widen the sidebar to 300px.

    MainMoose, you did a great job on your code ... I just needed 300px for an AdSense ad.

    Cheers to those who posted great answers!

  18. aasbd
    Member
    Posted 1 year ago #

    I was trying to to decrease space(margin) between left side bar and main body content but it was failed. Your help to solve this problem will be appreciated. URL http://www.aas-bd.com

  19. zeaks
    Member
    Posted 1 year ago #

    Reduce the margin and increase the width by the same amount.

    .left-sidebar #secondary {
         margin-left: 7.6%;
         width: 23.8%;
    }

    if you reduce the margin by 2% increase the width by 2%

    Here is my updated post on the Twenty Eleven sidebar
    http://zeaks.org/general/twenty-eleven-sidebar-width-explained-and-2-bonus-layouts/

Topic Closed

This topic has been closed to new replies.

About this Topic