Dawn Template: change color of Text and Titles separately

Store Design
1

Hi,

I would like to have the title text of sections to be lighter than the body text. In particular I want to this for the image_with_Text section, but might want to do it with others.

Right now it seems we can only use on text color, and the Dawn template then makes the body text a lighter color than the title.

Can someone guide me to where I can either edit some code, or add some to a file?

Many Thanks!

Grant

1 Like
2

@ut_er

Please share your store URL & also share a screenshot of what do you want!

Thanks!

3

Thanks for the reply!

At this moment the person I am making this for asked that I not share the website for business reasons. I hope you understand, and that you can still indicate what I should do. I have not directly modified any of the code so far, so its still what comes with the template.

I attached an image that explains what I want to do.

Thanks

Grant

4

Just to be sure, is getting help contingent on my providing the URL?

For example, I could understand that going to the site and using the browser to look at the code is the most practical way to see the code, because otherwise you would have to set up a store to see the template code?

Or is the picture I provided enough to start, and I just have to be patient? :slightly_smiling_face:

Thanks,

Grant

5

I found the solution on my own (best way to learn!):

In the base.css file (in this case in the Dawn template), you can adjust all the headers by changing the ‘a’ value in this existing code:

h2,
h3,
h4,
h5,
.h0,
.h1,
.h2,
.h3,
.h4,
.h5 {
font-family: var(--font-heading-family);
font-style: var(--fonh1t-heading-style);
font-weight: var(--font-heading-weight);
letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
color: rgba(var(--color-foreground),.65);
line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));

Additionally, it was possible to further adjust the header in at least the ‘image with text’ section code by adding (or at least changing) at the bottom:

.image-with-text__heading {
  margin-bottom: 0;
  color: rgba(var(--color-foreground),.65);
}