Large Video with Text Box - Add opacity to text box, change colour, using Motion Theme

[Tixi]

Motion Theme

Large Video with Text Box

Need opacity adjustment for the opaque text box,

Want to change text box colour that is tied to background colour scheme

Does anybody have a solution?

Thank you

[SteveC_Help · Accepted solution]

Hi Tixi,

I may be able to help. If you cannot change the color via the Theme Settings, you can apply this Custom CSS code to the "Large Image with text box" section:

.background-media-text__text {
background: #000000;
}

You can find your desired hex color on this website and insert it into the code.

Hopefully, that helps. Cheers!

[SteveC_Help · Accepted solution]

Hi Tixi,

I may be able to help. If you cannot change the color via the Theme Settings, you can apply this Custom CSS code to the "Large Image with text box" section:

.background-media-text__text {
background: #000000;
}

You can find your desired hex color on this website and insert it into the code.

Hopefully, that helps. Cheers!

[Tixi]

Hi SteveC,

I entered your code into the custom CSS code section and it worked, I can now change the colour of the text box!!

Thank you for your input, it has answered half my query 🙂

[SteveC_Help]

Great, happy to hear that the solution worked. What was the other half of you query?

[Tixi]

I wanted to add a percentage of transparency to the text box background overlay of the video. For example, 75% transparency text background. Text remains at 100 %.

[SteveC_Help · Accepted solution]

Understood! In that case, you can use a CSS rgba() function. The r, g, b (red, green and blue) can be found on the same website. The a (alpha) denotes the opacity 0.0 = fully transparent and 1.0 = fully opaque.

If you wanted a red background with 75% opacity, the code would like this:

.background-media-text__text {
   background: rgba(255, 0, 0, 0.75);
}

Here is a screenshot from the site with RGB to insert.

Insert that code into the custom CSS and you should get the results you are looking for! Cheers!

[Tixi]

Thank you, i will try this out!