[Resolved] Customizing Read More Button

Home Forums Support [Resolved] Customizing Read More Button

Home Forums Support Customizing Read More Button

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #358677
    Sebastián

    Hi i would like to fully customize the read more text.

    From this: http://i.imgur.com/my9uW8n.png

    To something like this: http://i.imgur.com/SyXOSvV.png

    You guys know any code which might be useful or plugins which allows me to do that on the blog page?

    Thanks

    #358719
    Leo
    Staff
    Customer Support

    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.

    #358750
    Sebastián

    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

    #358754
    Leo
    Staff
    Customer Support

    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.

    #358827
    Sebastián

    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.

    #358832
    Leo
    Staff
    Customer Support

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

    #358856
    Sebastián

    None.

    #358858
    Leo
    Staff
    Customer Support

    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.

    #358920
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #359076
    Sebastián

    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!

    #359157
    Leo
    Staff
    Customer Support

    Try this addtional CSS:

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

    Worked!

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

    #359288
    Leo
    Staff
    Customer Support

    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.

    #359306
    Sebastián

    Perfect!

    Thank you!

    #359308
    Sebastián

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

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