Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • May 31, 2015 at 6:12 am #452162
    strengthcoaching

    1. Is there a way to make the compact version have the back and forward arrows the large version has?
    2. Also, is there a way to make it so it’s not dynamic but has a fixed height and the text just adjusts to fit the dimension it doesn’t keep making content underneath it on the page change vertical location?

    June 1, 2015 at 5:09 am #452323
    Josue

    Hi,

    Can you post the link to the page where you have this?

    Regards,
    Josue

    June 1, 2015 at 5:43 am #452331
    strengthcoaching

    http://www.strengthinnumberscoaching.com/coaching

    June 1, 2015 at 7:08 am #452346
    Josue

    Hi,

    1. Open /enfold/config-templatebuilder/avia-shortcodes/testimonials.php and look for line 289:

    $controls = false;

    Replace it by this:

    $controls = true;

    2. Add this to Quick CSS / child style.css:

    .avia-testimonial {
    min-height: 300px !important;
}

    Regarding 1, you can have this mod on your child theme by copying the testimonials.php file to your child theme directory and applying this:
    http://kriesi.at/documentation/enfold/add-new-or-replace-advanced-layout-builder-elements-from-child-theme/

    Regards,
    Josue

    June 1, 2015 at 4:24 pm #452611
    strengthcoaching

    1. Done, piece of cake, but is there a way to…
    A. Make those arrows only show up on roll over and mobile?
    B. Make them always at the middle or top of the box
    C. Make them skinnier so they don’t obstruct the content

    2. I see what that does. I don’t like it because of all the extra empty space on the page. I’ll just leave it the way it was.

    June 1, 2015 at 10:36 pm #452811
    Josue

    Hey!

    A. Use the following to make them appear on hover (what did you mean only in mobile? you should know that there is no ‘hover’ in mobile):

    .avia-slideshow-arrows {
    display: none;
}

.avia-testimonial-wrapper:hover .avia-slideshow-arrows{
    display: block;
}

    B. They are always in the middle from what i see.

    C. Use the following to make them skinnier (adjust as needed):

    #top .avia-slideshow-arrows a{
    height: 30px;
    width: 30px;
    line-height: 32px;
    font-size: 12px;
}

.avia-slideshow-arrows a:before{
    line-height: 32px;
}

    Cheers!
    Josue

    • This reply was modified 9 years, 5 months ago by Josue.
    June 1, 2015 at 10:47 pm #452817
    strengthcoaching

    A. Perfect

    B. ok

    C. I’ve done this adjustment to get them close to the shape I want but now they aren’t centered and I don’t know how to fix it. Also, is there a way for them to be both be farther to the outside or no? Still covers words when you roll over and if I can avoid that I’d like to.

    #top .avia-slideshow-arrows a{
    height: 80px;
    width: 15px;
    line-height: 32px;
    font-size: 12px;
}

.avia-slideshow-arrows a:before{
    line-height: 80px;
}
    June 1, 2015 at 11:22 pm #452827
    Josue

    Sure, modify the first part of that code to:

    #top .avia-slideshow-arrows a{
    height: 80;
    width: 15px;
    line-height: 32px;
    margin: -30px -30px 0; /* Added this */
}

    Regards,
    Josue

    June 1, 2015 at 11:37 pm #452834
    strengthcoaching

    1. ok that helps with them being farther to the sides
    2… but it doesn’t recenter them vertically. How do I get them recentered vertically?
    3. Is there a way to add code to make them hidden on mobile? There appears to be a swipe function so I’ll just leave that instead of the arrows for mobile.

    June 1, 2015 at 11:51 pm #452839
    Josue

    Change margin to:

    margin: -60px -10px 0;
    June 1, 2015 at 11:52 pm #452840
    strengthcoaching

    Thanks. I was just editing my last post when you wrote this. Please see above.

    June 2, 2015 at 12:02 am #452845
    Josue

    3. They should be automatically hidden on mobile, if they aren’t change the :hover code to:

    @media only screen and (min-width: 767px) {
.avia-testimonial-wrapper:hover .avia-slideshow-arrows{
    display: block;
}
}

    4. Testimonials sliders doesn’t support this yet, however i believe LayersSlider does, maybe you can re-build the testimonials slider with that.

    Regards,
    Josue

    June 2, 2015 at 12:18 am #452852
    strengthcoaching

    3. Do you mean add this? I don’t have this in there at all yet.

    4. Well it works :) I deleted #4 because I swiped and they work!

    June 2, 2015 at 12:27 am #452855
    strengthcoaching

    I added that code and it didn’t change anything. They don’t show up initially. If you touch the testimonial or swipe it they show up and then don’t go away. I don’t want them to show at all on mobile.

    June 2, 2015 at 12:39 am #452857
    Josue

    Ok add this:

    .avia_mobile .avia-slideshow-arrows{ display: none !important; }

    Regards,
    Josue

    June 2, 2015 at 1:04 am #452864
    strengthcoaching

    Great! All set.

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Testimonial Slider Tweak’ is closed to new replies.