[Theme: Virtue] How to center content on category page & single posts by default

Hey,
1. In your Blog edit page you should see Blog List Options then under that you should see Display Sidebar? Set that to No. If you do not see Blog List Options you may need to select it from the Screen Options tab on the top right of the page.

2. Try adding this to your custom css box in Theme Options > Advanced Settings:

.category aside.col-lg-3.col-md-4.kad-sidebar {
    display: none;
}
.category .main.col-lg-9.col-md-8.postlist {
    width: 100%;
}

Hannah

Hi Hannah,

Thank you for your reply!

1. I have set Display Sidebar to No. This works for the blog page, but single posts are still display with an invisible sidebar. Instead of editing each post and setting Post Options > Display Sidebar to No individually (too many posts involved!), is it possible to set this by default?

2. Your custom css worked magically!! ??

3. Some small tweaks I’m not sure if they are possible: I chose to display the blog with full post content. Is there a way not to display the keyword tags at the bottom of the posts? Also at the top of posts, hide the tiny category icon comments icon, and comment counter?

My blog is https://www.truphotos.com/blog/

Thank you so much.

I decided to try it out but not sure if it’s done correctly.

3.
To remove the tags at the bottom in blog page only (I want them to show in single post page), in content-fullpostfull.php, i commented out this line:

<footer class=”single-footer”>
<!– <?php $tags = get_the_tags(); if ($tags) { ?> <span class=”posttags”><i class=”icon-tag”></i> <?php the_tags(”, ‘, ‘, ”); ?> </span><?php } ?> –>

<?php wp_link_pages(array(‘before’ => ‘<nav class=”page-nav”><p>’ . __(‘Pages:’, ‘virtue’), ‘after’ => ‘</p></nav>’)); ?>
<?php
if ( comments_open() ) :
echo ‘<p class=”kad_comments_link”>’;
comments_popup_link(
__( ‘Leave a Reply’, ‘virtue’ ),
__( ‘1 Comment’, ‘virtue’ ),
__( ‘% Comments’, ‘virtue’ ),
‘comments-link’,
__( ‘Comments are Closed’, ‘virtue’ )
);
echo ‘</p>’;
endif;
?>
</footer>

To remove the icons and comments counter, in entry-meta-subhead.php, I commented out these portions:

<?php $post_category = get_the_category($post->ID); if ( $post_category==true ) { ?>
<span class=”postedintop”> <!– <i class=”icon-folder-open”></i> –>

<?php _e(‘posted in:’, ‘virtue’); ?> <?php the_category(‘, ‘) ?></span> <?php }?>
<!– <span class=”kad-hidepostedin”>|</span>
<span class=”postcommentscount”>
<i class=”icon-comments-alt”></i> <?php comments_number( ‘0’, ‘1’, ‘%’ ); ?>
</span> –>

Did I manage to do it correctly?
Thanks again.

Sorry for another post. I managed to solve some of the above on my own.

For 3, I changed my mind and decided to hide all meta data for category and comments counter below the post title using the following CSS:

.postedintop, .postcommentscount, .kad-hidepostedin {
display: none;
}

I still need help with:

-Single posts page are still displaying an invisible sidebar. How can I hide the sidebar for all posts without editing each post individually?

-Is it possible to change the published post date to a single line date (eg 07 July 2016) with original grey background and position it centered below the post title?

Thank you once again!

1. This CSS will get rid of the sidebar on all of your posts, previous and future.

.single-post .kad-sidebar {
    display: none;
}
.single-post .main {
    width: 100%;
}

2. Try this CSS:

.postdate.bg-lightgray.headerfont {
    display: flex;
    font-size: 14px
}
.postdate span {
    font-size: 14px;
    padding-right: 5px;
}

Let me know if that works for you.

Hi Kevin,

Thank you for your help.
1. It works! I didn’t realise it was such a straightforward solution.

2. The date formatting is exactly what I was looking for! However, it is still in the same position as before. Is it possible to position the date below the titles?

Thank you so much!

Hey,
Moving below the title isn’t an option with css because it’s not designed to do that (the output is above. You can however use a child theme and rearrange when that is called into the template.

Kadence Themes

Hi KT,

Thank you for your reply.

May I know what do you mean by the output is above? I think moving the date above the title works for my design too, if that is an option.

If I use a child theme, could you let me know what I should edit and how?

Thank you for your help.

With regards to the centering of posts in the category page, I noticed that when I switched Page/Post Settings > Blog Archive > “Full”, the invisible sidebar appears again.

Is there something I should add? My current code for hiding the sidebar is:
.category aside.col-lg-3.col-md-4.kad-sidebar {
display: none;
}
.category .main.col-lg-9.col-md-8.postlist {
width: 100%;
}

Can you post a link to the page that’s displaying this way? That will be the best way to find a solution.

Do you want to hide the sidebar throughout your entire site? If so, you can use this css:

aside.col-lg-3.col-md-4.kad-sidebar {
display: none;
}
.main.col-lg-9.col-md-8.postlist {
width: 100%;
}

Hannah

Hi Kevin,

Sorry for missing that out.
As you can see from the blog page (https://www.truphotos.com/blog/), the date is aligned to the right of the title. I’m trying to see if it can be positioned below the title and centred? If not, is it possible to centre it above the title?

Hi Hannah,
It’s not working this time. The page that is having this issue are the blog categories page. The sidebar only appears when the Page/Post Settings > Blog Archive is set to “Full”.
https://www.truphotos.com/category/children/

Many thanks.

1. As Ben said above, this is something you’d have to edit the template to accomplish via a child theme. Here is some CSS that should align it above the post though.

.postdate.bg-lightgray.headerfont {
    float: none;
    width: 85px;
    margin-right: auto;
    margin-left: auto;
}

.postmeta.updated.color_gray {
    width: 100%;
}

2. I’m not seeing this issue. Are you sure that Hannah’s CSS isn’t working? Can you set it to full so I can see the sidebar?

Thanks!

Hi Kevin,

1. The CSS works for a few post dates, but others doesn’t seem to align well.
Also, on mobile devices, the titles does not seem to be using the full width of the page.
https://www.truphotos.com/blog/

2. I have set it to full. Please take a look when you have the time.

Many thanks!

1. Which posts exactly are no aligning well? What would you like different?
Looks like you’re adding 70px right padding to your h1 tags?

2. Try adding this css:

.category .main.col-lg-9.col-md-8.single-article.fullpost {
    width: 100%;
}

Does that work for you?

Hannah