Changing background Dawn theme contact page section and product grid

[ChristianAK47]

Hi everyone,

I’m trying to change the page sections background and text color in dawn theme, but there’s no option for it. Product box catalog page and contact page. At least so far these are the pages on which I’m experiencing the problem. Most likely I will encounter the same problem on cart page and product page.

As you can see I’ve inserted a code for sticky and transparent header, but I would like to change the white section to black and the CONTACT text to white.

I’ve tried with a DIV code in the editors CSS section but it doesn’t change the text color only the background.

The send message button also doesn’t change according to the color scheme I’ve selected. This should also should have black background and white text with white box outline.

And last I would like to apply this to all pages of the website (except home page which is actually how it should be.

Does anyone have a solution for this?

Many thanks in advance.

[Made4uo-Ribe]

Hi @ChristianAK47

Would you mind to share your Store URL website? with password if its unpublish. And what color do you like to use also the text color?Thanks!

[ChristianAK47]

Hi,

Thanks for the fast reply,

here’s the site and the password:

https://b56f72-2.myshopify.com/

password masha2023

The main idea would be to have the whole site on back background and the text in different color.

Please let me know what you think

[Made4uo-Ribe]

Try this one. I just copy the color of your text.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• 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:

.section-template--19917975454033__product-grid-padding, section#shopify-section-template--19917975519569__main {
    background: #121212;
}
.section-template--19917975454033__product-grid-padding * {
    color: #CBAE43;
}
h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
    color:  #CBAE43;
}
button.button {
    border: 1px solid #CBAE43;
}

• And Save.

• Result:

• 

• 

[ChristianAK47]

Thank you o much. It worked perfectly!

I’d have one more question,

If I add lower margin to space the text from the header a white space appears again, is it possible to remove that too?

Thank you so much for your support!

[ChristianAK47]

Hi again ,

I just saw that the cart page still has the same issue .

Can I use the same code to solve it ? if yes in which file should I insert it.?

Many thanks for your help.

[Made4uo-Ribe]

No, use this one instead. Same Instruction.

.collection-hero.color-accent-1.gradient, h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
    padding-top: 8vw !important;
}

And Save.

It wil change the title of the product and contact.

And I notice your cart page also.

Try this one.

div#shopify-section-template--19917975421265__cart-items {
    background: #121212;
    padding-top: 8vw;
}
div#shopify-section-template--19917975421265__cart-items * {
    color: #CBAE43;
}
a.button {
    border: 1px solid #CBAE43;
}

And Save.

result:

We can put the codes all together, but I dont like you to be confuse.

[ChristianAK47]

Thank you so much for all the support,

Changes applied looks much better!

If I can bother you with one more thing can any of these codes to be used for the product page? It has the same issue… ?‍

Thank you so much for the kind help, you saved me a loads of hours of research !