WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Popular Posts
[resolved] space after the thumbnail (11 posts)

  1. aabusaad
    Member
    Posted 2 years ago #

    Hi,

    I must say this is an amazing plugin. Thank you!

    I have a tiny question, if you take a look on my website, you'll see that there is no space between the thumbnail and the text, how can I add a space between them?

    http://wordpress.org/extend/plugins/wordpress-popular-posts/

  2. Héctor Cabrera
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  3. aabusaad
    Member
    Posted 2 years ago #

    It worked! Thanks a bunch Héctor

  4. pantone
    Member
    Posted 2 years ago #

    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.

  5. Héctor Cabrera
    Member
    Plugin Author

    Posted 2 years ago #

    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;
    }
  6. vatu
    Member
    Posted 1 year ago #

    It not working for me On bollyone.com

  7. vatu
    Member
    Posted 1 year ago #

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

  8. b_blac
    Member
    Posted 1 year ago #

    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.

  9. techxld
    Member
    Posted 1 year ago #

    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 (http://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

  10. fergofer00
    Member
    Posted 1 year ago #

    Hello b_blac

    How is that you say? I do not understand.

  11. Mamiku
    Member
    Posted 1 year ago #

    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...

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.