Text opacity on Dawn theme Image banner

[MarcOHHH]

Dungeons and Gangsters

Password: raycla

I’m trying to make all the text on the image banner look like the bright white text of the header that says “the story begins” but the problem is that the text below it has lower opacity and because the image behind it is a bit dim it turns the text into light gray instead of white.

I’ve already tried several solutions to similar problems on the forms including these:

https://community.shopify.com/c/technical-q-a/how-can-i-modify-text-opacity-in-the-dawn-theme/td-p/1473940

https://community.shopify.com/c/technical-q-a/how-can-i-enhance-the-opacity-of-my-website-text/m-p/2359356#M146273

Nothing is working. Please help.

[Tech_Coding]

Hello @MarcOHHH

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

div#Banner-template--17578864345225__image_banner_Vqb3kj .banner__text p strong { color: #fff !important; }

RESULT:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[MarcOHHH]

It worked! However how do I make it so that this will now be the default or any new banner blocks I make? For example I duplicated that same block and it gave me that lower opacity text again.

[DaisyVo]

Hi @MarcOHHH

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.banner__text.rte.body * {
    color: white !important;
}

This code will work even when you duplicate theme or add new block

I hope this helps

Best,

Daisy

[Made4uo-Ribe]

Hi @MarcOHHH

TRy this one.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.banner__text.rte.body {
    color: white !important;
}

• And Save.

• Result:

• 

  Note: this will apply all the banner you have in the store.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[MarcOHHH]

A good option as well! Thank you. I’m all good on this question now