Overlay pattern in Testimonials


#1

I would also like to adjust the size of the overlay pattern in the Testimonials area.

Could you explain me how I can identify the right area so i can use the code (multiple times) in more section if needed? Then I wont have to ask questions twice :wink:

A Video tutorial would be off-course most excellent because I believe more people might benefit from this :slight_smile:

cheers


#2

Hi,

I am sorry, there are no video creator installed on my laptop. But I can explain it using image.

  1. Right click on you testimonial section and choose “inspect element” http://prntscr.com/8st9jx

  2. It would open chrome dev tools widows, choose tab Element then try to find “row-overlay” and select those line http://prntscr.com/8sta3h

  3. Now, on the right column of the chrome dev tools, click “+” button [1] and there should created a new line to add css rule automatically, type .row-overlay on it [2] http://prntscr.com/8staw3

  4. Click the open bracket symbol to create a new line [1] > type height > enter > type 60% (you can adjust this value > enter > type margin-top > enter > type 12% (you also can adjust this value) http://prntscr.com/8stccz

That’s it! from the right column, your css code should look like this:

.row-overlay {
    height: 60%;
    margin-top: 12%;
}
  1. Now install simple custom css plugin to your site > activate > and go to “Custom css” menu under “appearance” and copy+paste the css code above to the custom css field http://prntscr.com/8stdz3

Hope it helps :slight_smile:


#3

NICE! I love it when a plan comes together :wink:

Thanks Awan it was a nice excersice, i trust I can duplicate the proces now :slight_smile:

cheers


#4

Hi Awan, Just one more thing about the patern in the testimonials.

Can I adjust the breightness of the font (put it to the front?)? Because the overlay patern is covering the font and even with #FFFFF 100% white it looks more like grey.


#5

ooh… that was the opacity. Use these css code below:

.row-overlay {
    height: 60%;
    margin-top: 12%;
    opacity: 0.3;
}

You can play with the decimal value of the opacity from the code above :slight_smile:


#6

Hmm changing the overlay pattern will not result in the desired situation. I think i can explain more specific what I mean.

Instead of having an overlay pattern I’m thinking more of a box that can have content like text and button but the characteristics of this box are that it has a colour with opacity 0.6.

When the text is part of the box, the text will keep its full white appearance and it will btw be responsive (now it is bad on mobile).

I did it before on www.jullo.nl (see call to action) only the area’s are different now so i need to understand how to identify the right area(container).

I used to do this:
#call-to-action .container{
background-color: rgba(15, 133, 209, 0.7);
padding: 20px 20px 40px 20px;
}

So it is not putting a layer on top, but rather adjusting the properties of the container. Can you help?


#7

Ps. It is like in the rocked pro welcome area right now (www.remezo.nl). The White is really white.


#8

I just visit your site (http://www.jullo.nl) and did you change your theme to Moesia?

you are create your own overlay pattern to the testimonial section using this selector #testimonials .container, correct?

And I think there is no problem with the overlay and the font color within the box. I’ve try to change your testimonial text to white, and its worked


#9

Well, it’s the same thing now. You just need to target by row ID.


#pg-220-4 .row-overlay {
    display: none;
}
#pg-220-4 .panel-grid-cell {
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.6);
}


#10

Excellent ! This ticket may also be closed :slight_smile: