CSS Code for editing testimonial widget - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
August 27, 2023 at 4:00 am #1417227
Dzimnikov
Participant
Hey, QQ here. I’m working on a site, and need help with CSS on this page: https://mygolfcoaches.com/coaches-rich-abele/

At the bottom of the page, I want to replace the background of the testimonials with an image: https://mygolfcoaches.com/wp-content/uploads/2023/08/horizantalgolfbackground.jpg

I can find the element that I need to target when doing inspect, but its not translating to when I try to actually add the CSS code to the back end. Can you please help me here?

Thank you so much as always.

P.S. – on mobile, it seems like there is overlap between the testimonial text and the large circles that allow you to rotate through the testimonials. Is there a way that I can make the circles smaller? Or move them a bit farther away from the text?
- This topic was modified 11 months ago by Dzimnikov.
August 27, 2023 at 1:47 pm #1417252
Mike
Moderator
Hey Dzimnikov,
Thank you for the link to your site, it looks like the testimonials are in a color section that is light green now, have you tried adding the background image to the color section, or do you want the background image limited to the testimonials only with the light green also showing?
To make the arrows smaller on mobile devices try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
@media only screen and (max-width: 500px) { 
#top #testimonialtemp .av-slideshow-ui.av-loop-endless .avia-slideshow-arrows > a, #top #testimonialtemp .av-slideshow-ui.av-loop-manual-endless .avia-slideshow-arrows > a, #top #testimonialtemp .av-slideshow-ui .avia-slideshow-arrows.av-visible-prev > a.prev-slide, #top #testimonialtemp .av-slideshow-ui .avia-slideshow-arrows.av-visible-next > a.next-slide {
	    width: 30px;
	    height: 30px;
}
#top #testimonialtemp .av-control-minimal .avia-slideshow-arrows a:before {
    line-height: 30px;
}
#top #testimonialtemp .av-large-testimonial-slider .avia-slideshow-arrows a {
    font-size: 20px;
}
}
```
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike
August 27, 2023 at 7:31 pm #1417263

Dzimnikov
Participant

Yes, I would like the background image limited to just the testimonial area, with the light green around it.

Will try the CSS code for the arrows shortly.

Thank you so much!

August 27, 2023 at 8:41 pm #1417267
Mike
Moderator
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
#testimonialtemp .avia-testimonial-wrapper {
  background: url('https://mygolfcoaches.com/wp-content/uploads/2023/08/horizantalgolfbackground.jpg');
  background-size: contain; 
  padding: 50px;
  margin: 0;
}
#testimonialtemp .avia-slideshow-arrows a {
  transform: translateY(150%);
}
#testimonialtemp .avia-testimonial-content.av_inherit_color p,
#top #testimonialtemp .avia-testimonial-wrapper .avia-testimonial-name {
  color:#fff;
}
#top #testimonialtemp .avia-slider-testimonials.av-control-minimal-dark .avia-slideshow-arrows a {
    color: #fff;
}
#top #testimonialtemp .av-control-minimal-dark .avia-slideshow-arrows a:before {
    border-color: #fff;
}
```
I assumed that you wanted the text and arrows white also so I included that css, this is the expected results:

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike
August 27, 2023 at 10:43 pm #1417277

Dzimnikov
Participant

Hey, it looks a lot better, but still a few kinks.

Desktop: the left arrow is indented more than the right one. Is there a way to even that out?

Mobile: Same issue as above with the arrows. The text is too narrow… and the review itself doesn’t align vertically with the name of the person who left it.

Thank you so much for all your help!

August 27, 2023 at 10:57 pm #1417280
Mike
Moderator
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
#top #testimonialtemp .avia-slideshow-arrows a.prev-slide {
	left: -2px;
}
@media only screen and (max-width: 500px) { 
	.responsive #top #testimonialtemp .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
	    padding: 0px 30px;	
	}
}
```
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
This is the expected mobile results:

Best regards,
Mike
August 28, 2023 at 3:17 am #1417289

Dzimnikov
Participant

That worked super well. Thank you so much!

August 28, 2023 at 10:32 am #1417313

Mike
Moderator

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘CSS Code for editing testimonial widget’ is closed to new replies.