[Resolved] Custom Read more button design with custom Excerpt

Home Forums Support [Resolved] Custom Read more button design with custom Excerpt

Home Forums Support Custom Read more button design with custom Excerpt

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2322802
    maxime

    Hello,

    I changed my theme to the Scribe one but I’m having an issue with the Read more button in the archive card.

    I added a description through the custom Excerpt field in the post settings and then the Read more button disappear. I looked in the support and found that I can put it back with this PHP code, I added both. But I can’t find a way to customize it with CSS, this buttons says “leer mas” (it is present for the 2 first post that have custom excerpt). This help didn’t work and neither other post or documentation that I have read.

    In case of and if it’s easier I have 2 other buttons.

    You can see the CSS I want from the third post that doesn’t have a custom excerpt so for this one the button comes out good. This button says “seguir leyendo” Here is the CSS

    .read-more{background-image:linear-gradient(to right,#0073aa 0,#33dd82 51%,#0073aa 100%);border-radius:50px;}
    .read-more{transition:1s;background-size:500% auto;}
    .read-more:hover{background-position:right center;color:#fff;text-decoration:none}

    And at last I tried to add a bloc button (this one says “Test”) The CSS is almost perfect but the transition doesn’t work, you can see the difference with the other one. Here is the CSS

    .gb-button-97fc9af3{background-image:linear-gradient(to right,#0073aa 0,#33dd82 51%,#0073aa 100%);border-radius:50px;}
    .gb-button-97fc9af3{transition:1s;background-size:500% auto;}
    .gb-button-97fc9af3:hover{background-position:right center;color:#fff;text-decoration:none}

    So my question is can the button “seguir leyendo” appears when I have a custom excerpt? Or which of the other one can I use with the good CSS?

    Thank you

    #2322842
    Ying
    Staff
    Customer Support

    Hi Maxime,

    The second code is what you need:
    https://docs.generatepress.com/article/activating-read-custom-excerpt/

    After enabling the PHP code, the Read more button should appear.

    Let me know!

    #2322867
    maxime

    Oh sorry because I had both there was a conflict, that’s why I couldn’t understand. So it appears right and I did the CSS with .read-more-button-container a.button
    Just one more thing please, where can I change the text? Because it’s not in the Archive card element, neither in the Blog personalisation.

    Thank you.

    #2322929
    Ying
    Staff
    Customer Support

    It’s using the theme’s read more button, so you can change it at customizer > layout > blog > Read more label.

    #2322931
    maxime

    That’s what I thought but it’s not taking it into account ๐Ÿ™
    Please see the image attached.

    #2322940
    Ying
    Staff
    Customer Support

    That’s weird, does it change in the customizer preview?

    #2322946
    maxime

    It changes correctly for the button without the custom excerpt but not for the button with the custom excerpt (the one that I added with the PHP). And I don’t know where the “Leer mas” is coming from right now, although I had it in the previous theme (marketer) that I changed today. Would this has something to do with it ?

    #2322955
    Ying
    Staff
    Customer Support

    Ah I see, in this case, you’ll need to modify the PHP code, replace the Read more with Seguir leyendo.

    add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
    function tu_excerpt_metabox_more( $excerpt ) {
        $output = $excerpt;
    
        if ( has_excerpt() ) {
            $output = sprintf( '%1$s <p class="read-more-button-container"><a class="button" href="%2$s">%3$s</a></p>',
                $excerpt,
                get_permalink(),
                __( 'Seguir leyendo', 'generatepress' )
            );
        }
    	
        return $output;
    }

    The Leer mรกsis the direct translation from Read more.

    #2322958
    maxime

    Ahhhh I got it, I didn’t think that translation would work from a PHP code but that’s good to know ๐Ÿ™‚
    Thank you very much, I’m all set.

    #2322965
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

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