WordPress.org

Ready to get started?Download WordPress

Forums

Top 10 - Popular posts plugin for WordPress
How to display a counter for your Top 10 list and make it look nice (15 posts)

  1. steveone86
    Member
    Posted 1 year ago #

    Hey everyone,

    I just wanted to share this cool css trick that will display a numbered countdown on your top 10 posts. You can check out how it will look here. Its a few easy steps that a beginner can do.

    Step 1

    Edit top-10.php either directly or through your plugin admin panel

    On line 262 you will replace this
    $output .= $title; // Add title if post thumbnail is to be displayed after

    with
    $output .= "<span class='tptn_title'>" . $title . "</span>"; // Add title if post thumbnail is to be displayed after

    Step 2

    Next you will replace line 268
    $output .= $title; // Add title when required by settings

    with
    $output .= "<span class='tptn_title'>" . $title . "</span>"; // Add title when required by settings

    The last step is to add the CSS which is

    .tptn-list{
    	list-style: none;
    	counter-reset: tptn-list;
    	margin-left: 0;
    }  
    
    .tptn_link :before {
    	clear:both;
    	content: counter(tptn-list);
        	counter-increment: tptn-list;
        	font-weight: bold;
        	float: left;
        	width: 40px;
    	background: #ffeb36;
    	font-size: 16px;
    	color: #000;
    	position: absolute;
    	top: 0 px;
        	-moz-box-shadow: 5px 4px rgba(0,0,0,0.4);
    	-webkit-box-shadow: 5px 4px rgba(0,0,0,0.4);
      	text-align: center;
      	box-shadow: 5px 4px rgba(0,0,0,0.4);
    	margin-top: -130px;
    }
    
    .tptn_title{
    color: #0077EE;
    display:block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
    }

    You can then change the design as you please. Thanks to the author ajayy for helping me with an issue i had with my counter in a previous version.

    http://wordpress.org/extend/plugins/top-10/

  2. Ajay
    Member
    Plugin Author

    Posted 1 year ago #

    Thank you for the code. It will definitely go into the grand plan when I incorporate ready styles.

  3. nicoblog
    Member
    Posted 10 months ago #

    Thanks!

  4. nicoblog
    Member
    Posted 7 months ago #

    Hmm it doesn't work anymore?

  5. Ajay
    Member
    Plugin Author

    Posted 7 months ago #

    I don't understand?

  6. the_circle_pit
    Member
    Posted 6 months ago #

    I am using the following code...

    .tptn-list{
    list-style: none;
    counter-reset: tptn-list;
    }

    .tptn_link :before {
    clear: both;
    color: #FFFFFF;
    content: counter(tptn-list, decimal);
    counter-increment: tptn-list;
    float: left;
    font-size: 12px;
    font-weight: normal;
    margin-left: -18px;
    position: absolute;
    text-align: center;
    }

    It works, but it does NOT increment. It is stuck at 1.

    Any ideas?

  7. the_circle_pit
    Member
    Posted 6 months ago #

    I figured it out...

    body{
    counter-reset: tptn-list;
    }

    .tptn_link:before {
    color: #FFFFFF;
    content: counter(tptn-list, decimal) ". ";
    counter-increment: tptn-list;
    font-size: 12px;
    font-weight: normal;
    margin-left: -18px;
    position: absolute;
    text-align: center;
    }

  8. osckar
    Member
    Posted 4 months ago #

    Hi:

    @steveone86 Thanks for the css code and trick, it works very good; however, as stated on the above message, I needed to use this code too for getting the numbered order to show correctly instead of just the number 1 for every article:

    body{
    counter-reset: tptn-list;
    }

    After I added that code to the body, the numbers appeared.

    But I noticed that this modification, affects other instances of the plugin when using 2 or more widgets, I mean, I have a "Most read today" widget and a "Most read last week", everything seems fine, the Most read today shows 5 articles: 1,2,3,4,5 but the other widget, which has the 5 most read last week, shows: 6,7,8,9,10 :O

    How to prevent this? In order that each widget gets its own correct numbered list?

    Thank you!

  9. Ajay
    Member
    Plugin Author

    Posted 4 months ago #

    What if you use?

    .tptn-list{
    	counter-reset: tptn-list;
    }
  10. osckar
    Member
    Posted 4 months ago #

    Hi @Ajay:

    I'm already using this:

    .tptn-list{
    list-style: none;
    counter-reset: tptn-list;
    margin-left: 0;
    }

    with no luck.

    Thanks

  11. nicoblog
    Member
    Posted 4 months ago #

    I want to make the top 10 plugin style matches the related posts style.
    I'm using this related posts css: http://kevin.deldycke.com/2012/04/beautify-contextual-related-posts-wordpress-plugin/

    I've tried to apply that to the top 10 plugin but failed miserably, it just doesn't look right on my site.
    This is the url: http://www.nicoblog-games.com/gba-roms/

    Could somebody help me adapt the related posts css i posted so it works for the top10 i have on my site?

  12. Ajay
    Member
    Plugin Author

    Posted 4 months ago #

    @osckar, unfortunately, I'm no expert on this code. But, let me see what I can do with a few searches

    @nicoblog, you can try to replace the #crp_related with .tptn_posts

  13. nicoblog
    Member
    Posted 4 months ago #

    Hi Ajay, that's one of the first things i tried, but the result is rather odd. See an image: http://postimg.org/image/9dylfqptt/
    I would love to pull this off but my css knowledge is basic. i think it must be pretty easy to figure, could you attempt it with the browser debug console please? the plugin styles are located at the end of my site style.css

  14. Ajay
    Member
    Plugin Author

    Posted 4 months ago #

    Can you tell me what the current code you have? And, what setting have you put for the Thumbnail settings i.e. is it Thumbnail before Text?

  15. nicoblog
    Member
    Posted 3 months ago #

    [ Moderator note: please be careful with HTML in these forums. Wrap all your code with the backtick or use the code button. ]

    I have "Display thumbnails inline with posts, before title"
    HTML to display before each list item: <div class="psp">
    <li>
    HTML to display after each list item: </li>
    </div>
    Style attributes are used for width and height.

    div.psp  {
    float: left;
    width: 132px;
    height: 114px;
    text-align: center;
    overflow: hidden;
    }
    
    .tptn_thumb {
    display: block;
    }

    I remove all this before attempting this but still no luck.
    This is too hard for me.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.