Support » Plugin: Testimonials Widget » Background Image and/or column

  • Resolved PMaids



    I’m wondering if it would be possible to put a background behind the scrolling testimonials. I’ve already made a .png file for them to scroll on top of, but I’m not sure how to add it to the code.

    If this way isn’t possible, where would code to create a background go? CSS styles? PHP?

    Here’s an example of what I’m trying to accomplish.


Viewing 15 replies - 1 through 15 (of 35 total)
  • Plugin Author Michael Cannon


    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

    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.

    Meant to say you sort of lost me there.

    Plugin Author Michael Cannon


    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.

    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?

    Plugin Author Michael Cannon


    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.

    <div class=”testimonialswidget_testimonials testimonialswidget_testimonials100000″><div style=”display: block;” class=”testimonialswidget_testimonial testimonialswidget_active”>

    Is this what I’m looking for?

    Plugin Author Michael Cannon



    Woohoo! Thanks Michael, you’re a boss!

    Plugin Author Michael Cannon


    Thank you for the compliment.

    What could I do to improve the documentation to have solved your question in the first place?

    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.

    Plugin Author Michael Cannon


    Would you mind writing up quick CSS FAQ for what you did? I’d love to add and link back to you.

    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.

Viewing 15 replies - 1 through 15 (of 35 total)
  • The topic ‘Background Image and/or column’ is closed to new replies.