[Plugin: WordPress Popular Posts] space after the thumbnail

Hi aabusaad,

This can be easily done using CSS. Go to your wordpress-popular-posts/style folder and you will find the stylesheet bundled with the plugin.

Change this:

/* thumbnail styles */
img.wpp-thumbnail {
	border:none;
}

… into this:

/* thumbnail styles */
img.wpp-thumbnail {
	margin-right:10px;
	border:none;
}

You might need to adjust the values a bit.

Also, to preserve changes to the stylesheet please copy the wpp.css file to your theme’s folder. Otherwise, any changes made to it will be lost the next time the plugin gets updated.

It worked! Thanks a bunch Héctor

Hi Hector, I am also experiencing this issue and implemented your suggestions above, but unfortunately I still do not have a space between thumbnail and text. I even experimented by adjusting values, but it still does not give me the space. I am using the most update version of WordPress and this plugin.

There must be something at your theme’s stylesheet that’s overwriting the CSS code posted above. Try appending !important to the margin to see if it helps, like this:

/* thumbnail styles */
img.wpp-thumbnail {
	margin-right:10px!important;
	border:none;
}

It not working for me On bollyone.com

And how to show the Post title from the tops of image, Like this: – https://i.imgur.com/FLbnf.jpg

Hey vatu, found a solution to display title from the top of the image:

Step1: Instead of just putting [wpp], use the following
<div class=”popular-posts-page”>[wpp]</div>

Step2: add to the css
.popular-posts-page li {
min-height:65px;
display:block;
list-style:none outside none;
}

.popular-posts-page img {
float:left;
margin-right:4px;
border:2px solid #ECEFF5;
}

Note I set my thumbnail width as 50px, so min-height:65px works for me. Hope this helps.

Hi b_blac, thanks for the info!

I am having the same question as vatu’s last post. Would like to have the ‘Post title’ aligned to the top of the thumbnail. But I’m probably a lot less knowledgeable with CSS. Could you please give me a step by step info?

The blog (https://www.techxld.com) I’m using it for (using it as sidebar widget) and the css is like below:

/* title styles */
.wpp-post-title {
	font-color:#484545;
	font-weight: bold;
    	padding: 0 0 5px 0;
    	margin: 0;
    	font-family: Arial, Helvetica, Sans-serif;
    	font-size: 14px;
}
/* thumbnail styles */
img.wpp-thumbnail {
	border:1px solid #BDBDBD;
	margin-right:10px;
	padding:4px;
	background-color: #fff;
}
/* excerpt styles */
.wpp-excerpt {
}
/* Stats tag styles */
.post-stats {
	font-size:11px;
	font-weight:bold;
}
	.wpp-comments {
	}
	.wpp-views {
	}
	.wpp-author {
		font-style:italic;
	}
	.wpp-date {
	}
/* WP-PostRatings styles */
.wpp-rating {
}

Thanks!

Imran

Hello b_blac

How is that you say? I do not understand.

Hi b_blac can your explan more opition for that?.. ware to put this

<div class=”popular-posts-page”>[wpp]</div>

and ware to put this

.popular-posts-page li {
min-height:65px;
display:block;
list-style:none outside none;
}

.popular-posts-page img {
float:left;
margin-right:4px;
border:2px solid #ECEFF5;
}

tanks alot…