How can I add a colored box to the text element?

Support
#1

Hi - The home page of this site has two sections with parallax image backgrounds of fruits and veggies, each with a quote in black font over a semi transparent box.

I used the Creative CTA element to mock up how I would like for it to look, but that element is not the right element to use. I do not want the text to link to anything, they are just quotes for inspiration.

Is there an element that will allow me to create a colored box around the text? If not, is it possible to provide me with some CSS code to add to the Text element to obtain this look? Thank you in advance for any help you can provide.

https://dev.wholistickitchens.com/

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-color-box {
    padding: 8px;
    border: 4px solid #a7800b;
}

After that add the x-color-box class to the class field of your text elements.

Hope it helps :slight_smile:

#3

Thank you, @thai, that helped me a lot. One last request, can you explain to me how to fix the padding of the box? The top and the bottom are unequal.

#4

Hi Suzanne,

Please try to add this code as well:

.x-color-box h5 {
    margin: 10px 0;
}

Hope this helps.

#5

Perfect! Thank you.

#6

You’re more than welcome, glad we could help.

Cheers!