Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #990901

    on trying to style a bit the testimonial big slider i recognized that there was no choice which animation (slide sidewards, slide up/down or fade) is set.
    First see result here ( i love the deepL translation tool – and i saw that kind of testimonials) :
    https://webers-testseite.de/testimonial-styling/

    what to do is uploading a little perspective shadow

    and then do this to your quick css:

    .av-large-testimonial-slider .avia-testimonial_inner {
        background-color: #eee;
        display: inline-table;
        padding: 40px;
        border: 1px solid #aaa;
        position: relative;
        box-shadow: 0 3px 10px -8px #333;
        -webkit-transform:  skew(-3deg);
        transform: skew(-3deg);
    }
    
    .av-large-testimonial-slider .avia-testimonial_inner::before {
        content: "\e833";
        font-family: entypo-fontello;
        font-size: 70px;
        position: absolute;
        top: -45px;
        left: 15px;
        -webkit-filter: drop-shadow(2px 2px 3px #666);
        filter: drop-shadow(2px 2px 3px #666);
    color: #863c07
    }
    
    .av-large-testimonial-slider .avia-testimonial_inner::after {
        content: " ";
        background-image: url(//link-to-your-shadow-image/wp-content/uploads/testimonial-shadow.png);
        background-repeat: no-repeat;
        width: calc(100% + 60px);
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-position: bottom right;
        overflow: visible !important;
        background-size: 60px;
        opacity: 0.3;
    }
    
    #top .av-large-testimonial-slider .avia-slideshow-arrows a {
        margin-top: 50px !important;
        }
    

    but on that I noticed that there is no choice which animation the slider has
    for those who likes to have the choice i edited the alb element for child-theme use:
    https://webers-testseite.de/edited-enfold-alb-elements/#testimonial
    PS : this choice is only for big testimonial slider – because the small one looks ugly on that and grid makes no sence – so only if your choice is testimonial slider (large) the new input field is shown.

    PPS: if you don’t like the skew – get rid of that rule

    #991504

    Hey Guenter,

    Thanks for sharing! “I never have seen such a beautiful styled Testimonial – well done” :)

    Slide animations can be targeted using

    .avia-testimonial-wrapper[data-animation="slide_up"] { 
    /* Slide up */ 
    }
    
    .avia-testimonial-wrapper[data-animation="slide"] { 
    /* Slide */ 
    }

    Best regards,
    Yigit

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.