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 (9 posts)

  1. steveone86
    Member
    Posted 10 months 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 10 months ago #

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

  3. nicoblog
    Member
    Posted 5 months ago #

    Thanks!

  4. nicoblog
    Member
    Posted 3 months ago #

    Hmm it doesn't work anymore?

  5. Ajay
    Member
    Plugin Author

    Posted 3 months ago #

    I don't understand?

  6. the_circle_pit
    Member
    Posted 2 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 2 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 1 day 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 11 hours ago #

    What if you use?

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

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.