[Resolved] Custom style "read more" tag

[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

[Tom]

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 🙂

[Philippe]

Fantastic 🙂

Tks so mutch Tom

[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) ?

[Tom]

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 🙂

[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?

[Tom]

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">

[Daniel]

Worked a treat Tom. Thanks 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts