[LiegeoisParticipant]

Dear X Theme,

I am looking for an easy way to add a colour overlay over the background images and be able to change the transparency of this colour easily as soon as I would change the background image again.

http://www.lukaliegeois.com

PS: I am also looking for a way to change the colour of the Name of a quote. (which in my case is set to grey but I would like to change it to green.)

best regards

[LiegeoisParticipant]

I would also be interested in how to add this movement to the background image like in the Integrity 7 Demo (the google glasses) while scrolling down. It looks very smooth and there might be an easy way to achieve this effect which I am not aware of.

Thank you for helping with this issue.

[ZeshanMember]

Hi Luke,

Thanks for writing in!

#1: To add a color overlay to the background images, first add a class for example color-overlay to your section under Class field of its settings (see: http://prntscr.com/7qeolc) and then add following CSS code under Custom > CSS in the Customizer:

.x-section.color-overlay {
    position: relative;
}

.x-section.color-overlay:before {
    content: '';
    background: rgba(39, 69, 145, 0.44);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
}

.x-section.color-overlay .x-container {
    position: relative;
    z-index: 10;
}

To change the overlay color, replace rgba(39, 69, 145, 0.44) from the code with the RGBA color code. You can generate semi-transparent colors from this site: http://www.css3maker.com/css-3-rgba.html

#2: In order to change the color of the quote, add following CSS code under Style field of its settings (see: http://prntscr.com/7qeof1):

color: green;

#3: In regard to your last question, this effect is called parallax effect. You can activate it under Parallax in your section settings in Cornerstone.

Thank you!

[LiegeoisParticipant]

Thank you for the help.

#1 The overlay is working as expected (thank you) but it also liesover the text. How can I put the text over the color-overlay or lets say the color-overlay under the text.

#2 advise is not what I was looking for as this is going to change the colour of the quote itself but not the color of the cited person..

Cheers

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer to change the color of the cited person’s name.

cite.x-cite {
    color: green;
}

But it is the text over the color-overlay, if you change this background: rgba(39, 69, 145, 0.44); line to background: rgba(39, 69, 145, 1); you would see that the color-overlays is under the text.

Hope it helps, Cheers!

[LiegeoisParticipant]

Oh my bad, I missed a part of the code you posted in the earlier post and therefor the color-overlay was placed in front of the text. Works perfectly.

Thank you for your patience and help.

cheers

[LelyModerator]

You’re welcome.

Always,
X

[Author]

Posts