Top 10 - Popular posts plugin for WordPress
[Plugin: Top 10] Columnizing the manually placed list (3 posts)

  1. Daedalon
    Posted 3 years ago #

    Ajay: What do you think of adding this to the documentation?

    To columnize the Top 10 page you can add the following type of CSS in the end of your theme's style.css:

    div#tptn_related_daily li.top10 {
      padding:0 2.5em 1em 0;
      text-align: left;

    This shows the items in two columns on the Photog theme. Works like a charm for having only the title and a max 100 x 80 thumbnail below it. When setting width to be 135px or less the items flow into three or more columns.

    If you're getting items that seem to hang on empty space, a previous item has a higher height than the one after it. In this example item 1 has at least one pixel more height than 2, so it looks like 3 is hanging on empty space when it's really hanging to those one or more pixels of item 1:

    1. 2.
    4. 5.

    The solution is to add a line of height:100px; to the CSS and to increase the number from 100 until the items align correctly (or decrease until it stops working). The aim is that all items' heights will be as large as the biggest one's but not any larger. If the items overlap then the height is too small. If the spacing between the items gets too big, you may try reducing the number on the padding line that says currently 2.5em.

    Ajay: To prevent the above problem, we could add an option to cut the title or excerpt at a specified number of characters. If a span tag or similar is allowed inside main content area of a page, we could add that and give users a CSS solution or add support for dotdotdot or threedots to do this by jQuery browser-side. These have the advantage of adjusting when the browser window is resized.


  2. Ajay
    Plugin Author

    Posted 3 years ago #

    Daedalon, do you have this implemented on your blog?

  3. Daedalon
    Posted 3 years ago #

    Yes. The current CSS in use is:

    div#tptn_related li.top10, div#tptn_related_daily li.top10 {
    padding:0 2.5em 1em 0;

    This produces a neatly laid out three-column list of the top posts, as suggested in my above post. I've made a patch to allow the number of posts to specified when calling tptn_show_pop_posts and tptn_show_daily_pop_posts. Using three columns it is better to have 9 or 12 top posts than 10, as it would leave one hanging lonely on the last row. Will post a separate thread of that patch.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic