How to extend sidebar color to the bottom of the page?

  • Unknown's avatar
    defpunk · Member ·

    Greets
    I’m wondering how to get the color I’ve chosen for my sidebar to extend to the bottom of each page automatically, regardless of how long / short it is. Right now the color stops where the widgets stop. Any help is much appreciated.
    URL: http://defpunk.wordpress.com

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    defpunk · Member ·

    If there’s an easy way to do it I’d also like to know how to border the sidebar with a 1px black border.

  • Unknown's avatar
    devblog · Member ·

    For what you want, Faux Columns is the way to go.

  • Unknown's avatar
    defpunk · Member ·

    Which means?

    Ah yes, forgot to mention I figured out the border thing so ignore the second part of my question.

  • Unknown's avatar
    areyoutargeted · Member ·

    Faux Columns:

    http://www.alistapart.com/articles/fauxcolumns/

  • Unknown's avatar
    devblog · Member ·

    you could’ve googled it, as probably areyoutargeted did…

  • Unknown's avatar
    areyoutargeted · Member ·

    Shhh! Don’t tell anyone about Google, it’s my secret edge!

    But actually, I was struggling with this issue about 2 days ago.

  • Unknown's avatar
    defpunk · Member ·

    Well thanks for responding in the first place. Forgive me if I forgot to mention that I did google it, but failed to understand how to achieve what I want achieved. What you linked me up to is only slightly more understandable for me than the stuff I found myself. Generally I managed to edit by trial / error and the fact that for basic tweaks CSS is relatively easy to guess out, but what concerns even only slightly more complex stuff I’m stumped. And yes, my first reaction is always to google something, forgive me for not being clear enough about that,

    Correct me if I’m wrong, but what I managed to understand from the page you linked me up to is put this code [ #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0; ] in the sidebar menu, changing the 50% to 100% if I want all of it colored, and uploading a tiny image of a grey background to replace with the above URL to make the entire sidebar grey for as long as the page, I tried that and it didn’t work. So obv I’m too stupid to get it, any step by step walkthrough as to how this is achieved in my case is much appreciated.

  • Unknown's avatar
    devblog · Member ·

    …I tried that and it didn’t work.

    for this to work, you need to put set the image as background of the enveloping element, in your theme, it would be “#wrapper”. So, the “#wrapper” definition, should look something like this:

    #wrapper {
background: #fff url(URL-TO-YOUR-IMAGE) 0 0 repeat-y;
position:relative;
height:100%;
width:780px;
border-left:1px solid black;
border-right:1px solid black;
margin:0 auto;
}

    Notice I replaced “background-color:” with “background:”.

    Also, you’d need to add background and padding properties to your “#footer” definition so it looks like this:

    #footer {
background: #000;
padding: 10px;
font-size:7pt;
position:relative;
color:#fff;
top:5px;
width:780px;
text-align:center;
margin:5px 0 0;
}

    You may need to play with the value(s) of the “padding” property.

    Recommendation
    For font sizes, use “em” or “%” units. “pt” units are for print media. “px” units are a no-no. You might find this useful:

    http://pxtoem.com/

  • Unknown's avatar
    defpunk · Member ·

    Thanks a lot for your effort, I appreciate it. I changed the #wrapper and the #footer code to that outlined by you, [replaced the URL with my own image] with and without pasting what I outlined above into #sidebar, and I don’t notice any changes either time. Again, sorry if what I’m doing wrong is obvious and I’m being blind / stupid here. It’s not really that big an issue, I guess the way it is now is good enough, so if I don’t end up getting this it’s not tragedy whatsoever.

    Maybe the size of the image is wrong? I just made the size a random relatively small picture, does it have to have certain proportions for this to work? And thanks again for your continued assistance.

  • Unknown's avatar
    devblog · Member ·

    One of the reasosn it didn’t work the first time is because there were other elements that needed to be modified (and which I should’ve checked as well).

    I made a background image for you, download it and upload it to your blog:

    also change the current definitions of the following selectors (they should look like this):

    #wrapper {
position:relative;
height:100%;
width:780px;
border-left:1px solid black;
border-right:1px solid black;
background: #fff url(URL-TO-THE-BACKGROUND-IMG) 1px 0 repeat-y;
margin:0 auto;
}

#insideWrapper {
position:relative;
top:0;
height:100%;
width:780px;
background: transparent;
text-align:left;
margin:0;
}

#sidebar {
position:left;
float:left;
width:210px;
left:40px;
text-align:left;
font-family:Arial;
color:#000;
font-size:7.7pt;
line-height:10pt;
text-transform:uppercase;
padding:15px;
}

#footer {
background: #000;
padding: 10px 0;
font-size:7pt;
position:relative;
color:#fff;
top:5px;
width:780px;
text-align:center;
margin:5px 0 0;
}

    That should do it. Let me know if you have any questions.

  • Unknown's avatar
    defpunk · Member ·

    That did the trick, thank you very much! If I’d realised how much code was involved I mightn’t have asked. As it is now, thanks a lot for the time and effort you put into helping me with this, I almost feel bad for taking up what looks to me like quite a considerable bit of your time. Anyhow, issue resolved, and thanks again.

  • Unknown's avatar
    devblog · Member ·

    Don’t mention it. Happy to help. I’ve spent hours helping others, but in your case, it wasn’t more than 5 minutes.

  • Unknown's avatar
    ssiegrist · Member ·

    I would like to do this as well, however, my sidebar is on the right side. I have tried adding ‘float’ to the code, but does not work. As an example, how may I edit the above code for a right-sided sidebar?

    -Scott

  • Unknown's avatar
    devblog · Member ·

    link to blog please

  • Unknown's avatar
    ssiegrist · Member ·

    Here ya go…thanks in advance.

    http://armwarmersguide.com/

    -Scott

  • Unknown's avatar
    devblog · Member ·

    Scott,

    For future reference, your blog is self-hosted, so your inquiries should be addressed at
    http://wordpress.org/support/

    Having said that, all you need to do is to create a background image with the sidebar background color on the right.

    The selectors you’d need to modify on your CSS are these:

    #page-body-wrapper

#post-content

#sidebar-wrapper

    You might need to modify others, but I do believe those above should suffice.

    The background image should be a property of the “#page-body-wrapper” selector, whereas the “#post-content” and “#sidebar-wrapper” background property should have a value of “transparent”.

    HTH

  • Unknown's avatar
    devblog · Member ·

    I’m sorry… I’m too tired that my sentences are a mess…

    whereas the “#post-content” and “#sidebar-wrapper” background property should have a value of “transparent”.

    Should read,:

    whereas the background property of the “#post-content” and “#sidebar-wrapper” should have a value of “transparent”.

  • Unknown's avatar
    ssiegrist · Member ·

    Thanks for the heas-up about .org and for the assistance.

    -Scott

  • The topic ‘How to extend sidebar color to the bottom of the page?’ is closed to new replies.