Top-to-bottom gradients in sidebars

You want the gradient to expand with the sidebar vertically?

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:

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

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.

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: https://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.

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.

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.

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

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>
</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.

https://www.ivovic.net/wp-content/themes/ivovic.photo/images/middle.gif

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.

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.

Sigh.

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 https://www.thebetsygspot.com. It’s a pixel off on the right side.

Thanks, you guys are a big help.

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;}

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.

Thanks.

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.

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.