Changing Arrow Style and other CSS on Testimonials

[Quilla (Francesca)]

Hey there @Max and @Helga!

Hope you have both been well!

I had a few questions about some quick customizations! I was hoping you might be able to help me with an SVG customization of the arrow. Essentially instead of the chevron i was just wanting ← → so it matches the site branding.

Next, is there a way to target specific font changes? For instance, I’d like the actual quote to be one font, but the author name and title to be another. Also applying a color to these

Lastly, I was hoping to add a line to only the TOP and BOTTOM of the container so it looks something like this… if the arrows can be under that line, EVEN BETTER, but if not I totally understand! i would also love to add that sort of border radius to the image and a small border to match.

I should add that the site is not live and that this is the “Untitled Testimonials Slider”.

[Max]

Hi there, @Quilla

Unfortunately, it’s impossible to implement this customization using a Testimonials Slider app, but it’s possible to do this using our Slider.

To change the style of the arrows, please add this code to the Custom CSS field:

.eapp-slider-arrow-component {
  background: transparent;
  box-shadow: none;
}

.eapp-slider-arrow-component svg {
  display: none;
}

.eapp-slider-navigation-previous .eapp-slider-arrow-component::after {
  content: '←';
  font-size: 32px;
}

.eapp-slider-navigation-next .eapp-slider-arrow-component::after {
  content: '→';
  font-size: 32px;
}

.eapp-slider-arrows-container {
  gap: 16px;
}

I see that you’ve started working on this customization and added an image, texts and separators. It’s also possible to apply a different setting to each text element right in the settings:

To make these options work, please remove your CSS codes, changing text font and color. Check it out and let me know if it works for you