Customizing Read More Button

Hi there,

You can try changing it in the customizer:
https://docs.generatepress.com/article/blog-overview/#blog-content

If that's not good enough then try this filter:
https://docs.generatepress.com/article/generate_excerpt_more_output/

See Tom's example here: https://generatepress.com/forums/topic/is-there-a-way-to-change-the-automatic-to-in-gp/#post-314894

As for making it a button style, you can try the CSS here:
https://docs.generatepress.com/article/adding-buttons/

And the selector would be .read-more

A link to your site might be helpful if you get stuck.

I didn't understand anything.

I installed Code Snippets on my site

And used this:

sprintf( ' ... <a class="read-more" title="%1$s" href="%2$s">%3$s</a>',
	the_title_attribute( 'echo=0' ),
	esc_url( get_permalink( get_the_ID() ) ),
	__( 'Read more', 'generatepress' )
);

But nothing happened.

My site is: https://www.mmarketingonline.com/blog

So basically you want to remove the dots, change the wording and make it a button?

This function should work to remove the dots:

add_filter( 'generate_excerpt_more_output','lh_change_read_more' );
function lh_change_read_more() {
    return sprintf( ' <a title="%1$s" class="read-more" href="%2$s">Read more</a>',
        the_title_attribute( 'echo=0' ),
        esc_url( get_permalink( get_the_ID() ) )
    );
}

You can change the working in the customizer: https://docs.generatepress.com/article/blog-overview/#blog-content

Let me know if this works then I'll give you the CSS.

My read more text says: Continua Leyendo... (Which means keep reading) So it's ok.

I don't really care about the dots.

All i care is the button form the colors the hover and the margins.

Are you using any plugins or special code to display that page?

None.

That's weird because I'm seeing these classes that are giving CSS styles that are not from GP:
https://s3.postimg.org/6n7mss2ib/toolbox.png

Some kind of tool box?

If you turn off the caching/minifying plugin I might be able to tell where it came from.

This will be a feature in GPP 1.5.

For now, you can do something like this, and just adjust the colors:

a.read-more {
    display: inline-block;
    background: red;
    color: white !important;
    padding: 15px;
    border-radius: 10px;
}

Leo i swear i don't have any toolbox i guess that line must be from the AddThis Buttons floating on the left. But they don't block anything.

Tom, thanks. Is there a way to adjust the margins (not only the padding) of the button and the position?

Now: http://i.imgur.com/dO4cO9W.png

What I want: http://i.imgur.com/7J1aaZr.png

Thank you both!

Try this addtional CSS:

.read-more-container {
    float: right;
    padding-right: 10px;
    padding-top: 10px;
}
.blog .entry-content p {
    margin-bottom: 0;
}

Worked!

And If I want to change the hover colours and adjust the position of the button?

For hover:

a:hover.read-more {
    color: #000000;
    background-color: #ffffff;
}

Edited the code above for the position: https://generatepress.com/forums/topic/customizing-read-more-button/#post-359157

You can adjust the padding px number.

Perfect!

Thank you!

Oh one last thing i don't want the buttons to change the text colours when a user clicks on them