WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: WordPress Popular Posts] Title on top left of the thumnail. Here how to do it (8 posts)

  1. Galerio
    Member
    Posted 4 years ago #

    If you use thumbnails, you will see that the text starts at the bottom right of the image. But it is better that the text starts on the top right, so you have to modify the css of the plugin in the edit plugin page: wordpress-popular-posts/style/wpp.css
    Find /* thumbnail styles */ and modficy as follow:

    /* thumbnail styles */
    img.wpp-thumbnail {
    float: left;
    text-align: left;
    }

    Then add some <br /> before </li> in "HTML Markup settings" of the plugin option in order to have images under each other.

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

  2. Héctor Cabrera
    Member
    Posted 4 years ago #

    Awesome, thanks for your contribution, galerio! I'm sure other users will appreciate this info.

  3. sammythebull
    Member
    Posted 4 years ago #

    Thanks for the tip.

    Can you explain exactly which HTML tags should be put in and where in order for the thumbnails to line up under each other instead of under and to the side?

  4. whizzer
    Member
    Posted 3 years ago #

    Hey Ikki24, I tried this solution and it works great on my homepage (which is using the widget to insert WPP). However as you may recall, I am trying to get this done on a blank template so as to insert this within an inframe on other websites.

    Obviously the CSS is being passed on (thus the float property works) ; however the tag "br /" which is added using the "before/ after each post" is not being passed on.

    Any ideas?

    eg : http://www.therichtimes.com/wordpress/ (this is how I want it)
    but http://www.therichtimes.com/wordpress/top/ is what it stays as.

  5. Héctor Cabrera
    Member
    Posted 3 years ago #

    Hi whizzer,

    The problem is that when you use the float:left property all elements will attempt to align horizontally, hence the weird alignment effect you're seeing on your "standalone" version of the popular listing.

    I would add this to the <head> section of your Rich Top page:

    <style>
    ul {margin:0; padding:0}
    ul li {overflow:hidden; list-style:none; float:none; clear:both; margin:0 0 5px 0; height:70px;}
    </style>
  6. movielakay
    Member
    Posted 3 years ago #

    Thanks for the fix but I'm having the same issue as [whizzer]... I'm using the plugin in the homepage of my wordpress theme and everything aligns horizontally (floats left).

    I tried to put the code [Ikki24] suggested but every list on my index page messed up.

    Is there any other ways I can fix this?

    Thanks in advance.

    My blog is in "maintenance mode" so I can't provide a link

  7. whizzer
    Member
    Posted 3 years ago #

    Do the same thing that I am doing and that should be a good work around. Use that code on a blank template (thus the style property applies only to that template). Use iFrame to push this template-page into the final page you want.

    I just saw Ikki's suggestion and havent had a chance to try it yet.

  8. whizzer
    Member
    Posted 3 years ago #

    just tried it out - works brilliantly. Thanks tons.

Topic Closed

This topic has been closed to new replies.

About this Topic