[Resolved] Style Blog pagination andlocate at top

Home Forums Support [Resolved] Style Blog pagination andlocate at top

Home Forums Support Style Blog pagination andlocate at top

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1568043
    John MacKenzie

    Hi guys how can i style the blog pagination like this page

    #1568319
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    #nav-below {
        text-align: right;
    }
    .nav-links .page-numbers {
        display: inline-block;
        min-width: 30px;
        line-height: 39px;
        text-align: center;
        border-radius: 2px;
        border: 1px solid #eaeaea;
    }
    
    .nav-links .next.page-numbers, .nav-links .prev.page-numbers {
        width: auto;
        padding: 0 20px;
    }
    
    .nav-links .page-numbers {
        background-color: #fcf5e3;
        color:#a21d2c;
    }
    
    .nav-links .page-numbers:hover,
    .nav-links .page-numbers.current {
        background-color: #a21d2c;
        color: #fff;
    }
    #1569381
    John MacKenzie

    Thanks! and how do i locate it at the top of the page? (or both perhaps?)

    thanks a lot!
    John

    #1569390
    John MacKenzie

    also how to get the comments and categories in one line next to the author under the title like this, I saw a post form 2019 that suggested it would be easier in gp 2.3 but i dont see settings for moving it?

    #1569605
    Tom
    Lead Developer
    Lead Developer

    You could try moving it to the top like this:

    add_action( 'generate_before_main_content', function () {
        if ( ! is_singular() ) {
            generate_content_nav( 'nav-below' );
        }
    } );

    As for the post meta, you can do this:

    add_filter( 'generate_header_entry_meta_items', function() {
        return array(
            'author',
            'categories',
            'comments-link',
            'date',
        );
    } );
    #1570931
    John MacKenzie

    thanks that’s better but how to separate the meta items a bit and add icons like oin the original version and background colour to the slides?

    thanks!

    #1571023
    Elvin
    Staff
    Customer Support

    Hi,

    thanks that’s better but how to separate the meta items a bit and add icons like oin the original version and background colour to the slides?

    There are multiple ways of adding the icon. You can either:

    Use CSS and add the icon using pseudo element ::before.

    Or you can modify how the page outputs its meta by adding in the icon’s markup to the entry meta output using generate_inside_post_meta_item_output
    https://docs.generatepress.com/article/generate_inside_post_meta_item_output/

    As for spacing, we can do that with plain CSS:

    Example:

    article.post .entry-meta > span {
        margin-right: 40px;
    }

    I just copied the CSS from your original site and changed the selectors a bit. 🙂

    …background colour to the slides?

    I’m not sure what you mean. Are you pertaining to the post items?

    Let us know. 🙂

    A wise man once said:
    "Have you cleared your cache?"

    #1572295
    John MacKenzie

    thanks@ i got all but the comment one? cant get that to show but i also see in the code this

    <span class=”gp-icon icon-comments”><svg viewBox=”0 0 512 512″ aria-hidden=”true” role=”img”
    so almost looks like GP should show in icon bu the comments meta item?

    the background colour on the current site the most recent post has a background colour behind it, how to do that?

    also though these items are ALSO showing below the blog posts as well
    Categories Featured
    1 Comment

    and those were showing icons already for comments and categories?

    thanks
    John

    #1572702
    David
    Staff
    Customer Support

    Add this CSS to get the Comment icon to display:

    .entry-header .entry-meta .gp-icon {
        display: inline-flex;
    }

    This PHP Snippet to remove the Footer Meta:

    add_action( 'wp', function() {
          remove_action( 'generate_after_entry_content', 'generate_footer_meta' );
    } );

    Add the container and background to the sticky post you would add this CSS:

    .post.sticky  {
        padding: 30px;
        overflow: hidden;
        background-color: #fcf8e3;
        border: 1px solid #f4dcab;
        position: relative;
    }
    #1572709
    Elvin
    Staff
    Customer Support

    thanks@ i got all but the comment one? cant get that to show but i also see in the code this

    To add to David’s approach:

    You can play around with generate_svg_icon filter.

    add_filter( 'generate_svg_icon', function( $output, $icon ) {
        if ( 'comments' === $icon ) {
            $svg = 'your <svg>...</svg> here';
    
            return sprintf(
                '<span class="gp-icon %1$s">
                    %2$s
                </span>',
                $icon,
                $svg
            );
        }
    
        return $output;
    }, 15, 2 );

    You can actually do this to the other entry meta icons too.

    You can change the if condition to if ( 'categories' === $icon ) for category meta or if ( 'tags' === $icon ) for tag meta.

    A wise man once said:
    "Have you cleared your cache?"

    #1580906
    John MacKenzie

    thanks a lot! i got it sorted form your last posts.

    #1580960
    Elvin
    Staff
    Customer Support

    thanks a lot! i got it sorted form your last posts.

    Nice one. No problem. Glad you got it sorted. 🙂

    A wise man once said:
    "Have you cleared your cache?"

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