• Hi, I am wondering how to style the “read more” link so that it is a hover button? Anyone that can point me in the correct direction I would appreciate it. Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • Here’s some CSS from a theme I’m installing. The trigger is adding the “more-link” class to the link.

    HTML from View Source
    <a href="http://my-site/my-post-url/" class="more-link">Read more</a>

    =============================
    CSS styling

    a.more-link:link, a.more-link:visited {
        -moz-border-radius: 3px 3px 3px 3px; /*round corners*/
        background: #7f7e7e;
        border: 1px solid #555555;
        color: #FFFFFF;
        float: right;
        font-family: some-font;
        font-style: italic;
        margin: 0;
        padding: 5px 10px;
        text-decoration: none;
     }

    ===============================
    If you need the code to turn the read more ellipse into a text link, this goes in the theme’s functions.php file:

    function excerpt_ellipse($text) {
       return str_replace(' [...]', '<a class="more-link" href="'.get_permalink().'"><br />Read more</a>', $text); }
    add_filter('the_excerpt', 'excerpt_ellipse');
    Thread Starter rtibbs4

    (@rtibbs4)

    thanks for your reply.
    I completely get the css and function code but I am not sure what to do with the code below which is in my index page? What do I need to do to the [Read More…] line? Thanks in advance.

    `<?php
    if(sp_get_option(‘content_archive’) == ‘full’) :
    the_content(__(‘[Read more…]’, ‘genesis’));
    else :
    if(genesis_get_option(‘thumbnail’))
    genesis_image(array(‘format’ => ‘html’, ‘size’ => genesis_get_option(‘image_size’), ‘attr’ => array(‘class’ => ‘alignleft post-image’)));
    the_excerpt();
    endif;
    ?>

    Do you have a URL you can post on which I can see what you have now? That will make it easier.

    Moderator t-p

    (@t-p)

    Here is also this general guide: Customizing the Read More

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to style the "read more" link?’ is closed to new replies.