Change Button Color on Posts Grid

[BuildingBeautifulSouls]

Hi,

How can I change the button color on the Post Masonry Grid? See attached.

Thanks,
Bernadette

Attachments:

You must be logged in to view attached files.

[Kieran_SQ]

Hi,

You change the colors used by overriding the below CSS in your KLEO Child theme or Quick CSS

Change button text color and background color (noraml)
.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat {color: #fff; background-color: #F4524D;}

Change button text color and background color (hover)
.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat:hover {color: #fff;background-color: #2d2d2d;}

Adjust the color # values to suit your needs

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[BuildingBeautifulSouls]

Hi, Kieran;

Thanks for the quick reply. It didn’t work. I cleared my cache twice and reloaded browser but the buttons are still red.

Here’s the code I copied from support reply and I added the #values:

.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat:hover {color: #5c3669;background-color: #6c4a78;}

Please advise.

Thanks,
Bernadette

[Kieran_SQ]

Hi,

Please update this ticket with admin credentials so I can login and take a look at what is going on. Also, if you have some kind of plugin that is disabling right click please disable that so I can work more easily on your site.

Thanks,

Kieran

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Kieran_SQ]

Please try the below CSS which is an updated version of above, this time using !important to try and force a change

.vc_btn3.vc_btn3-color-juicy-pink, .vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat:hover {color: #5c3669 !important;background-color: #6c4a78 !important;}

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[BuildingBeautifulSouls]

This reply has been set as private.

[Kieran_SQ]

Hi,

I logged in and found that you had placed the CSS within the media query for (max-width: 991px), I have moved this outside of the media query and now it works as expected.

Thanks,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[BuildingBeautifulSouls]

Hi, Keiran;

OMG! I’m an idiot. Didn’t see it. Thanks.

However, the hover color isn’t working and the text went dark purple instead of staying white?

Please advise.

Thanks,
Bernadette

[Kieran_SQ]

Hi,

That’s because you had changed the color to #5c3669 when you sent me the CSS earlier, I had presumed you wanted it that color so did not update it.

I have now updated the color to #ffffff

All the best,

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[BuildingBeautifulSouls]

Hi,

Ack! Sorry. I misunderstood the code. Thanks for fixing! Sure appreciate your help!

Regards,
Bernadette

[Kieran_SQ]

No worries at all Bernadette, glad it is all sorted now 🙂

Kieran.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Custom development requests can be sent to dev@seventhqueen.com, one of the development team will be happy to discuss your needs.

[Author]

Posts