Smart Passive Income Pro – Remove Comment Bubble in SPI Theme

This tutorial shows you how to remove the comment bubble with the comment count from the Smart Passive Income Pro child theme by StudioPress. This post answers this question from a member of the StudioPress community:

I would like to know how to Remove the Comment Bubble in SPI theme and simply add the comment count to the post meta section. I am using the latest version of the SPI (Smart Passive Income) theme

The Solution

There’s 2 simple steps:

Step 1 : Comment out or remove the following PHP code from between lines 124 -131 in the Smart Passive Income Pro themes functions.php file:

/* Modify the entry info
add_filter( 'genesis_post_info', 'spi_post_info' );
function spi_post_info( $post_info ) {

$post_info = __( 'By [post_author_posts_link] on [post_date] [post_comments zero="0" one="1" more="%"][post_edit]', 'smart-passive-income-pro' );

return $post_info;

} */

Step 2 : Comment out or remove the following CSS rules between lines 1680 – 1768 in the Smart Passive Income Pro themes style.css file:

/*
.archive .content .entry-comments-link,
.single .content .entry-comments-link,
.page-template-page_blog .content .entry-comments-link {
	background-color: #31ac61;
	border-radius: 4px;
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	line-height: 1;
	padding: 10px 20px;
	position: absolute;
	right: -5px;
	top: -3px;
	transform: rotate(5deg);
}

.archive .content .entry-comments-link:after,
.archive .content .entry-comments-link:before,
.single .content .entry-comments-link:after,
.single .content .entry-comments-link:before,
.page-template-page_blog .content .entry-comments-link:after,
.page-template-page_blog .content .entry-comments-link:before {
	border: solid transparent;
	content: " ";
	height: 0;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 100%;
	width: 0;
}

.archive .content .entry-comments-link:after,
.single .content .entry-comments-link:after,
.page-template-page_blog .content .entry-comments-link:after {
	border-color: rgba(49, 172, 97, 0);
	border-left-color: #31ac61;
	border-width: 10px;
	margin-left: -5px;
	margin-top: -10px;
}


.archive .content p.entry-meta .entry-comments-link > a,
.single .content p.entry-meta .entry-comments-link > a,
.page-template-page_blog .content p.entry-meta .entry-comments-link > a {
	color: #fff;
	font-size: 24px;
	font-size: 2.4rem;
}

.featured-content .entry-comments-link,
.sidebar .featured-content .entry-comments-link,
.single .after-entry .featured-content p.entry-meta .entry-comments-link {
	background: transparent;
	line-height: 1.625;
	padding: 0;
	position: static;
	transform: none;
}

.featured-content .entry-comments-link:after,
.featured-content .entry-comments-link:before,
.sidebar .featured-content .entry-comments-link:after,
.sidebar .featured-content .entry-comments-link:before,
.single .after-entry .featured-content p.entry-meta .entry-comments-link:after,
.single .after-entry .featured-content p.entry-meta .entry-comments-link:before {
	display: none;
}

.featured-content .entry-comments-link > a,
.sidebar .featured-content .entry-comments-link > a,
.single .content .after-entry .featured-content p.entry-meta .entry-comments-link > a {
	color: #6d6d6d;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: .6px;
}

.featured-content a.alignleft ~ .entry-header .entry-comments-link,
.featured-content a.alignright ~ .entry-header .entry-comments-link,
.sidebar .featured-content a.alignleft ~ .entry-header .entry-comments-link,
.sidebar .featured-content a.alignright ~ .entry-header .entry-comments-link,
.single .after-entry .featured-content a.alignleft ~ .entry-header .entry-comments-link,
.single .after-entry .featured-content a.alignright ~ .entry-header .entry-comments-link {
    float: none;
}
*/

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.