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 · Accepted solution]

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;
}

[exertweb · Accepted solution]

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;
}

[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 · Accepted solution]

@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! 🙂

[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 </body>

<style>
.product .icon-with-text {
background-color: #CCA397 !important;
padding-top: 20px !important;
padding-bottom: 4px !important;
padding-left: 10px !important;
opacity: 0.8 !important;
color: white !important;
}
</style>

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