Thread Starter
PMaids
(@pmaids)
You can add the background image via CSS. FAQ 34/35 describe the widget and list CSS used for each.
If you background image is applicable to to the widget itself, then you need to apply it to the widget. However, say the image only goes behind the testimonial and not the heading, then you can write something like the following to your theme’s custom.css file.
.testimonialswidget_testimonialsNNN {
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
Keep in mind that the NNN part of testimonialswidget_testimonialsNNN should be replaced with the widget instance number. Check your webpage’s HTML source for that.
CSS background Property Reference
Thread Starter
PMaids
(@pmaids)
I’m sorry Michael, you sort of me there.
What’s the difference between applying it the widget and applying it to the .css file? Did you mean apply it to the actual testimonial widget?
I have a small box image created that I want the testimonial heading and the testimonials to float over. So I guess the background image just needs to apply to the small widget area that I am using the testimonial plug in within.
Thread Starter
PMaids
(@pmaids)
Meant to say you sort of lost me there.
You should edit your theme’s style.css file than the plugin’s.
You’re correct about applying the CSS treatment to the widget containing the testimonials.
Thread Starter
PMaids
(@pmaids)
I think I’m following you now. I need to edit the styles.css file, and can also edit a text box inside the widget itself.
However, I’m a little unsure of where this NNN is, and is it always 3 numbers? Here is an image of the code when I highlight the testimonial widget area. Am I getting close?
Thread Starter
PMaids
(@pmaids)
What’s your website URL?
Have you looked at the source code of your website? Look for the CSS tag testimonialswidget_testimonials, but one with 1 or more numbers attached to it. That’s your unique identifier.
Thread Starter
PMaids
(@pmaids)
<div class=”testimonialswidget_testimonials testimonialswidget_testimonials100000″><div style=”display: block;” class=”testimonialswidget_testimonial testimonialswidget_active”>
Is this what I’m looking for?
Thread Starter
PMaids
(@pmaids)
Woohoo! Thanks Michael, you’re a boss!
Thank you for the compliment.
What could I do to improve the documentation to have solved your question in the first place?
Thread Starter
PMaids
(@pmaids)
I think your documentation is probably fine for someone that knows what they are doing…i.e., not me.
Unless you want to include a short CSS tutorial.
Would you mind writing up quick CSS FAQ for what you did? I’d love to add and link back to you.
Thread Starter
PMaids
(@pmaids)
I’d love to, as soon as I get this all figured out.
After I insert that code into my styles.css file, should the image appear behind the testimonial widget or do I need to insert the widget short code into a text box?
I’m trying to confirm with the developer that I have the right instance number. Just to be sure, I paste what you gave me plus the instance number into the styles.css file. I am seeing the widget working, just not background image.
