[Resolved] Navigation Previous next // Button Style

Home Forums Support Navigation Previous next // Button Style

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1035349
    Ernst Wilhelm

    I ‘ve turned on the pref next mode in a way
    < prev post_title next post_title >

    1st What do I need to do convert the post_title link into a button.
    2nd Can I change the post_title into something like previous for the left option and next for the right option.

    Cheers, Ernst Wilhelm Grรผter

    Newbie with generatepress

    #1035519
    Leo
    Staff
    Customer Support

    Hi there,

    1. Let’s try solve #2 first then I’ll provide some CSS.

    2. Can you try this PHP snippet here?
    https://generatepress.com/forums/topic/changing-post-navigation-text-to-next-instead-of-title/#post-737583

    Adding PHP: https://docs.generatepress.com/article/adding-php/

    Let me know ๐Ÿ™‚

    #1035575
    Ernst Wilhelm

    It works fine. Thanks.

    Newbie with generatepress

    #1035607
    Leo
    Staff
    Customer Support

    Now you can add some CSS to make it a button style:

    span.next, span.prev {
        background-color: #000;
        padding: 15px 10px;
    }
    #1035622
    Ernst Wilhelm

    What do i need to do to apply the theme style to the button (e.g. post comment button or read more button)?

    Thank you.

    Newbie with generatepress

    #1035633
    Leo
    Staff
    Customer Support

    Can you modify the PHP snippet to this:

    add_filter( 'next_post_link', function( $output, $format, $link, $post ) {
      	if ( ! $post ) {
    	  return '';
    	}
      
    	return sprintf(
    		'<div class="nav-next"><span class="next button"><a href="%1$s" title="%2$s">Next</a></span></div>',
    	  	get_permalink( $post ),
    	  	$post->post_title
    	);
    }, 10, 4 );
    
    add_filter( 'previous_post_link', function( $output, $format, $link, $post ) {
      	if ( ! $post ) {
    	  return '';
    	}
      
    	return sprintf(
    		'<div class="nav-previous"><span class="prev button"><a href="%1$s" title="%2$s">Previous</a></span></div>',
    	  	get_permalink( $post ),
    	  	$post->post_title
    	);
    }, 10, 4 );

    Then remove the CSS I provided above?

    Let me know ๐Ÿ™‚

    #1035957
    Ernst Wilhelm

    Hello Leo. Rmoving the css stuff gave it a pure text style approach. So I decided not to remove the css you provided. This comes close to what I want. Only outstanding issue for now is I need to change the color of the text wihtin the button into white.

    >>> SORRY I RE-OPENDED THE TOPIC <<<

    Newbie with generatepress

    #1036431
    David
    Staff
    Customer Support

    Hi there,

    this CSS to change the next / prev text color:

    span.next,
    span.prev,
    span.next a,
    span.prev a {
        color: #fff;
    }
    #1036481
    Ernst Wilhelm

    Hi David. Many thanks.

    I am sorry but it there is another question poppin’ up (hopefully the last one ๐Ÿ™‚ )
    How do I define the color setting for mouse hover?

    Cheers

    Newbie with generatepress

    #1036516
    David
    Staff
    Customer Support

    Like so:

    span.next:hover,
    span.prev:hover,
    span.next:hover a,
    span.prev:hover a {
        color: #fff;
    }
    #1036610
    Ernst Wilhelm

    Great. Now another question. The hoover color for the button itself. Your advice is really appreciated.

    Newbie with generatepress

    #1036614
    David
    Staff
    Customer Support

    Try this:

    span.next:hover, span.prev:hover {
        background-color: #000;
    }
    #1036621
    Ernst Wilhelm

    Thanks David.

    Newbie with generatepress

    #1036630
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.