Solved

Dawn theme: Adjusting background colors in tile

guisemen
Excursionist
29 2 3

On the following page, can you help me make the first tile below match the background color and width of the second tile?  I'd also like to get rid of the solid blue background behind the product, if possible.

 

guisemen_0-1696301700004.png

 

 

 

 

Thank you thank you thank you in advance for your help!!!

-Will
Accepted Solution (1)
David_SHT
Globetrotter
605 125 124

This is an accepted solution.

There may be a little confusion, please add this code again for me:

.image-with-text.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding {
     --color-card-hover: var(--color-base-solid-button-labels);
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-background);
    --alpha-badge-border: 1;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-1);
    --gradient-background: var(--gradient-base-accent-1);
   max-width: unset;
    background: rgb(var(--color-background));
    background: var(--gradient-background);
    background-attachment: fixed;
}

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__content,
.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__media {
 background: unset;
}

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
7523 1450 1448

Hi @guisemen 

Please share your store URL 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

guisemen
Excursionist
29 2 3

Apologies -- here you are!

 

https://guisemen.com/products/green-stick

-Will

ZenoPageBuilder
Shopify Partner
1052 203 217

Hello @guisemen 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding {
    padding: 0;
    margin: 0;
    max-width: initial;
}

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .media {
    background-color: transparent;
}

The result

Screenshot 2023-10-03 at 10.36.41.png

Hope it helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
guisemen
Excursionist
29 2 3

Amazing!  Got it!  The only issue here is that the font in that tile now moves ALL the way to the left of the page.

 

Is there a way to preserve the spacing of that tile while filling in the background like you did?

-Will
ZenoPageBuilder
Shopify Partner
1052 203 217

You can append this code below the above code

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__grid {
    max-width: var(--page-width);
    margin: auto;
}
Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

David_SHT
Globetrotter
605 125 124

Hi @guisemen ,

 

This is David at SalesHunterThemes.

 

 

 

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code.

Go Assets folder -> base.css file.

Add this following code at the bottom of page.

 

 

.image-with-text.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding {
     --color-card-hover: var(--color-base-solid-button-labels);
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-background);
    --alpha-badge-border: 1;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-1);
    --gradient-background: var(--gradient-base-accent-1);
   max-width: unset;
    background: rgb(var(--color-background));
    background: var(--gradient-background);
    background-attachment: fixed;
}

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding.image-with-text__content,
.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__media {
 background: unset;
}

 

 

result:

David_SHT_0-1696305589769.png

 

 

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

David | SalesHunterThemes team

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

guisemen
Excursionist
29 2 3

Hey there,

That actually provides a slightly different result once pasted into base.css (text is spaced all the way to the left and the left side of the tile is filled in a solid blue color)

guisemen_0-1696305964214.png

 

 

-Will
David_SHT
Globetrotter
605 125 124

This is an accepted solution.

There may be a little confusion, please add this code again for me:

.image-with-text.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding {
     --color-card-hover: var(--color-base-solid-button-labels);
    --color-badge-background: var(--color-background);
    --color-badge-border: var(--color-background);
    --alpha-badge-border: 1;
    --color-button: var(--color-foreground);
    --color-button-text: var(--color-background);
    --color-link: var(--color-foreground);
    --alpha-link: 0.7;
    --color-foreground: var(--color-base-solid-button-labels);
    --color-background: var(--color-base-accent-1);
    --gradient-background: var(--gradient-base-accent-1);
   max-width: unset;
    background: rgb(var(--color-background));
    background: var(--gradient-background);
    background-attachment: fixed;
}

.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__content,
.section-template--16836595548393__f33f916e-9425-4983-b1f2-19d629deef0e-padding .image-with-text__media {
 background: unset;
}

 

We create fast Shopify themes, focusing on exceptional performance and seamless experience across all devices.

Try our Electro theme Free! (Now at Black Friday price)

guisemen
Excursionist
29 2 3

Fixed!  Thanks, David.  If you have advice on how to align the text to match the other box, I'd appreciate it, but I'm marking this as the correct solution.

 

-Will