For Dawn theme how do you make text on image banners brighter?

[SweatFree]

How do you make the line "so, why not have a backup..." brighter?

Also, in general I have noticed text in the header is less bright. Text in rich text is less bright. Especially text in description of featured collection is less bright. How do I fix the brightness of text? For all, but especially in image banner and featured collection description.

[BSSCommerce-HDL]

Hi @SweatFree, I think an overlay layer will make the text in the image stand out more 

[SweatFree]

yes, but it makes the image look dull, so if there was a way to make the text as bright as the heading text then I thought it would be better. Also, same question for featured collection description. You'll notice that text is less bright in comparison to featured collection heading.

[BSSCommerce-HDL]

Hi @SweatFree, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.banner__text.rte.body strong {
    color: white !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Moeed]

Hey @SweatFree 

Your website is password protected, can you share your website password as well?

Best Regards,

Moeed

[SweatFree]

Sorry, Removed the password!

[Moeed]

Hey @SweatFree 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.banner__text.rte.body strong {
    color: white !important;
    opacity: 1 !important;
    font-weight: bold !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Bwclovis]

I would recommend some sort of background for the text. As it stands its will get "lost" on the background images potentially causing issues with sight impaired visitors.  

I did this change in browser :

.banner__box {
        padding: 4rem;
        background: rgba(0, 0, 0, 0.4);
        max-width: 89rem;
        border: none;
        border-radius: 6px;
        box-shadow: none;
        backdrop-filter: blur(5px);
        border: 1px solid #000000;
}

Result below. You can add this (probably as Im just getting started with liquid but know my way around a code base) to the custom css,