Change colour of box around text (BLOCKSHOP THEME)

Hello all,

I would like the text boxes used in image overlays to be the accent colour (or any other colour). Not sure how to go about it. As an example below, whenever I tick the display the ‘show box around text’ option, it defaults to white, and that colour is what I would like to change.

thank you.

@PCRlarkin

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Hi, site URL is

greensmithsfood.myshopify.com

Would you also be able to show me how to add a bit of transparency to the boxes?

How do you send you password for site?

Philip

@PCRlarkin

if you have front end password is confidential so please to a personal message as you like.

@PCRlarkin

try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme–async.css ->paste below code at the bottom of the file.
.featured-content--root[data-box-around-text=true] .featured-content--text {
background-color: transparent;
color: #fff;
}

Hi Ketan, thank you for your quick replies.

These seems to work to make it 100% transparent, although I don’t want it fully transparent, I would like to be able to set a value (say 60-80% transparency) with the background colour I choose. Is it a case of modifying the base code you gave me already? I was also looking to edit the code so that ALL ‘boxes’ on overlayed on images have the transparency and colour selection, not just the ‘image with text’ asset.

Something like this:

@PCRlarkin

yes please try this

.featured-content--root[data-box-around-text=true] .featured-content--text {
background-color: rgba(255,255,255,0.5);
}

Hi Ketan,

There are still quite a few overlay boxes that aren’t transparent or colour corrected. I am starting to feel like this may be a bit more than a few diy code changes so may look to outsource this and some other dev work I need.

Thank you for all your help.

Philip