Changing Color of

Solved
Highlighted
New Member
5 0 0

Hi guys, I'm new with Shopify and have no clue how to code. I looked into it but it's just a maze. In short, I need help changing the colors of a button and an object without altering the entire theme's colors. In picture one that I've attached, you can see how I want the things to look, white button with grey text and white line on top. However, in doing so by using the theme accent color changer, it also changes the color of other buttons and lines throughout the site to also be white. So in the first picture, the top two circled items are how I want them but the bottom circle line is now lost in the background. How can I keep the top two circled items white but keep the theme's primary accent color as #1DEDFF? Can someone help with this?

 

Button color, top line and text color is all correct, however lower button is now also white and disappears into the background. I need the top two circled items the way they are but the bottom circled items needs to be that blue color as seen in the second picture.Button color, top line and text color is all correct, however lower button is now also white and disappears into the background. I need the top two circled items the way they are but the bottom circled items needs to be that blue color as seen in the second picture.Here I've changed the color to blue and now the two top items are lost into the picture and looks bad but the bottom circled item is good.Here I've changed the color to blue and now the two top items are lost into the picture and looks bad but the bottom circled item is good.

0 Likes
Highlighted
Shopify Partner
2824 619 757

@RuvimAAA 

Please share your website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted

Hello RuvimAAA,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

Hi, @oscprofessional 

https://the-fluffy-plushie.myshopify.com/

I need to make that top line and button white with dark grey text while keeping the entire sites "primary accent" color as #1DEDFF

0 Likes
Highlighted

Hello RuvimAAA,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-1486584613697 .hero__overlay-title::before {
    background-color: white!important;
}
#shopify-section-1486584613697 .btn.hero__btn {
    background-color: white;
    color: #4a4a4a;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

Is there a way to get rid of the blue outline on the button? And just have a white button that gets slightly bigger on hover?

0 Likes
Highlighted

Capture.PNG

Hi is this button you are talking about?

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
5 0 0

Yes, but viewing the screenshot you attached I believe it’s blending into the blue background and you aren’t able to see it. 
There’s a blue outline around the button that gets bigger when you hover over it with the mouse. Could we make it also white? That way the button appears to simply become bigger rather then just a blue outline around it. 
Btw thanks a TON for that first line of code, made me able to keep things looking so much nicer, really appreciate that!

0 Likes
Highlighted

This is an accepted solution.

 

Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.btn::after, .shopify-payment-button .shopify-payment-button__button--unbranded::after, .btn--secondary::after {
    outline: 2px solid #fff !important;
}

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes