Set background colour for entire sidebar

  • Anonymous

    #3806

    Hi,

    I have made my widgets transparent (except for their content). I want to make the entire sidebar background coloured to separate it from the blog post/main column. Is there any way to do this?

    Thanks

    Mod

    Kenneth John Odle

    #26077

    Try adding this to custom css:

    #sidebar1 {background:#000000;}

    I’m not sure which sidebar you are using. Try using Firebug to make sure we’ve got the correct one.

    You’ll also want to change #000000 to the appropriate hex color code.

    Anonymous

    #26078

    Thanks Kenneth;

    I have done this for both sidebars, so,

    #sidebar1 {background:#000000;}

    #sidebar2 {background:#000000;}

    in case anyone wants to do this as well.

    Effect: this colours the side bar but ONLY where there are widgets in them. The colour stops below the lowest widget in the sidebar.

    I had imagined having the coloured sidebar run all the way down to the footer, framing (in my case) the centre post column.

    Also (in my case, depends on colours you choose) it makes visible that the sidebars are not aligned to the edge of the larger content area. In other words, the sidebars now float like boxes themselves (especially as they don’t extend down to footer), with padding at outside edges. I’m going to try to align them to the outside edges and add rounded corners so will post that if it works.

    Anonymous

    #26079

    As an odd sidebar related footnote;

    I made my widgets transparent with 0px box shadows. I wanted the contents to float within the sidebars, hence my need to colour the sidebars.

    But, after latest theme upgrade, this adjustment to the child theme no longer works, it must be made to the main style.css file as the child style.css won’t elliminate box shadow.

    Mod

    Kenneth John Odle

    #26080

    Effect: this colours the side bar but ONLY where there are widgets in them. The colour stops below the lowest widget in the sidebar.

    I had imagined having the coloured sidebar run all the way down to the footer, framing (in my case) the centre post column.

    <div>s will only extend as far as they are needed to contain something else. If you had no widgets, you would see no sidebars! This is a HUGE issue in css, and while there are solutions, none of them are simple. (Most involve javascript and/or magic pixie dust.) The only real way to get this to happen is to use a table, which presents an entirely new set of problems.

    this adjustment to the child theme no longer works, it must be made to the main style.css file as the child style.css won’t elliminate box shadow

    And you will have to make that change again after you update again. This is why you want to make changes through a child theme. Try adding !important after each declaration in your child theme stylesheet that’s not ‘sticking’. (Add it just before the ;)

    Mod

    Kenneth John Odle

    #26081

    Throw us a link and we can take a closer look. There may be other issues with your code that is causing this issue.

    Anonymous

    #26082

    Rounded corners on the sidebars for anyone stumbling through here in future…

    #sidebar1,

    #sidebar2 {

    -moz-border-radius: 5px 5px 5px 5px;

    -webkit-border-radius: 5px 5px 5px 5px;

    border-radius: 5px 5px 5px 5px;

    display: inline;

    float: left;

    margin-top: 4px;

    padding-bottom: 30px;

    }

    It makes the floating sidebars look better.

    Anonymous

    #26083

    OK so about making sidebar extend all the way from top of the page to the footer:

    PLAN A:

    If you have a pretty constant page height, say 3000px, then there is a workaround that seems to be easy to do.

    If you add a text widget to a sidebar at whatevr point you want to add blank space (below the last active widget I’d imagine), containing a table with the height=”3000″ (or set to whatever works for your page), then it will remain constant. Make the table & cell bkgd colour the same as the sidebar background colour, table border “0”.

    If you have adsense or affiliate code, it can be placed inside <div>s within the table and will (or at least does for me) show up normally.

    BUT, if you want to use standard WP widgets, they would have to go outside the table as usual. You would have to adjust the table height to fill whatever space you need to fill in that sidebar.

    BUT (#2) the table I am seeing has a hairline border in grey for some reason. Not sure where its coming from but I suspect css could fix it, unfortunately I am not so css-clever.

    PLAN B:

    Could work for one sidebar again where page height overall is fixed or doesn’t vary much. This is not so good for two sidebars, UNLESS the contents happen to be exactly the same height (which seems unlikely 99% of time);

    Adjust the padding-bottom: 2000px (or whatever px height fills your extra space):

    #sidebar1,

    #sidebar2 {

    -moz-border-radius: 10px 10px 10px 10px;

    -webkit-border-radius: 10px 10px 10px 10px;

    border-radius: 10px 10px 10px 10px;

    display: inline;

    float: left;

    margin-top: 4px;

    padding-bottom: 2500px;

    }

    Maybe you could simply separate out the sidebars so that you could have different padding for each?

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

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!