Styling testimonials

[juliewaterhouse]

I’m been trying in vain to find the right CSS selector to style the body of the testimonials, and I can’t figure it out. I could place some inline CSS around it, but I want my client to be able to add their own testimonial, so prefer to add something to the custom CSS for the theme. I’ve tried adding an extra class to the testimonials slider (pa-home-testimonials), and using that as a base, e.g.
.pa-home-testimonials .testimonials-slider .testimonial-text.text-normal {

i’ve tried every option from the most simple to the most complex. Would really appreciate any help! Thx.

PS I did manage to style the cite section below, but can’t get the actual text of the testimonial.

[Kyle – SUPPORT]

Hi

What is it you are trying to change?

– Kyle

[juliewaterhouse]

Hi Kyle,

I want to change the font-family, color, font-size, and font-style (to italic).

Thanks.

[Kyle – SUPPORT]

Try this

.testimonial-wrap.large .testimonial-text {
  font-size: 16px;
  color: #111111;
  font-family: "", Arial, sans-serif;
  font-style: italic;
}

– Kyle

[juliewaterhouse]

Thanks, but no luck. And when I inspect in the browser, I don’t see any testimonial-wrap class.
Website is http://107.170.101.150 and testimonial is in pink section about half-way down the page.

[Kyle – SUPPORT]

I did not know you was referring to the testimonial slider, try this:

.testimonials-slider .testimonial-text {
  font-size: 16px;
  color: #111111;
  font-family: "", Arial, sans-serif;
  font-style: italic;
}

– Kyle

[juliewaterhouse]

Sorry! My apologies for not being clear in the first place.

I’ve tried the new CSS (had tried that one before), but no luck. In the inspector, I can see the style, but crossed out, so something is overriding it.

[Kyle – SUPPORT]

You will need to add !important to the end of anything that isn’t working. For e..g if the font-size is being overwritten add this:

.testimonials-slider .testimonial-text {
  font-size: 16px!important;
  color: #111111;
  font-family: "", Arial, sans-serif;
  font-style: italic;
}

– Kyle

[juliewaterhouse]

Here’s what I’ve been using:

.testimonials-slider .testimonial-text {
  font-family: Asap !important;
  font-style: italic !important;
  font-size: 48px !important;
  line-height: 22px !important;
  color: #FFFFFF !important;
}

Attached is a screenshot of what I see in the Safari inspector.

FYI I have added font family ASAP using Punch fonts, and can set the style of other elements to that font using the custom CSS editor without problems. For instance, the following works:

.testimonials-slider cite {
  font-family: Asap;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

Thanks for your continued help – I appreciate it!

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

If it’s not a standard font then you need to use quotes

.testimonials-slider .testimonial-text {
  font-family: "Asap" !important;
  font-style: italic !important;
  font-size: 48px !important;
  line-height: 22px !important;
  color: #FFFFFF !important;
}

– Kyle

[juliewaterhouse]

Thanks — didn’t know that. Still seeing the style crossed out. See attachment #1.

Right below that style is the same style selector, but coming from the stylesheet. See attachment #2. If I edit this one in the browser to change the colour, e.g., then the correct style is picked up.

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

There must be something broken in your custom css, because in Firefox it only shows the style selector, not any of the custom css, it’s not a case of it being overwritten.

Please could you provide a login so I can look at your custom css to try and find the issue?

– Kyle

Attachments:

You must be logged in to view attached files.

[juliewaterhouse]

This reply has been marked as private.

[Kyle – SUPPORT]

What about the first auth?

– Kyle

[juliewaterhouse]

This reply has been marked as private.