Highlighted

hover state & transition...

Enthusiast ,
Feb 21, 2018

Copy link to clipboard

Copied

Hi,

Not sure what's missing here, but the link transitions from the white to the darker color. However, from original template somewhere within the transitional shift, I can see a blue color. How do I target that if hover & focus are already "used up" below? - When I check the source, I can see the culprit which likes in original template. I did try to add .link a { } and with another color; but it's just not hitting it to make the alteration. Any recommendations?

.link a {

  color: #fff;

}

.link a:hover, a:focus {

  color: #551d1f;

}

in original WP template I am re-styling:

media="all"

a {

  1.    color: #337ab7;
  2.    text-decoration: none;}

Thank you.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Try

.link a {

  color: #fff !important;

}

.link a:hover, .link a:focus {

  color: #551d1f !important;

}

!important will override any persistent style rules within the original template.

Views

311

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

hover state & transition...

Enthusiast ,
Feb 21, 2018

Copy link to clipboard

Copied

Hi,

Not sure what's missing here, but the link transitions from the white to the darker color. However, from original template somewhere within the transitional shift, I can see a blue color. How do I target that if hover & focus are already "used up" below? - When I check the source, I can see the culprit which likes in original template. I did try to add .link a { } and with another color; but it's just not hitting it to make the alteration. Any recommendations?

.link a {

  color: #fff;

}

.link a:hover, a:focus {

  color: #551d1f;

}

in original WP template I am re-styling:

media="all"

a {

  1.    color: #337ab7;
  2.    text-decoration: none;}

Thank you.

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

Try

.link a {

  color: #fff !important;

}

.link a:hover, .link a:focus {

  color: #551d1f !important;

}

!important will override any persistent style rules within the original template.

Views

312

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 21, 2018 0
Adobe Community Professional ,
Feb 21, 2018

Copy link to clipboard

Copied

Try

.link a {

  color: #fff !important;

}

.link a:hover, .link a:focus {

  color: #551d1f !important;

}

!important will override any persistent style rules within the original template.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 21, 2018 0
Enthusiast ,
Feb 24, 2018

Copy link to clipboard

Copied

Question: In WP, some of the styles work but others seem to need the override of important. Is it typical/best practice to have the important on several style rules? I mean, is that a standard practice on your custom CSS? - Just for my own knowledge.

Thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 24, 2018 0
Adobe Community Professional ,
Feb 24, 2018

Copy link to clipboard

Copied

it depends on the template use... in WP most of the important rules are used just to be sure that some admin addons, or some component won't be mis used... but in a general way using important is the last tools to be used when none of others ways will be usable.

louis wrote something some times ago about the use of important... I should also read it again (I do'nt now)?....

!important CSS Declarations: How and When to Use Them — Smashing Magazine

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 24, 2018 0
Adobe Community Professional ,
Feb 25, 2018

Copy link to clipboard

Copied

!important is a last resort.  Use it only when necessary. 

Nancy

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 25, 2018 0