[resolved] Top-to-bottom gradients in sidebars (14 posts)

  1. betsyg
    Posted 7 years ago #

    I've looked at a few models and I don't think either one is going to work for me. I'm modifying a theme and want to put a top-to-bottom gradient in the sidebar, and I want it to go all the way to the footer. I am pretty sure if I wanted to get a solid to the bottom, I could use an image or the right width and use "repeat-y" to get it to the bottom. I found a template that uses a gradient to the bottom, but uses "containers" which my template does not, and I suspect that is what helps it fill out to the bottom. When I changed the background on my sidebars, it only worked to the bottom of the text.

    I could probably manage it with a left-to-right gradient by doing the repeat-y, but I'd wanted to do a top-to-bottom. Or at least know how to. Thanks.

  2. jerhoyet
    Posted 7 years ago #

    You want the gradient to expand with the sidebar vertically?

  3. StrangeAttractor
    Posted 7 years ago #

    This really depends on how your theme is set up, but I'll generalize what I think is going on -- you put a background on the sidebar, but it only extends as far as the content of the sidebar. So your sidebar and content area appear to have unequal length.

    The most useful trick in getting any image down the whole sidebar without regard to the contents of the sidebar is to incorporate the sidebar imagery in the background of the entire site or container div. Thus, what seems to be the sidebar background is actually part of the entire background -- it's an illusion that the background is separately applied to the sidebar.

    This is a very common technique in CSS, but it can be hard to find the right terms to pull it up in google. Here's one explanation of the technique:


  4. betsyg
    Posted 7 years ago #

    Not just expand, but fill to the bottom (i.e., to the footer). If you just use background, it'll only fill as much sidebar as has content in it. The themes I've seen have used a gif file of the correct width for the background and then use repeat-y to get it to fill vertically all the way to the footer.

  5. jerhoyet
    Posted 7 years ago #

    Oh, okay okay. I thought you meant to have the gradient expand dynamically depending on the size of the sidebar, that would be crazy hard. lol

    What you could do is wrap the entire area in a div (both sidebars and content area, if you're trying to do this on the theme currently visible on: http://thebetsygspot.com/). Then apply a background image to that wrapper that matches your sidebars and content area and such.

    This way when the sidebar stops extending, the background image in the wrapper will continue to the footer, making it appear that the sidebar continues downward.

    There's a name for that technique, but I'm not sure of it. Faux background or something.

  6. Ivovic
    Posted 7 years ago #

    I'm using that effect myself.

    neither my sidebar nor my content area have a background - the background is on a div containing both the sidebar and the content, as jerhoyet pointed out.

  7. betsyg
    Posted 7 years ago #

    I'm catching on to this CSS stuff reasonably well but wonder if you have a code example. Confess that with all the mucking I have been doing with the CSS and php files, I haven't taken the time to figure out how div works, just learning what I need to know on a, um, need-to-know basis.

  8. betsyg
    Posted 7 years ago #

    I did look at Ivovic's CSS file and don't see how it's done. BTW, nice page.

  9. Ivovic
    Posted 7 years ago #

    cheers :)

    think of it this way...

    #page { background image goes here }
    #content {float: left;}
    #sidebar {float: right;}
    #footer {clear: both;}

    <div id="page">
      <div id="content">content area</div>
      <div id="sidebar">sidebar stuff</div>
      <div id="footer">footer text</div>

    now, with the content on the left and the sidebar on the right, both with transparent backgrounds, the only thing that shows through is the background image for #page, yes?

    so just make the image *look* as though the sidebar area has a different background.

    I dont know how better to explain it.


    my theme is based on the default kubrick which does the same thing... copy/paste that link into your address bar so it doesn't complain about hotlinking.

  10. betsyg
    Posted 7 years ago #

    If only the code in these templates looked anything like that...I get the div thing after I rtfm-ed, but all the pieces I'd want to put in the section are spread all over the place and I can't tell where to put the new div.


    I think I am going to jury-rig it as I've seen other people do, which is make a background that's as wide as the page, put my gradient 200 pixels on the left and 200 pixels on the right (the sidebar width), and use it as the page background with a repeat-y. I just have to do my gradients so that one will bleed into the other, except I'm not as facile with photoshop as my son is so I will have to wait until he gets home. You can see the sad attempt at http://www.thebetsygspot.com. It's a pixel off on the right side.

    Thanks, you guys are a big help.

  11. bradstinyworld
    Posted 7 years ago #

    it is best to do it in your style sheet and if you know how large your page is roughly you can make your gradient the right size easy enough.

    your css will look something like this
    sidebar{background: url(images/gradient.png} repeat-x;}

  12. betsyg
    Posted 7 years ago #

    I actually thought that method was a kluge (I had figured that one out myself) and was hoping there was a less klugey way to do it. I ended up using that method anyhow, being unable to figure out the container method that I'd seen in another theme that seemed to do a better job at what I want. The top is a gradient, and then it peeters down to solid...

    Did a different effect instead (using the above method)...Not what I wanted but there have been a few things I've had to settle for.


  13. bradstinyworld
    Posted 7 years ago #

    want gradient to solid no big deal. Make the gradient the size you want it figure out what the bottom color of your gradient is and add background-color: #xxxxxx; to the

    sidebar{background: url(images/gradient.png} repeat-x top left; background-color: #xxxxxx; }

    You are making this a lot bigger deal than it needs to be for a small theme element. Trying to be clever in your themes seldom works out the way you plan. Stick to good solid coding that works for 99.9% of browsers and you will be better off.

  14. betsyg
    Posted 7 years ago #

    Uh, light dawns. I did not get that you would put the second gradient color in the background. Der. You should write doc.

    Whether it's a small theme element is a matter of opinion...but I wasn't trying to be clever, I just didn't get it. Thanks for being so clear.

Topic Closed

This topic has been closed to new replies.

About this Topic