Adjust Widget Width Independently

  • atraael

    #2034

    I am using the 3 column layout and want to make the left sidebar thinner and and right sidebar wider (and checked the forum extensively for an answer). I’ve already made a child theme and am able to adjust the width of the entire layout and the center column to make room for the changes to the sidebar but no changes I make alter the size of the widgets or they change the amount of sidebar space on BOTH sides but do not change the size of the widgets themselves. (Have Chrome and Firebug to isolate appropriate codes).

    I wanted to start with the right sidebar and found a post by Khairul-Syahir that mentioned making changes to

    #sidebar-right
    .sidebar div.sidebar-wrap

    But when I checked the style.css I didn’t find a “sidebar right” code. I also looked for a plugin that could make these adjustments and have been Googling all night, to no avail.

    Any help would be appreciated.

    My site is http://www.theblackchannel.net/tbcblog

    Mod

    Kenneth John Odle

    #18290

    There is no “sidebar right” because Graphene allows sidebars to be on either side. The code you are looking for is #sidebar1 and #sidebar2. You can just set the width for each one indepedently.

    Sidebar styling starts at line #1750 in the stylesheet.

    Hope this helps,

    Ken

    atraael

    #18291

    Thank you. I found that part of the code and made adjustments, however, for the code I have been making the adjustments to it expands both sidebars. I even tried to rework the code (I am NOT a coder by any stretch of the imagination) to specity the one on the right but nothing happened. Here’s what I’ve been working with. Correct me if I’m wrong:

    .three-columns #sidebar1, .three-columns #sidebar2 {
    width: 227px;

    In the CSS stylesheet I’ve always been working with

    #sidebar1,
    #sidebar2 {
    display: inline;
    float: left;
    margin-top: 4px;
    padding: 0 15px 30px;
    width: 255px;

    If this is the wrong then I’m totally lost.

    Another thing is that the times it did expand the sidebar it expanded the black space between the siedebars and the middle column but didn’t expand the size of the widget header/box graphics itself.

    atraael

    #18292

    I know my coding is not the best but I believe I found a workable solution. Here are the codes I added and modified in the child them style.css It made the left sidebar and widgets thinner and expanded the right sidebar and widgets.

    .three-columns #sidebar2 div.sidebar-wrap {
    width: 250px;
    }

    .three-columns #sidebar1 div.sidebar-wrap {
    width: 150px;
    }

    .three-columns #sidebar1 div.sidebar-wrap {
    width: 150px;
    }

    .three-columns #sidebar1 {
    width: 175px;
    }
    Mod

    Kenneth John Odle

    #18293

    Any selectors you separate with a comma will share the same characteristics you describe for them. So in your first example:

    .three-columns #sidebar1, .three-columns #sidebar2 {
    width: 227px;

    you are setting both sidebars to have a width of 227px.

    If the last bit of code you provided works for you, that’s good, but it’s a bit puffy. If you’re always going to use a three-column layout, you should be able to get by with:

    #sidebar1 {width:175px;}
    #sidebar2 {width:250px;}

    Of course, it’s easier to give more precise help if you provide a URL.

    Cheers,

    Ken

    rock14

    #18294

    Hi guys,

    How do I allign the sidebar 2 properly? Or I need to change the width of something else?

    I used the followed code, but the sidebar 2 when aligned left goes in the post frame, and in the right get out of the layout

    .three-columns #sidebar2 div.sidebar-wrap {
    width: 230px;
    }

    .three-columns #sidebar1 div.sidebar-wrap {
    width: 130px;
    }

    .three-columns #sidebar1 {
    width: 155px;
    }

    .three-col-center .post {
    width: 400px;
    }

    #sidebar2 {
    float: right;
    }

    Anonymous

    #18295

    What’s the URL where you are experiencing the issue?

    Anonymous

    #18297

    Change the very last part from this:

    #sidebar2 {
    float: right;
    }

    To this:

    #sidebar2 {
    float: right;
    margin-left: 40px;
    }

    rock14

    #18298
    #sidebar2 {
    float: right;
    margin-left: 40px;
    }

    I put that, but for some reason it didn’t recognize the margin-left,

Viewing 10 posts - 1 through 10 (of 11 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.