-
AuthorPosts
-
July 28, 2018 at 7:46 am #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
July 30, 2018 at 1:34 pm #991504Hey 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 -
AuthorPosts
- You must be logged in to reply to this topic.