Changing background Dawn theme contact page section and product grid

Solved

Changing background Dawn theme contact page section and product grid

ChristianAK47
Tourist
8 0 3

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. 

ChristianAK47_0-1697479676837.png

ChristianAK47_2-1697480665543.png

 

 

 

 

 

 

 

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. 

ChristianAK47_1-1697479903053.png 

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.

 

Accepted Solutions (2)
Made4uo-Ribe
Shopify Partner
8730 2088 2559

This is an accepted solution.

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:
  • Made4uoRibe_0-1697483761407.png
  • Made4uoRibe_1-1697483796322.png

     

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Made4uo-Ribe
Shopify Partner
8730 2088 2559

This is an accepted solution.

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. 

Made4uoRibe_0-1697489486117.png

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:

Made4uoRibe_1-1697489754132.png

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
8730 2088 2559

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!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ChristianAK47
Tourist
8 0 3

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
Shopify Partner
8730 2088 2559

This is an accepted solution.

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:
  • Made4uoRibe_0-1697483761407.png
  • Made4uoRibe_1-1697483796322.png

     

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ChristianAK47
Tourist
8 0 3

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? 

ChristianAK47_0-1697488430841.png

ChristianAK47_1-1697488495133.png

 

Thank you so much for your support! 

Made4uo-Ribe
Shopify Partner
8730 2088 2559

This is an accepted solution.

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. 

Made4uoRibe_0-1697489486117.png

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:

Made4uoRibe_1-1697489754132.png

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
ChristianAK47
Tourist
8 0 3

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 ! 🙂

ChristianAK47
Tourist
8 0 3

Hi again , 

 

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

ChristianAK47_0-1697489428435.png

 

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

 

Many thanks for your help.