[Resolved] Custom style "read more" tag

Home Forums Support [Resolved] Custom style "read more" tag

Home Forums Support Custom style "read more" tag

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #67364
    Philippe

    Hello

    I tried to change the style of the tag “read more” following this tutorial :

    http://wpbeaches.com/make-read-link-posts-genesis-child-theme/

    But it does not work ?

    Do you have an idea for me ?

    Tks

    #67562
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a try:

    .read-more,
    .read-more:visited {
        background: none repeat scroll 0 0 #222;
        color: #fff;
        display: table;
        margin-top: 1.5em;
        padding: 10px 20px;
    }
    
    .read-more:hover {
          background:#666;
          color:#FFF;
    }

    Adjust the colors as needed πŸ™‚

    #67942
    Philippe

    Fantastic πŸ™‚

    Tks so mutch Tom

    #67954
    Philippe

    Result :

    http://image.noelshack.com/fichiers/2015/04/1422020195-capture-du-2015-01-23-14-25-34.png

    You would have an idea to remove the “…” (point 1) ?

    And for insert “border-radius:2px;” (point 2) ?

    #68078
    Tom
    Lead Developer
    Lead Developer

    1. You’ll have to add a custom function for this – I suggest using this plugin: https://wordpress.org/plugins/code-snippets/

    if ( ! function_exists( 'generate_custom_blog_excerpt_more' ) ) :
    	/**
    	 * Prints the read more HTML
    	 */
    	add_filter( 'excerpt_more', 'generate_custom_blog_excerpt_more', 100 );
    	add_filter( 'the_content_more_link', 'generate_custom_blog_excerpt_more', 100 );
    	function generate_custom_blog_excerpt_more( $more ) {
    		$generate_settings = wp_parse_args( 
    			get_option( 'generate_blog_settings', array() ), 
    			generate_blog_get_defaults() 
    		);
    		return '<div class="read-more-button"><a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . $generate_settings['read_more'] . '</a></div>';
    	}
    endif;

    Then your CSS can change to this:

    .read-more-button {
          margin-top: 1.5em;
    }
    
    .read-more,
    .read-more:visited {
        background: none repeat scroll 0 0 #222;
        color: #fff;
        display: inline-block;
        padding: 10px 20px;
    }
    
    .read-more:hover {
          background:#666;
          color:#FFF;
    }

    Hope this helps πŸ™‚

    #266119
    Daniel

    Hi Tom,

    This is great, but unlike Philippe, I would like to keep the “…”
    How do I add that back into the custom functions?

    #266222
    Tom
    Lead Developer
    Lead Developer

    Not sure how it would look to have … before a button?

    You can add it before this: <div class="read-more-button"> so it looks like: ...<div class="read-more-button">

    #266239
    Daniel

    Worked a treat Tom. Thanks πŸ™‚

    #266259
    Tom
    Lead Developer
    Lead Developer

    You’re welcome πŸ™‚

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.