Solved: Adding CSS Gradient Background from gradient gener...

Gerius · ‎05-24-2019

I would like to add a CSS gradient background generated from a website like this -> https://mycolor.space/gradient3 to specific pages such as the home & product pages on the website and be able to change and edit them to different colors at will. I would also like to change the colors of certain elements, such as Add to Cart button & the search bar background to the same gradient background if at all possible.

Does anyone know how to do either of these things?

Thanks in advance :)

Jasoliya · ‎05-24-2019

Hi,

You can change background color of home and product page by following:

Add this in theme.liquid

{% if template contains 'index' or template contains 'product' %}
<style>
  body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
</style>
{% endif %}

You can change change color like this for search and add to cart button by adding css in theme.scss

Let me know if you need help.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

Gerius · ‎05-24-2019

Where exactly in theme.liquid do I add that code?

Edit: I'm also using the Venture theme, which has both "theme.liquid" files as well as "theme.scss.liquid" files. Should this code be added into the theme.liquid file that you first mentioned or the theme.scss file.

Thanks for your reply by the way :)

Jasoliya · ‎05-24-2019

Add this code in theme.liquid

{% if template contains 'index' or template contains 'product' %}
<style>  body{background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);}
</style>
{% endif %}

This code is for background color changes.

Send me store url so i can check if any problem

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

Gerius · ‎05-24-2019

I'm not exactly sure where to add the code. Should it be added directly under the<head> tag?

Jasoliya · ‎05-24-2019

You can add before </head> tag on file.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

Gerius · ‎05-24-2019

Added the code, saved it, and refreshed my theme but the changes are not showing and the background is still the same. I added you on Skype. Are you available to do a screen share over Skype so that I can show you what I'm doing?

Jasoliya · ‎05-24-2019

Sure, Skype (jasoliya.brijesh).

Also send me your store URL so i can check

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

Gerius · ‎05-24-2019

Added you. Did you get my message?

Jasoliya · ‎05-24-2019

No, send me your id

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

Adding CSS Gradient Background from gradient generator.

Creating a custom Contact Form

Where to set up my canonical balise ?

Venture theme : Changing color Product on sale

How to change font size for header only without ch...

Show inventory quantities on product pages for dif...

Re: Creating a custom Contact Form

Re: Creating a custom Contact Form

Re: Venture theme : Changing color Product on sale

Re: Removing the Buy/Sold Out/Add to cart buttons

Re: Add a hover effect to product images on your c...