Dawn Theme - Removing text transparency from Image Banner Section

Hello!

As in the topic: Image Banner Section has a Heading Block and Text Block. It appears that Text Block has some transparency adjusted to the text that makes it less visible. Is there any chance to remove this transparency? And is there any chance to edit the color of Heading Block and Text Block?

Thanks in advance!

2 Likes

@Maro33

yes please check theme setting may be allow or

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.

@Maro33

Please share your store URL.

hello @Maro33

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

Hey @Maro33 ,

You can modify the color using the background option. And you can change the transparency using the “Image overlay opacity” option.

Thank you for your answer.

Settings in the Image Banner section are allowing only to edit the placement of the text. I can edit the color of this too: Theme settings >>> Colors >>> Secondary Colors >>> Text, but this option is changing the color in many elements across the theme (and not the opacity) so it’s useless for me.

I need the option to edit code and manage color and opacity in this text window:

Now, even the color section is the same for Heading, Text, and Buttons the Text and Buttons have uneditable transparency and are less visible:

Any chance to do that?

1 Like

@Maro33

yes please share store url!

There is no point to share the store URL.

This is a problem with the default setting in Dawn 2.0 theme. If someone could help all he/she needs to do is just open this theme.

I hope someone can help me.

Thank you for the answer.

These options are changing the background, not the text.

1 Like

Disclaimer; I am not a developer, just a seasoned Shopify client with the same issue! It gives me great joy to have found the solution:

  1. Go into your theme to Edit Code > Assets > Base.css

  2. Find the code I’ve screen-shotted. Match the line numbers.

  3. Where it says “color: rgba(var(–color-foreground), 0.7)” Change the value from 0.7 to 1 (as I have in the screen shot).

  4. Celebrate!

3 Likes

Had a similar problem with Dawn - thanks to @valcrisp I found out how to remove alpha settings on body text, as below - set color-foreground to 1 from 0.7.

body,
.color-background-1,
.color-background-2,
.color-inverse,
.color-accent-1,
.color-accent-2 {
  color: rgba(var(--color-foreground), 1);
  background-color: rgb(var(--color-background));
}

It’s odd that the Dawn theme developers haven’t given users more options over text colours - not sure of the logic behind hard coding alpha settings of text - a bit daft imo.

1 Like

Thank you @Valcrisp and @Rich_Woodward for this helpful advice! I am having the same problem with Dawn right now. I was able to correct this issue for the subtitle and the body text, but I cannot find the correlating line for buttons.

Where did you find the body code?

I’m having the same issue @becnels and @valcrisp but I’m not quite sure where the code is for the body font and not the subtitle font because I want to make the body font opaque. Mind helping me with that?