• Can you tell me how to change the background of the testimonial box to a different color (other than white) and how to change transparency? For example, I want to have a testimonial box with a green background and for it to be 50% opacity on the full width image it is on top of.

    Scroll to bottom of this page to see example of testimonial box over an image which I want to revise: https://www.miamimxparksupport.com/?page_id=1970

Viewing 4 replies - 1 through 4 (of 4 total)
  • Can you add css styling to hb-testimonial (not positive this is where you are talking about)? That changes it for me.

    Right now it has

    //
    .hb-testimonial {
    padding: 20px;
    border: 1px solid #E1E1E1;
    background: none repeat scroll 0% 0% #FFF;
    border-radius: 3px;
    margin-bottom: 20px;
    position: relative;
    }
    //
    Change the background to whatever you prefer.
    //
    background: rgba(62,188,74,0.5);
    //
    would be green and 50% opacity.

    You can change your style.css if you are using a child theme or add custom css to your theme if it has it or add a plugin like Simple Custom CSS to add it.

    Thread Starter littleracer1

    (@littleracer1)

    Tx for reply! Can you clarify exactly where I make this change? I would like to change one testimonial page on a page with a few. The one I want to change is on top of a full width section. Here is the code I found for it when I select “Edit Page”:

    [fullwidth_section background_type=”image” text_color=”dark” image=”3776″ parallax=”yes” padding_top=”150″ padding_bottom=”150″][testimonial_box type=”normal” count=”1″ category=”christel-allen” columns=”1″ orderby=”date” order=”DESC”][/fullwidth_section][/vc_column][/vc_row]

    Can I add something here to directly change background for “Christel Allen’s testimonial? Here is my page to see what I’m referring to: https://www.miamimxparksupport.com/?page_id=1970

    When I open Editor I don’t see code which would indiciate I could change there….

    Here is the code in Editor:

    <?php
    function hb_testimonial_box ( $post_id ) {
    $testimonial_post = get_post($post_id);
    if ( $testimonial_post ) {
    setup_postdata($testimonial_post);
    ?>
    <div class=”hb-testimonial”>
    <?php the_content(); ?>
    </div>

    <?php
    $author_image = vp_metabox(‘testimonial_type_settings.hb_testimonial_author_image’);
    $author_name = vp_metabox(‘testimonial_type_settings.hb_testimonial_author’);
    $author_desc = vp_metabox(‘testimonial_type_settings.hb_testimonial_description’);
    $author_desc_link = vp_metabox(‘testimonial_type_settings.hb_testimonial_description_link’);

    if ( $author_image ) {
    $author_image = hb_resize(null, $author_image, 60, 60, true ); ?>
    <img src=”<?php echo $author_image[‘url’]; ?>” width=”60″ height=”60″ class=”testimonial-author-img”/>
    <?php } ?>

    <?php if ( $author_name || $author_desc ) { ?>
    <div class=”testimonial-author”>
    <?php if ( $author_name ) { ?>
    <h5 class=”testimonial-author-name”>
    <?php echo $author_name; ?>
    </h5>
    <?php } ?>

    <?php if ( $author_desc && $author_desc_link ) { ?>
    ” class=”testimonial-company”><?php echo $author_desc; ?>
    <?php } else if ( $author_desc ) { ?>
    <?php echo $author_desc; ?>
    <?php } ?>
    </div>
    <?php }
    wp_reset_postdata();
    }
    }
    ?>

    Thread Starter littleracer1

    (@littleracer1)

    I tried posting this under the optiosn for my theme. There is a section called “Custom CCS” but it didnt work. Im doing something wrong… not sure what… ??

    .hb-testimonial {
    padding: 20px;
    border: 1px solid #E1E1E1;
    background: rgba(62,188,74,0.5);
    border-radius: 3px;
    margin-bottom: 20px;
    position: relative;
    }

    The style for hb-testimonial is in your style.css. I don’t think you can use this to individual boxes, though. You may be able to create a new style for that box adding it inline where you add the text for that testimonial, depends on whether it lets you add classes to it. That I’m not sure of without seeing how the testimonials are added.

    To change the style for hb-testimonial, you could try putting it in the custom css again, but adding !important after the commands — background: rgba(62,188,74,0.5) !important; — to see if that works. I notice you may also need to change hb-testimonial:after to change that little triangular callout at the bottom. But, again, this is for all the boxes.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Testimonial Box Background and Trasnparency’ is closed to new replies.