How to add some styles on Testimonials Element

1

Hi,
I try to customize a little the Testimonials Element on my website built with Bricks, but it’s not really works.
I can’t reverse Testimonial from Title, Picture, … for exemple, and Imo, the Testimonial on Top is very ugly.
Also, I have Troubles to target only the text on css, 'cause it looks like a single bloc.
Any tips ? I hope Bricks will let us the possibility to use less plugins than ever.

2

Hi @Aurel,

welcome to the forum!

You’ll find the Typography Settings - unlike to most of the other elements - not in Content, but in Style » Typography. There you can change the font, color, font-size etc. of the text, name and title of the testimonial.

Testimonials
Testimonials734×1034 23 KB

To rearrange the whole layout, you have to overwrite the default styles via custom css.
The classes on the testimonial element are pretty clear:

.testimonial-item » whole item wrapper
.testimonial-content-wrapper » Text block
.testimonial-meta-wrapper » wrapper for .image and .testimonial-meta-data (which contains 
.testimonial-name and .testimonial-title)

The only thing you need to know is a little bit of flexbox to completely change the look and feel of your testimonial.

Regards,
timmse

1 Like
3

I try to place the text block in the bottom of the element, after the picture, name and title, but i doesn’t work.
When I try to use padding or margin on text block, it moves all ellements of the testimonials.
Did you know how to ?
Thanks you :slight_smile:

4

Easy. The magical keyword is “order”.

testimonials-order
testimonials-order2560×910 202 KB

1 Like
5

You can also do something like this, for example:

testimonials-examples
testimonials-examples2560×1398 241 KB

Example 1:

root .testimonial-item {
  flex-direction: row;
}

root .testimonial-content-wrapper {
  width: 70%;
  padding-right: 10%;
}

root .testimonial-meta-wrapper {
  width: 20%;
  margin-top: 0;
}

root .testimonial-meta-wrapper .image {
  border-radius: 50%;
}

Example 2:

root .testimonial-item {
  flex-direction: row;
}

root .testimonial-content-wrapper {
  width: 70%;
  padding-right: 10%;
  order: 2;
}

root .testimonial-content-wrapper:first-letter {
 font-size: 6rem;
 line-height: 1;
 padding-right: .125rem;
}

root .testimonial-meta-wrapper {
  width: 20%;
  margin-top: 0;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

root .testimonial-meta-wrapper .image {
  border-radius: 50%;
  margin-bottom: 1rem;
  margin-right: 0;
}

These are two quick examples (not fully functional / responsive) what you can do, when you know what to do :wink:

2 Likes
6

Thanks you a lot, you rocks !
I’m not a really good front dev, it’s every time meh when I try something.
For example, I lost so many times to try to select the background of every icon of the social icons element, without success.
Then I just change the color on hover of the icon, nothing more.

Anyway, thanks you for your help :slight_smile:

7

You’re welcome.
Bricks is in a relatively early stage, there is no complete documentation for every element or setting and there are of course some bugs. So it’s kind of trial and error approach to reach the target.

If you’re completely happy with the default look of the elements you’re using, you can build a site with bricks without a single line of css. If you would like to change something that you can’t do within the settings, you can actually do a lot with simple css. However, this assumes that you have mastered CSS.

My advice is: first use what bricks offers you to get used to it in general and if you are not satisfied then think about how you can achieve your goal (custom css, custom elements, a child theme and so on).

Regards,
timmse

8

Yes, with your tips, this is already more knowledge about how Bricks works.
I’m a little confused about root element and not ID for all elements, but it’s seems like that the speedness of Bricks come from this.
No div, no ID => Speed, I guess.

Regards,
Aurel