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 Brad Dalton on January 30, 2017 "0"', '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;
}
*/

The Solution

Reader Interactions

Leave a Reply Cancel reply