change hover background color of icon in feature item

[janetLSchaper]

Hello,

I have overridden the the icon color for each feature item, but it does not apply to the hover background.  It is still using this #00b9f7 color.  Please give me the CSS for changing the hover background and border color.

Thank you,

Janet

[Kieran_SQ]

Hi Janet,

Thanks for reaching out today above hover styles on the KLEO Featured element within Visual Composer. Please add the below CSS to your KLEO Child theme by going to WP Admin > Appearance > Editor > KLEO Child > Style.css or to WP Admin > Theme Options > General Settings > Scroll to: Quick CSS.

COPY CODE

.feature-icon.el-appear.icon-attention-circled:hover {
    color: #000000 !important;
    border: solid 1px #000000 !important;
}

Adjust the #000000 value 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.

[janetLSchaper]

Hi Kieran,

Thank you. I tried this and it did not work. The page that I’ve used this on:
https://sierracanyondev.com/my-community/

Also, the border color doesn’t seem to be defined for the “top”.

Thank you for your help.

Janet

[Kieran_SQ]

Hi,

I am unable to override the color locally or on your site therefore I am going to ask one of our developers to look at this for, they’ll be in touch as soon as they can (Mon-Fri East Europe Time).

Thank you for you continued patience,

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.

[Radu]

Hi,

Use those selectors

COPY CODE

.page-id-522 .feature-item:hover span.feature-icon {
    background: #4cadc9 !important;
}

.page-id-522 .feature-item:hover .feature-icon {
    border: 1px solid #122474 !important;
}

It will work on the https://sierracanyondev.com/my-community/ page if you will gonna use the same style on other page just copy again the selector and change the page-id-522 with your desired id

Cheers
R.

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

What support service includes ? What not ?

[janetLSchaper]

Hello Radu,

Ok, thank you very much for the help.

Cheers,
Janet

[Radu]

Hi,

You’re welcome

Cheers
R.

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

What support service includes ? What not ?

[Author]

Posts