Solved: Adding CSS Gradient Background from gradient generator.

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 Or WhatsApp Or 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 Or WhatsApp Or 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 Or WhatsApp Or 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 Or WhatsApp Or 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 Or WhatsApp Or 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.

Blurry Logo Utilizing Venture Theme

Need help with adding more than 3 thumbnails on Product Page

Change Header Height

Debut theme- Moving logo to center on Mobile view

Moving the menu in Debut

Blurry Logo Utilizing Venture Theme

Need help with adding more than 3 thumbnails on Product Page

Re: Video not playing on mobile-debutify theme

Re: How to add padding above the Add to Cart button on Brooklyn theme for mobile visitors

Change Header Height