Hover Status Color Change, Avada Theme, WordPress

1 Views

We are using the Avada theme on a wordpress website: http://skybox.wearetechnology.com/

We would like to change the hover status of the links on our site, right now they go to white and the client has requested a white background.

Read More

I have tried to change the CSS to reflect this but somewhere in the theme settings they have the a:hover state coded into an embedded style sheet with the !important code at the end.

I can’t find anywhere in the theme settings that allow to change to hover state color (even though you can change just about any other color).

Is there a way to override the code so that I can change the color back to a more visible color?

Right now I am using a text shadow and a stroke but it doesn’t look very good.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. If you make a CSS selector more specific than the one with the !important annotation, you should be able to override the hover color as long as you include an !important annotation of your own.

    For example, this:

    .featured-post a:hover {
    background-color: pink !important;
}

    Will override this:

    a:hover {
    background-color: #ffffff !important;
}

    Here’s a simple JSFiddle demo. In the demo, the second link’s styling overrides the !important annotation on the first due to having a more specific selector.

  2. Nevermind, I found that in the Avada Theme there is a place in the backend under Theme Options to add custom code that overides any of the theme’s CSS.

  3. This is the CSS I had to add in Avada custom css to remove the hover state color in Avada 4.0.1:

    /* Undoes very specific css with an important clause from the author of the   theme */
.fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover     .heading h2, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-  link-icon-hover .heading .heading-link h2, body .fusion-content-boxes-1 .fusion-   content-box-hover .link-area-box-hover .heading h2, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .heading-link h2, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more::after, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more::before, body .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover:after, body .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover:before, body .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more::after, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more::before, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .icon .circle-no, body .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-  hover .icon .circle-no {
    color: black !important;
}