How to customize ''icon with text'' | Dawn theme

[petitlaurierco]

Good morning!

I’d like to change two things with the ‘‘icon with text’’ block.

1. Change the font color to white (#ffffff)

2. Reduce the opacity of the colored background

Here’s how it is right now :

Here’s how I want it :

And here’s the code I added to my base.css :

.product .icon-with-text {
background-color: #CCA397 !important;
padding-top: 20px !important;
padding-bottom: 4px !important;
padding-left: 10px !important;
}

Thank you!

[exertweb]

Hello @petitlaurierco

You just update below code:

.product .icon-with-text {
    background-color: rgba(204,163,151,0.7) !important;
    padding-top: 20px !important;
    padding-bottom: 4px !important;
    padding-left: 10px !important;
    color: #fff;
}

.product .icon-with-text * { 
    color: inherit;
}

[Made4uo-Ribe]

Hi @petitlaurierco

Dont add !important if the code not overide. So when you cant search the code again you can add another code easily.

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @petitlaurierco Please try this code:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[petitlaurierco]

@PageFly-Richard Thanks for your help. It unfortunately didn’t work for the opacity part. I only need to reduce the colored background opacity, not the font. Thank you

[petitlaurierco]

@exertweb it worked thank you! Do you have a recommendation on how to reduce the opacity of the colored box and leave the font normal? Thank you

[exertweb]

@petitlaurierco Your current code uses rgba(204,163,151,0.7) for the background, If you want to reduce the opacity of the background, you need to change the last value (e.g., from 0.7 to 0.5) or adjust it to any value between 0 and 1.

[petitlaurierco]

thank you!