How do I change the width of my sidebars?

Community Forums Forums Design Tips and Tricks How do I change the width of my sidebars?

This topic is: not resolved

This topic contains 3 replies, has 4 voices, and was last updated by  afmastro 1 year, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #3397

    vbrasil
    Participant

    I want to change the width of my sidebar widget areas. I tried to change it in the styles.css folder and what occurs is the left side bar goes down. I am assuming because there is not enough width in the frame. I need to increase the size of the left sidebar 40px. I can reduce the right sidebar by the equivalent.  If I do reduce the right by the equivalent, I have pages on the site that use only the right sidebar and that may through off the main content section. So I need to change that as well, or if possible I can change it for this one page that uses both right and left content bars.

     

    Please help

    #5515

    Brislon
    Participant

    I’m trying to do the same – but can’t find any information on how. Did you find the answer?

    Tim

    #5556

    Susan
    Moderator
    Post count: 7984

    If you wish to change the width of your sidebar, you need to change the width of other elements of your stylesheet as well.

    This mark-up guide should assist you in determing what to look for in your stylesheet to adjust:

    http://my.studiopress.com/docs/visual-markup-guide/


    Susan @ Graphically Designing I’d love to customize your website! I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

    #6639

    afmastro
    Participant

    Thanks for the visual markup guide. That was very helpful.

    I used this guide to change the column side bar and column widths, and I had an unintended consequence.

    I’m using the Bee Crafty Theme, and the sidebar / content / sidebar layout.

    I want #sidebar-alt and #sidebar to be 235 px each and #content to be 470px. Basically, I want the content to take up 1/2 the #inner area and each sidebar to take up 1/4 of the #inner area.

    I seem to have achieved that, except now the right-hand sidebar (#sidebar) is hanging out at the bottom of the screen.

    If you want to see, it is at http://upswingbabynames.com

    I think I need to change one of the float rules from right to left or left to right, but I’m not sure which one since my CSS is very rusty, as you can probably tell. Please excuse all of the CSS, but here is what I did.

    I would really appreciate it if some could lead me in the right direction. Thanks!

    ————————————————————————————————————————

    [The #inner rules/settings stayed the same]

    /***** Content-Sidebar Wrapper ********************/

    #content-sidebar-wrap {
    float: left;
    width: 705px;
    margin: 0;
    padding: 0;
    }

    .sidebar-content #content-sidebar-wrap, .content-sidebar #content-sidebar-wrap {
    width: 940px;
    }

    .sidebar-sidebar-content #content-sidebar-wrap, .sidebar-content-sidebar #content-sidebar-wrap {
    float: right;
    }

    /***** Content ********************/

    #content {
    float: left;
    width: 470px;
    margin: 0;
    padding: 0 5px;
    }

    .sidebar-content #content, .sidebar-sidebar-content #content {
    float: right;
    margin: 0;
    }

    .sidebar-content #content, .content-sidebar #content {
    width: 624px;
    margin: 0;
    }

    .sidebar-sidebar-content #content {
    float: right;
    width: 475px;
    margin: 0;
    padding: 0;
    }

    .sidebar-content-sidebar #content {
    width: 475px;
    margin: 0;
    padding: 0;
    float: left;
    }

    .full-width-content #content {
    width: 920px;
    margin: 0;
    }

    [I left the rest of the #content rules/settings unchanged]

    /***** Sidebar & Sidebar-Alt ********************/

    #sidebar {
    width: 235px;
    float: right;
    display: inline;
    font-size: 13px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    }

    #sidebar-alt {
    width: 235px;
    float: left;
    display: inline;
    font-size: 11px;
    margin: 0;
    padding: 0;
    }

    .sidebar-content #sidebar, .sidebar-sidebar-content #sidebar {
    float: left;
    }

    .content-sidebar-sidebar #sidebar-alt {
    float: right;
    width: 210px;
    }

    .sidebar-sidebar-content #sidebar-alt, .sidebar-content-sidebar #sidebar-alt {
    float: left;
    width: 210px;
    }

    #sidebar .widget, #sidebar-alt .widget {
    margin: 0 0 15px 0;
    padding: 0 0 10px 0;
    }

     

    [I left the rest of the #sidebar and #sidebar-alt rules/settings unchanged]

     

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.