Use top, middle and bottom images on sidebar widgets

[draphael]

I'm building a website for a friend who's a teacher and author. We want each widget in the primary sidebar (which is located on the right side of the page) to have a top, middle and bottom image, so that a chalkboard effect is created.

Here's an image of what I'm trying to accomplish:
http://www.indra-net.com/sidebar.jpg

Top image would be the top wood bar of the frame;
Middle image would be a black slate with the left and right bars that form the frame
Bottom image would be the bottom wood bar of the frame.

But I have spent half the day trying to figure out how to do this, with no success.

I can figure out how to add one overall background image for the widget, but not to add three different backgrounds for the top, middle and back.

I did find some (very old) instructions on a forum (elsewhere) and tried it, tinkered with it for a couple hours and couldn't get it to work with this Genesis theme (editing functions.php and the css). But I am not all that knowledgeable about customizing Genesis, so probably there is just something big I'm messing.

We're using the Lifestyle theme. The theme, Genesis and WP are all the most current versions.

I sure would appreciate any guidance you can provide! Thanks so much.
all best,
Denise

[Tim Squires]

Hi, I'm not sure that I follow. Do you really need so many separate images? Can you create one single chalkboard image to use as your widget background, with all frames in place, and then style the text over the top?

---

timsquires.com.au

[draphael]

Hi Tim,

Thanks for your reply. If no pages were added over time, that would work, But we need a flexible solution, as each widget will have navigation menus in them. They'll need to be expandable as my client adds new pages/books to his site.

I Googled and found this:
http://wordpress.org/support/topic/how-to-add-top-middle-repeating-and-bottom-image-for-each-widget-thank-you?replies=29
and also another page with similar instructions.

but I can't figure out what function I would alter (or add??) for this Genesis theme. The code in the example didn't work for me.

Any suggestions would be greatly appreciated!

[Tim Squires]

Hi Denise,
That does sound tricky. Sadly my coding skills aren't good enough to figure that one out just yet, but I do have another suggestion from a design point of view.

Currently your concept relies strongly on the use of the wooden frames around the chalkboard. Would it simplify your problem if you could drop the wooden frames, but still maintain a strong chalkboard effect?

Take a look at this tutorial on creating a chalkboard effect. It requires using Adobe illustrator, and you could just use the background of this idea without worrying about the type, but if you don't have that program, perhaps you may be able to source a stock image of a chalkboard. Notice how the chalkboard feeling is very effective - even without frames around the edge:

How to Create a Chalkboard Vector

Even though this example doesn't have frames, the chalkboard effect is really strong. It may be possible to replicate this by using a repeating section of chalkboard image in the background of your widget area, so that it would expand/shrink according to the content placed within it.

Again, I'm Just thinking that it may be easier to achieve your desired effect without so many images to worry about.

I hope that helps.

Also, do you have a link to your site available?

Tim

---

timsquires.com.au

[Author]

Posts