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.
css wordpress textcolor
asked Sep 13 '13 at 21:58
MattMMattM
1,36652040
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.
css wordpress textcolor
asked Sep 13 '13 at 21:58
MattMMattM
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.
css wordpress textcolor
asked Sep 13 '13 at 21:58
MattMMattM
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
css wordpress textcolor
asked Sep 13 '13 at 21:58
MattMMattM
1,36652040
asked Sep 13 '13 at 21:58
MattMMattM
1,36652040
asked Sep 13 '13 at 21:58
MattMMattM
1,36652040
asked Sep 13 '13 at 21:58
MattMMattM
1,36652040
asked Sep 13 '13 at 21:58
MattMMattM
1,36652040
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
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 PeasRoddy 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
MattMMattM
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 PaoliniGiorgia Paolini
1
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
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 PeasRoddy 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 PeasRoddy 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 PeasRoddy 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 PeasRoddy of the Frozen Peas
7,09882859
answered Sep 13 '13 at 22:05
Roddy of the Frozen PeasRoddy of the Frozen Peas
7,09882859
answered Sep 13 '13 at 22:05
Roddy of the Frozen PeasRoddy of the Frozen Peas
7,09882859
answered Sep 13 '13 at 22:05
Roddy of the Frozen PeasRoddy of the Frozen Peas
7,09882859
7,09882859
add a comment |
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
MattMMattM
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
MattMMattM
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
MattMMattM
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
MattMMattM
1,36652040
answered Sep 13 '13 at 22:09
MattMMattM
1,36652040
answered Sep 13 '13 at 22:09
MattMMattM
1,36652040
answered Sep 13 '13 at 22:09
MattMMattM
1,36652040
1,36652040
add a comment |
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 PaoliniGiorgia Paolini
1
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 PaoliniGiorgia Paolini
1
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 PaoliniGiorgia Paolini
1
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 PaoliniGiorgia Paolini
1
answered May 12 '16 at 23:26
Giorgia PaoliniGiorgia Paolini
1
answered May 12 '16 at 23:26
Giorgia PaoliniGiorgia Paolini
1
answered May 12 '16 at 23:26
Giorgia PaoliniGiorgia Paolini
1
1
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can see the links in the footer of the home page under recent news.
– MattM
Sep 13 '13 at 21:58