Support » Plugin: Top 10 - Popular posts plugin for WordPress » How to display a counter for your Top 10 list and make it look nice

  • 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/

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Author Ajay

    (@ajay)

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

    Thanks!

    Hmm it doesn’t work anymore?

    Plugin Author Ajay

    (@ajay)

    I don’t understand?

    Jay

    (@the_circle_pit)

    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?

    Jay

    (@the_circle_pit)

    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;
    }

    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!

    Plugin Author Ajay

    (@ajay)

    What if you use?

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

    Hi @ajay:

    I’m already using this:

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

    with no luck.

    Thanks

    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?

    Plugin Author Ajay

    (@ajay)

    @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

    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

    Plugin Author Ajay

    (@ajay)

    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?

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How to display a counter for your Top 10 list and make it look nice’ is closed to new replies.