Archived topic
Seperate layout Blog category and Single post
3 replies · Started by trung on January 13, 2019
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 :)