Adding Color Gradient Code to Footer just as I added to Header

Shopify Discussion
1

Hi Team, this is my home page link (https://kiaappliances.com/)
To display gradient on header I used the code…

.t4s-section-header [data-header-height] {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}

Now I want to add the same gradient color but to my footer of website which right now is only black, can you please guide me which code to add. I would be grateful.

harrygoat1218_0-1708303180971.png
harrygoat1218_0-1708303180971.png2560×1080 328 KB

In the picture you can see that I have placed the header gradient code in this global custom css, can you tell me what code to put here and how to put it with the header existing one so that the header and footer colors can match.

2

Please add this code to your Global custom css

#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}
1 Like
3

Hello @harrygoat1218 ,

Please place the below-provided code to your Global Custom CSS.

#t4s-footer #shopify-section-footer .t4s-section-inner {
background: rgb(134,172,193);
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%);
}

Steps:

  1. In your Shopify admin, go to Online Store → Themes.
  2. Click Customize.
  3. Click Theme settings.
  4. Click Custom CSS.
  5. Add the above-provided CSS code.
  6. Click Save.

deujadipesh_1-1708320354340.png
deujadipesh_1-1708320354340.png354×607 18.3 KB

Fig: Custom CSS Section

deujadipesh_0-1708320114417.png
deujadipesh_0-1708320114417.png1335×608 180 KB

Fig: Footer Result

Thank You.

1 Like
4

Thank you Sir, as always you are the best.
Can you please also tell this for Fotter Bottom…

I also want it to have the same color.

harrygoat1218_0-1708350093804.png
harrygoat1218_0-1708350093804.png2560×1080 371 KB

5

Hi @harrygoat1218

You can update code to this and check

#t4s-footer {
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%) !important;
}
#t4s-footer * { background: transparent !important; }

Screenshot 2024-02-20 at 09.34.45.png
Screenshot 2024-02-20 at 09.34.45.png1860×799 131 KB

1 Like
6

Thank you Sir it worked, can you also check your messages Sir Dan if possible please…

7

Hi, I am using the Dawn theme and it doesn’t work for me. I have put this code into my global custom css but nothing has changed with my footer. Can you help me?

8

Hi @Nirmine1111

Please try to use this code for your Dawn theme, add it at the bottom of base.css file

footer {
background: linear-gradient(106deg, rgba(32,51,97,1) 0%, rgba(134,172,193,1) 100%) !important;
}
footer * { background: transparent !important; }