Hover Status Color Change, Avada Theme, Wordpress

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.

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.

asked Sep 13 '13 at 21:58

MattM

1,36652040

You can see the links in the footer of the home page under recent news.

– MattM
Sep 13 '13 at 21:58

add a comment |

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.

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.

asked Sep 13 '13 at 21:58

MattM

1,36652040

You can see the links in the footer of the home page under recent news.

– MattM
Sep 13 '13 at 21:58

add a comment |

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.

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.

asked Sep 13 '13 at 21:58

MattM

1,36652040

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.

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.

css wordpress textcolor

asked Sep 13 '13 at 21:58

MattM

1,36652040

asked Sep 13 '13 at 21:58

MattM

1,36652040

asked Sep 13 '13 at 21:58

MattM

1,36652040

asked Sep 13 '13 at 21:58

MattM

1,36652040

asked Sep 13 '13 at 21:58

MattM

1,36652040

You can see the links in the footer of the home page under recent news.

– MattM
Sep 13 '13 at 21:58

add a comment |

You can see the links in the footer of the home page under recent news.

– MattM
Sep 13 '13 at 21:58

You can see the links in the footer of the home page under recent news.

– MattM
Sep 13 '13 at 21:58

add a comment |

3 Answers
3

active

oldest

votes

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.

answered Sep 13 '13 at 22:05

Roddy of the Frozen Peas

7,09882859

add a comment |

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.

answered Sep 13 '13 at 22:09

MattM

1,36652040

add a comment |

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;

}

answered May 12 '16 at 23:26

Giorgia Paolini

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f18795908%2fhover-status-color-change-avada-theme-wordpress%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

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.

answered Sep 13 '13 at 22:05

Roddy of the Frozen Peas

7,09882859

add a comment |

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.

answered Sep 13 '13 at 22:05

Roddy of the Frozen Peas

7,09882859

add a comment |

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.

answered Sep 13 '13 at 22:05

Roddy of the Frozen Peas

7,09882859

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.

answered Sep 13 '13 at 22:05

Roddy of the Frozen Peas

7,09882859

answered Sep 13 '13 at 22:05

Roddy of the Frozen Peas

7,09882859

answered Sep 13 '13 at 22:05

Roddy of the Frozen Peas

7,09882859

answered Sep 13 '13 at 22:05

Roddy of the Frozen Peas

7,09882859

add a comment |

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.

answered Sep 13 '13 at 22:09

MattM

1,36652040

add a comment |

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.

answered Sep 13 '13 at 22:09

MattM

1,36652040

add a comment |

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.

answered Sep 13 '13 at 22:09

MattM

1,36652040

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.

answered Sep 13 '13 at 22:09

MattM

1,36652040

answered Sep 13 '13 at 22:09

MattM

1,36652040

answered Sep 13 '13 at 22:09

MattM

1,36652040

answered Sep 13 '13 at 22:09

MattM

1,36652040

add a comment |

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;

}

answered May 12 '16 at 23:26

Giorgia Paolini

add a comment |

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;

}

answered May 12 '16 at 23:26

Giorgia Paolini

add a comment |

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;

}

answered May 12 '16 at 23:26

Giorgia Paolini

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;

}

answered May 12 '16 at 23:26

Giorgia Paolini

answered May 12 '16 at 23:26

Giorgia Paolini

answered May 12 '16 at 23:26

Giorgia Paolini

answered May 12 '16 at 23:26

Giorgia Paolini

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Htykuut