Site logo

Archived topic

Seperate layout Blog category and Single post

3 replies · Started by trung on January 13, 2019

Viewing posts 1–4 of 4

Hi GeneratePress,

I want to move category link below post title, into same line with post date and move all (post title, category link, post date) into center, and I use below code:
- first, in code snippet:

add_filter( 'generate_post_date_output', function( $date ) {
    $categories_list = get_the_category_list( ', ' );

    if ( $categories_list ) {
        echo $categories_list . ' | <span class="categories">' .  '</span>';
    }
	
	if ( is_singular() ) {
        return $date;
    }

    echo $date;

   
} );

- second, in simple CSS:

header.entry-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

header.entry-header h1.entry-title {
    width: 100%;
}

.entry-header .entry-meta.cat-links:after {
    content: " / ";
    display: inline-block;
    margin: 0 10px;
}
header.entry-header h1.entry-title {
text-align: center;
}

body.single .grid-container {
    max-width: 700px;
}

It works well on Blog category page and on Single post. But I only want move post title, category link, post date into center on Single post, I don't want it happening on Blog category page (on Blog category page, I want layout is left alignment). How can I adjust the code?

Thank you.

Hi there,

Try replacing your CSS with this:

.single header.entry-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.single header.entry-header h1.entry-title {
    width: 100%;
}

.entry-header .entry-meta.cat-links:after {
    content: " / ";
    display: inline-block;
    margin: 0 10px;
}

.single header.entry-header h1.entry-title {
    text-align: center;
}

body.single .grid-container {
    max-width: 700px;
}

Let me know :)

It works well. Thank you, Tom.

You're welcome :)

This archived topic is closed to new replies.