Solved

Debut Theme: Changing button colors on homepage

Ample
Excursionist
29 0 10

Hi, 

I am using Debut theme and I have a section "Text Columns with Images" on homepage, and under those columns, there are 3 buttons. How can I change the background and text color of those three buttons?

I have attached the screenshot of buttons:

buttons.JPG

Accepted Solutions (2)
dmwwebartisan
Shopify Partner
12289 2547 3698

This is an accepted solution.

@Ample 

Remove Previous css class and add this new css class

a.btn.btn--secondary.btn--small {
  background-color: #ed5f85 !important;
  color: #6ACBCB !important;
  font-family: inherit !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Denishamakwana
Shopify Partner
1408 173 231

This is an accepted solution.

Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

ans 1)   a.btn.btn--secondary.btn--small {-

      text-transform: capitalize;

}

Ans 2) in this case if you give different class for <a> tag under the "grid__item medium-up--one-third text-center " div for particular middle part.

then we can apply particular css on that.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12289 2547 3698

@Ample 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ample
Excursionist
29 0 10

@dmwwebartisan @KetanKumar 

Site: www.vahow.com

Password: vahow

Denishamakwana
Shopify Partner
1408 173 231

please add this below code end of the theme.css file

a.btn.btn--secondary.btn--small {

          background-color: #ed5f85;

          color: #fff;

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
dmwwebartisan
Shopify Partner
12289 2547 3698

@Ample 

Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

 

a.btn.btn--secondary.btn--small {
  background-color: #ed5f85 !important;
  color: #fff !important;
}

 

 

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ample
Excursionist
29 0 10

@Denishamakwana Wow! This is just amazing. Thank you soooooo much. I truly appreciate it.

I just have two questions if you don't mind answering.

1. Is it possible to change the "Capital Letters" to Sentence case, such as "Shop Bracelets" rather than "SHOP BRACELETS"?

2. Is it possible to change the middle button (Shop Neckties) to this color: #6ACBCB?

Again, thanks so much for your help. It looks GREAT!

dmwwebartisan
Shopify Partner
12289 2547 3698

This is an accepted solution.

@Ample 

Remove Previous css class and add this new css class

a.btn.btn--secondary.btn--small {
  background-color: #ed5f85 !important;
  color: #6ACBCB !important;
  font-family: inherit !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Ample
Excursionist
29 0 10

@dmwwebartisan 

Thanks for your help. It changed the font style but it's still in CAPITAL Letters. No problem, I can use this same one.

Just one thing, for button colors, I wanted to keep 1st and 3rd button color to same what I had previously, and just wanted to change the middle button color to #6ACBCB.

Is it possible?

Denishamakwana
Shopify Partner
1408 173 231

This is an accepted solution.

Please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

ans 1)   a.btn.btn--secondary.btn--small {-

      text-transform: capitalize;

}

Ans 2) in this case if you give different class for <a> tag under the "grid__item medium-up--one-third text-center " div for particular middle part.

then we can apply particular css on that.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
Ample
Excursionist
29 0 10

@Denishamakwana 

I am not sure how to do the second part so I will leave it as-is. I truly appreciate your help. 

Thanks again!

KetanKumar
Shopify Partner
36843 3636 11978

@Ample 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing