Solved

How to blend sections together

webbuilder9
Tourist
13 0 2

Hello!

I would like to make all my pages look similar in terms of the background. Currently my page background looks similar on home page all the way to the footer, but when the footer begins the background sort of "starts over", which creates a line between the upper page and footer. This footer effect happens on every page. Similarly, when I click open a product page, the different sections are split again by "resetting" the background color scheme instead of blending all of them together. Is there a way to fix this? 

 

https://9u9zwo5j56x853yr-76588974424.shopifypreview.com

 

1.png2.png

Accepted Solution (1)
Anshul_arora
Trailblazer
233 48 30

This is an accepted solution.

Hello @webbuilder9 ,

I have looked through your site https://9u9zwo5j56x853yr-76588974424.shopifypreview.com/ and see you have not put the code inside the style tag.

Your added code is appearing at the end of your site' footer section https://prnt.sc/WSdxlQhiv_dh. Remove the code you have put outside the style tag https://prnt.sc/Ivjdcn3gudWf and write the below mentioned code inside the style tag.

<style>
body.gradient.animate--hover-default {
background: radial-gradient(rgba(260, 110, 152, 0.6825), rgba(236, 215, 151, 3) 100%) !important;
}
</style>

As you can see, when I temporarily add the above mentioned code inside <style> tag, it shows the desired output
https://prnt.sc/-YppgRdAfCJR

I hope it helps.

Let me know if you need further assistance.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

View solution in original post

Replies 7 (7)

Made4uo-Ribe
Shopify Partner
5127 1223 1497

Hi @webbuilder9 

I would suggest to put your main back ground in the body not in the main. 

Try this.

  • 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 "theme.liquid" file paste the code below before the </body> tag. 

 

body.gradient.animate--hover-default {
    background: radial-gradient(rgba(255, 105, 147, 0.6825), rgba(233, 211, 148, 1) 100%) !important;
}

 

  • And Save.
  • Result:
  • Ribe_Dagandara_0-1693511297393.png

     

I hope it help. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


webbuilder9
Tourist
13 0 2

Hello! Unfortunately this didn't work for some reason. 

Anshul_arora
Trailblazer
233 48 30

This is an accepted solution.

Hello @webbuilder9 ,

I have looked through your site https://9u9zwo5j56x853yr-76588974424.shopifypreview.com/ and see you have not put the code inside the style tag.

Your added code is appearing at the end of your site' footer section https://prnt.sc/WSdxlQhiv_dh. Remove the code you have put outside the style tag https://prnt.sc/Ivjdcn3gudWf and write the below mentioned code inside the style tag.

<style>
body.gradient.animate--hover-default {
background: radial-gradient(rgba(260, 110, 152, 0.6825), rgba(236, 215, 151, 3) 100%) !important;
}
</style>

As you can see, when I temporarily add the above mentioned code inside <style> tag, it shows the desired output
https://prnt.sc/-YppgRdAfCJR

I hope it helps.

Let me know if you need further assistance.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
Made4uo-Ribe
Shopify Partner
5127 1223 1497

Did you try to paste it on the theme.liquid?  if not try this one. 

Open theme.liquid file paste the code below beofre this tag </body>

 

 

<style>
body.gradient.animate--hover-default {
    background: radial-gradient(rgba(255, 105, 147, 0.6825), rgba(233, 211, 148, 1) 100%) !important;
}
</style>

 

 

And Save. 

 

I hope it help.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


plants4friendz
Excursionist
21 0 7

Hi, can you please advise on how to accomplish this effect on my site? I've added a background image and would like all the sections to blend together.

 

My site is: thespiralpath.myshopify.com pw: freeflowers

 

Thank you so much in advance!

Made4uo-Ribe
Shopify Partner
5127 1223 1497

Hello,

You need to change your background color. But in your store your background is already overide. 

You mean like this? 

Made4uoRibe_0-1699460869966.png

This is the code i used. 

html, body, [id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer']), [id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer'])> [class*='background'] {
    background: radial-gradient(at left,rgba(50, 140, 255, 1), rgba(220, 216, 230, 1)) !important;

 

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


plants4friendz
Excursionist
21 0 7

Is it possible to make it all flow together with the background image I'm already using?