WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] separate style/hover behaviour for read more link? (8 posts)

  1. spoole
    Member
    Posted 8 years ago #

    Hello,
    I'd like my readmore links on the index page to behave differently (link colour, hover colour) from the global a class used in the post content. I've tried styling the readmore text with a span class with the new colours as explained in the Codex, but the problem seems to be that WP puts the span after the href in the source so that somehow it doesn't get recognised as a link that should behave appropriately. Am I doing something wrong? WP 2.0.3

    The site is here.
    Thanks for any help.

  2. ganges
    Member
    Posted 8 years ago #

    First of all You dont need write as much CSS as You write
    from Your CSS


    .readmore { color: #663333;
    text-decoration: none;
    border-bottom: none;
    font-style: normal;
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: normal;
    }

    .readmore a:link { color: #663333;
    text-decoration: none;
    border-bottom: none;
    font-style: normal;
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: normal;
    }

    .readmore a:hover { color: #993333;
    text-decoration: none;
    border-bottom: 1px dotted #663333;
    font-style: normal;
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: normal;
    }

    .readmore a:visited { color: #663333;
    text-decoration: none;
    border-bottom: none;
    font-style: normal;
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: normal;
    }

    instead, try this

    span.readmore a {
    color: #663333;
    text-decoration: none;
    border-bottom: none;
    font-style: normal;
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: normal;
    }

    span.readmore a:hover {
    hover state color and tex-decoraration or what You want
    }

    Note, that You dont need repeating the same font-family properties

    on :hover and :visited pseudoclass

    Hope this specificity tricking help

  3. spoole
    Member
    Posted 8 years ago #

    Hi!
    Thanks for the advice, as you can tell I'm just a beginner at css ;-) But your code doesn't work. The link reverts to the grey text specified in the global a class. This is why I am suspecting it has something to do with the span being put after the a href in the source, and not before, as one would expect. Does this make sense?

  4. ganges
    Member
    Posted 8 years ago #

    You re right, i am miss this fact from your sourse

    try

    a span.readmore {
    styling here
    }

    please note, you will be styling span instead of a element

    If You feel You can, just add class "readmore" in place where this links "born" in php source
    than style this class as You wish

  5. spoole
    Member
    Posted 8 years ago #

    It works!!

    Thank you very much for your rapid and generous help :-)

  6. ganges
    Member
    Posted 7 years ago #

    My pleasure, spoole.

    But if You really want to style a element instead of span, You need to ajust class "readmore" to Your link. To do this

    1) Open file template-functions-post.php from Your wp-includes (WP-INCLUDES, NOT WP-CONTENT) dir.

    2) Backup this file into another dir

    3) Find line number 92 (wp 2.02, wp 2.03 )
    it seems like

    4) Ajust class "readmore" with compatibility with PHP sintax
    ie

    class=\"readmore\"

    5) Save and run WP. In page source You will find
    this link (a href) element with readmore class ajusted to it

    6) Style .readmore as You wish in Your CSS file

    7) If something goes wrong - just use Your old template-functions-post.php file or get it new from anothe WP installation.

    Please note, if upgrade WP, chance are You will be in need to repeat this procedure.

  7. spoole
    Member
    Posted 7 years ago #

    Thanks again, you are very kind and patient with a beginner. ;-)

  8. ztv
    Member
    Posted 7 years ago #

    Although i know the suggested editing of PHP files will work, I wonder if this is the most effective solution. Its "future-proof" aspects seem lacking.

    Upgrading the WP install would (if im not mistaken) replace these files, requiring another edit, waiting to be overlooked or forgotten about.

    Although it seems like an inane aspect, would this problem not be better suited as a plugin or perhaps a core feature?

Topic Closed

This topic has been closed to new replies.

About this Topic