How to display a counter for your Top 10 list and make it look nice

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?

I don’t understand?

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?

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!

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: https://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: https://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?

@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: https://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

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.