Help with CSS for link colours required

  • Resolved Lois Pallister

    (@lois-pallister)


    10 years, 4 months ago

    I am using a plugin that allows me to add CSS code to the site as a whole and to each page or post.

    Everything I have added so far has worked perfectly and I can’t understand why this isn’t working:

    .page-id-868 a:link{
    text-decoration: bold;
    color: #2ba6fc;

    .page-id-868 a:hover{
    text-decoration: bold;
    color: #ffffff;
    }

    This code does turn the link blue but the hover is just not working.

    Should I be writing the code differently?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Allison Tarr

    (@allisonplus)

    10 years, 4 months ago

    Do you have a link to the site in question where that link is? Maybe your selector is slightly off.

    Thread Starter Lois Pallister

    (@lois-pallister)

    10 years, 4 months ago

    Yes it is here: The blue text at the bottom of the page.
    I thought if a:link worked then a:hover should work.

    Thank you for your help.

    http://colourityou.co.uk/the-colour-it-you-duvet-cover/

    Allison Tarr

    (@allisonplus)

    10 years, 4 months ago

    Hi Lois,

    It looks like maybe your hover settings are being overwritten but other code for when the link has been visited.

    .page-id-868 a:visited {

}

    I’m not sure what you’d like your links to look like when someone has visited them already but you would insert that code within the above.

    Also, just a note that for your text-decoration CSS property, bold is not an option (http://www.w3schools.com/cssref/pr_text_text-decoration.asp) That would more likely be achieved by increasing the font-weight property.

    Thread Starter Lois Pallister

    (@lois-pallister)

    10 years, 4 months ago

    I wanted the link to remain blue after it has been visited.
    Thanks for the note re ‘bold’.
    Maybe that is the problem.

    Thread Starter Lois Pallister

    (@lois-pallister)

    10 years, 4 months ago

    I removed the text decoration and even added !important but it still won’t work!

    I’m confused!

    Allison Tarr

    (@allisonplus)

    10 years, 4 months ago

    Maybe the following?

    .art-footer-text a:visited {
   color: #2ba6fc;
}

.art-footer-text a:hover {
   color: #2ba6fc;
   font-weight: bolder;
}
    Thread Starter Lois Pallister

    (@lois-pallister)

    10 years, 4 months ago

    It wasn’t the footer text I wanted to change but the line in the text of the body of the page.

    I have put the footer text right now by using art-postcontent.

    I have got it to work
    By simply turning them round and putting the hover rule before the link colour rule!

    Very odd!
    But sorted.
    Thanks so much for your help 🙂

    Thread Starter Lois Pallister

    (@lois-pallister)

    10 years, 4 months ago

    This is odd indeed.
    It no longer works if I remove the !important from the hover colour.

    And it only works if the a:hover is before the a:link

    But it is working and I am very glad about that as I want different link colours on every page with them all white on hover.

    I just wish I knew why that is.
    On all my hand coded web sites I always used the order
    link
    hover
    active
    visited

    Hope it stays working!

    Thanks again – issue resolved.

    Thread Starter Lois Pallister

    (@lois-pallister)

    10 years, 4 months ago

    Just in case anyone else wants help
    I change the url of the page:

    http://colourityou.co.uk/restful-sleep-is-so-important/

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Help with CSS for link colours required’ is closed to new replies.