Need help? Check out our Support site, then


How to add a second sidebar

  1. Dear Support-Team,

    I would like to add a second sidebar on my blog: http://healthninja.wordpress.com . Is this possible with the chateau theme - probably by using custom css?

    Thank you for the time,
    Ksenija

    The blog I need help with is healthninja.wordpress.com.

  2. Why do that when you can switch to a theme that has the number of sidebars you want? http://theme.wordpress.com/themes/features/three-columns/

  3. Also note that Chateau is a responsive width theme. Responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles or tablets sidebars appear below the posts in order to provide as much space as possible for reading.
    If you are using a responsive width theme then go here > Appearance > Mobile and disable the mobile theme.

  4. Thanks for the information. I will consider using a different theme, but so far I do really like mine and it would be amazing if there is a possibility to just add a column.

  5. If your are prepared to purchase an annually renewable custom design upgrade and do the required CSS editing then adding another sidebar may be possible. Without the upgrade it is not possible.
    http://en.support.wordpress.com/custom-design/
    http://en.support.wordpress.com/custom-design/editing-css/

  6. I purchased the upgrade a while ago.

  7. I'll tag this thread so it's moved to the CSS Forum for you. Please be patient while waiting as it is a long weekend.

  8. Hi there,

    On WordPress.com there is no way to add additional sidebars to themes that do not have them built in, as that would require modifications to the themes themselves.

    If you want two sidebars, this link will help you identify which themes allow for that: http://theme.wordpress.com/themes/features/three-columns/

  9. @jackiedana
    Thanks for that confirmation - bookmarked!

  10. But jackiedana's reply is wrong. If a theme has at least one footer widget area (like Chateau does), you can use CSS editing to turn that area into a sidebar. Depending on the theme, this can range from rather easy to very complicated.

  11. justpi makes a good point. If there's another widgeted area, it can be moved via some crafty CSS, since a widgeted footer is just a sidebar that appears under content as opposed to the side. But you can't add new widgeted areas without modifying the theme itself.

  12. Thank you for all the helpful advice! I'd actually loved to keep the theme since I really like the look of it. If someone has any experience on turning the widgeted footer area in a sidebar and could help me with the coding I would love to give it a try!

  13. I managed to move the footer area, but now this second sidebar is quite narrow. I would love to adjust the width of the tag section (left side bar) and move the whole content to the left. Can somebody help me with that, please?

  14. Hey @healthninja,

    Check if this does the trick for you:

    #content {
        width: 65%;
    }
    .content-sidebar #primary {
        margin: 0 -30% 0 0;
    }
    #secondary {
        width: 30%;
    }

    You can tweak all values as you wish but the right margin of ".content-sidebar #primary" should equal to minus the width of "#secondary". Let me know if that's what you wanted :)

    (Your recipes look so awesome. I'm sure going to try some myself!)

  15. Hey @fabianapsimoes thank you so much for the code, sadly this does just help with adjusting the post area and the first sidebar on the right. The second one is actually the first footer widget area which I repositioned, do you think it is possible to somehow include it in the code? I tried some variations but they didn't do the trick.

    Happy cooking ;)

  16. Hey @healthninja,

    Oh, now I see what you mean. Sorry!

    Given the structure of your HTML, I believe it will be better if you place that text widget in your regular sidebar, instead of in the footer area. We can then use CSS to move the text widget out of the regular sidebar, placing it to its right. That's the final result you are aiming for, right?

    Reply back here whenever you get to move the widget to your regular sidebar, and I'll help you with the CSS to move things around :) You might even skip the <div> that is currently wrapping the links there, by the way. We can target it later, through Custom CSS, instead of using inline styles.

  17. No problem, it is so nice of you to help me!

    I have placed the text widget in the regular sidebar now. The position hasn't changed. The code I used for the text widget is:
    <div style="position: absolute; width:100px; top:483px; right:5px;">Content</div>

  18. Hey,

    You can remove the external div (the one with the absolute positioning details) and try the following CSS bits:

    .content-sidebar #secondary {
        float: left;
        margin-left: -90px;
        position: relative;
    }
    #text-13 {
        position: absolute;
        right: -115px;
        top: 35px;
        width: 100px;
    }
    .post-extras {
        width: 15%;
    }
    .hentry .post-date {
        left: 0;
    }
    .post-title > h1, .post-info {
        padding-left: 20%;
    }
    .post-entry {
        float: left;
        padding-left: 5%;
        width: 77%;
    }
    .content-sidebar #content {
        width: 65%;
    }

    Is that, more or less, what you had in mind? You can adjust the position of the text widget by tweaking the "top" and "right" values in the "#text-13" CSS rule. Please, let me know if there's any other details I can help you with :)

  19. That is exactly what I was looking for - thank you very much!
    I adjusted the values, the only thing left is the fine grey line that marks the right side of the content area. It is visible behind my side bar now and I cannot make it move closer towards the text. Any suggestions on this one? Otherwise everything is perfect!

  20. Great, I'm glad it worked :)

    To solve that issue, try making the following changes to the CSS you just added:

    • In the ".content-sidebar #content" CSS rule: Add "padding-right: 0;" + Change the value for the "width" property to "71%".
    • In the ".post-entry" CSS rule: Add "padding-right: 0;" + Change the value for the "width" property to "85%".

    Let me know if that does the trick for you :)

  21. It did! Thanks a lot for all the help, I am so so happy how it turned out!

  22. That's great to hear! You are welcome :)

Topic Closed

This topic has been closed to new replies.

About this Topic