Change Button Color on Posts Grid

This topic has 10 replies, 2 voices, and was last updated 7 years by Kieran_SQ.

Author
October 22, 2017 at 20:56 #177415

BuildingBeautifulSouls
Participant

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.

October 22, 2017 at 21:10 #177418

Kieran_SQ
Moderator

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.

October 22, 2017 at 21:51 #177422

BuildingBeautifulSouls
Participant

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

October 22, 2017 at 21:55 #177423

Kieran_SQ
Moderator

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.

October 22, 2017 at 21:57 #177424

Kieran_SQ
Moderator

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.

October 23, 2017 at 00:30 #177428

BuildingBeautifulSouls
Participant

This reply has been set as private.

October 23, 2017 at 01:08 #177432

Kieran_SQ
Moderator

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.

October 23, 2017 at 01:18 #177434

BuildingBeautifulSouls
Participant

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

October 23, 2017 at 02:41 #177446

Kieran_SQ
Moderator

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.

October 23, 2017 at 02:45 #177447

BuildingBeautifulSouls
Participant

Hi,

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

Regards,
Bernadette

October 23, 2017 at 05:20 #177448

Kieran_SQ
Moderator

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

Viewing 11 posts - 1 through 11 (of 11 total)

The forum ‘General questions’ is closed to new topics and replies.

Attachments:

Search KB

Log in with your credentials

Forgot your details?