CSS to add border to image boxes

Oh and how can I add a background color to the title of each?

See https://vitalplanet.com/vital-planet-flora-probiotics/

Where Flora Dog Probiotics is unreadble.

Bueller?

Hi,

You can use this custom CSS code to be able to add a black border for your Image Box:

.ugb-image-box__item.ugb--shadow-0.ugb--hover-lift-staggered.rocket-lazyload {
    border: 1px solid black !important;
}

You can add this in Advanced > Custom CSS in your block inspector.

To change the background color of the title and the description, you can use this custom CSS code:

.ugb-image-box--design-captioned .ugb-image-box__item .ugb-image-box__content>.editor-rich-text:first-child, .ugb-image-box--design-captioned .ugb-image-box__item .ugb-image-box__content>.editor-rich-text:nth-child(2), .ugb-image-box--design-captioned .ugb-image-box__item .ugb-image-box__content>.ugb-image-box__description, .ugb-image-box--design-captioned .ugb-image-box__item .ugb-image-box__content>.ugb-image-box__title {
    background-color: (insert hex code here)80 !important;
}

Please take note to add 80 (without space) after the hex code of your chosen color. This will make the background color transparent. If you wish not to have it transparent, you can remove the 80 after the hex code.

You can also add this to your block inspector.

Let me know how it goes!

Resolving this, please re-open if needed. ??