WordPress.org

Ready to get started?Download WordPress

Forums

Testimonials by Aihrus
[resolved] Background Image and/or column (36 posts)

  1. PMaids
    Member
    Posted 1 year ago #

    Hi,

    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.

    [IMG]http://i46.tinypic.com/34fh8qe.png[/IMG]

    http://wordpress.org/extend/plugins/testimonials-widget/

  2. PMaids
    Member
    Posted 1 year ago #

  3. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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

  4. PMaids
    Member
    Posted 1 year ago #

    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.

  5. PMaids
    Member
    Posted 1 year ago #

    Meant to say you sort of lost me there.

  6. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  7. PMaids
    Member
    Posted 1 year ago #

    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?

  8. PMaids
    Member
    Posted 1 year ago #

  9. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  10. PMaids
    Member
    Posted 1 year ago #

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

    Is this what I'm looking for?

  11. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    Yup

  12. PMaids
    Member
    Posted 1 year ago #

    Woohoo! Thanks Michael, you're a boss!

  13. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    Thank you for the compliment.

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

  14. PMaids
    Member
    Posted 1 year ago #

    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.

  15. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

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

  16. PMaids
    Member
    Posted 1 year ago #

    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.

  17. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    Your website URL to review sure would be very handy to help with debugging.

  18. PMaids
    Member
    Posted 1 year ago #

    Sorry about that.

    Our url is http://www.perimtermaids.com/test

  19. PMaids
    Member
    Posted 1 year ago #

    I ended up getting the background image to work, however, it only appears behind the scrolling text and not the title or header.

  20. PMaids
    Member
    Posted 1 year ago #

    Actually, I have the background working now. I just inserted a background image for that particular widget area.

    I was having a problem getting the text aligned as well, but that is working now too.

    My only problem at the moment is getting the title lined up correctly and changing its properties.

  21. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    @PMaids, the URL doesn't work. Can you please resend?

    For title lining up, use the widget ID and header type to target. Like #widget-3 h3.

  22. Bhavadasa
    Member
    Posted 1 year ago #

    I tried to follow the exchange above, but I'm just too clueless! I just spent about an hour (no exaggeration) with it, but I have gotten nowhere! Can I talk you into helping me step-by-step through this?

    Like PMaids, I want to include a background image behind the testimonial widget on my wp front page.

    I inserted <?php echo testimonialswidget_widget( $args ); ?> in the "myhome.php where I want it, but I can't figure out how to put the image behind it.

    Also, I would like to change the time it changes to the next quote. How do I do that?

    Would really appreciate your help please!!!

  23. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    Long story, short. CSS looks something like…

    .testimonialswidget_testimonialsNNN {
    background: #00ff00 url('smiley.gif') no-repeat fixed center;
    }

    Where NNN is the number, probably 10000, found in the HTML source code of your page where the Testimonials Widget is displayed.

    Alternately, you could put <?php echo testimonialswidget_widget( $args, 1234 ); ?> in your page and know that your resulting CSS would be something like…

    .testimonialswidget_testimonials1234 {
    background: #00ff00 url('smiley.gif') no-repeat fixed center;
    }
  24. Bhavadasa
    Member
    Posted 1 year ago #

    Thanks for the reply Micheal, much quicker than I thought it would be!

    I found the 10000 number in the source code.

    However, as far as the alternate, I put the code into my page as you said, but I am confuses as to where to find the 1234 code in the css. Also, even if I did find it, I don't know what to do with it. I don't understand how to make a background image appear in relation to that code.

    As for the time before the quote changes, I did find this: testimonials-widget/testimonials-widget.php and then within it found: `jQuery(this).removeClass('hovered') });
    setInterval('nextTestimonial$widget_number()', $refresh_interval * 1000);` I changed the 1000 to 3900 which slowed down the change enough to read it before changing to the next quote. Hope that's ok. It worked, so I guess it is.

    Anyway, hope you don't get fried out with my lack of understanding, and give up.

    Thanks in advance!

  25. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    The CSS class is dynamically generated. As such, you're not going to find it specifically in the TW CSS file. The reason being is that each Testimonials Widget is standalone so that many can be on a page.

    You really need to read up on the options and not change source code. That'll get you into deep trouble when security updates come out.

    Also, the NNN is on the website HTML source code when you look at example.com, not the Testimonials Widget plugin PHP.

  26. Bhavadasa
    Member
    Posted 1 year ago #

    I've adapted. I'm keeping the testimonial background the way it is. However, I'm still trying to find the proper place to slow it down. Can you help me with this?

  27. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    See http://s.wordpress.org/extend/plugins/testimonials-widget/screenshot-4.png?r=651571 for the widget Rotation Speed option. Alternately, if using shortcodes, look for the refresh_interval on http://wordpress.org/extend/plugins/testimonials-widget/.

  28. Bhavadasa
    Member
    Posted 1 year ago #

    That did it.

    I went to plugins > edit > testimonials-widget/testimonials-widget.php > public static $defaults > refresh_interval > [and changed] 'refresh_interval' => 5, [to] 15,. That did the trick.

    Thanks for the reply and patients!

  29. Michael Cannon
    Member
    Plugin Author

    Posted 1 year ago #

    Glad to know you're moving ahead.

    However, Argh…you edited source code, don't do that. You lose changes on every update.

    Use the widgets options panel or the shortcode options to set your refresh_interval=15. Look at the shortcode examples.

  30. Bhavadasa
    Member
    Posted 1 year ago #

    Sorry, I thought I had an option.

    OK, I've gone into the widgets and set the "Rotation Speed" in "Advanced Options" to 15, and saved it. Then undid the modification I mentioned earlier. I then tested the testimonial time, and it was back to 5 sec. The widget didn't do anything to the shortcode. What am I missing?

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic