[Resolved] Style Blog pagination andlocate at top

[John MacKenzie]

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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John MacKenzie]

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

thanks a lot!
John

[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?

[Tom]

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',
    );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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!

[Elvin]

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?"

[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

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elvin]

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?"

[John MacKenzie]

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

[Elvin]

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?"

[Author]

Posts