Numbering Post List

You could try to replace the ol with .tptn_posts ul

These are the styles:
https://webberzone.com/support/knowledgebase/using-and-customising-top-10/

I tried that and the best I can come up with is this Capture of Numeration

As you can see, it’s aligned on top instead of to the left and everything is numbered as 1 instead of chronological.

I did try the tptn_list_count thinking this would achieve the same thing and give me something to work with but that only gives me bullet points.

I guess I’ll just let it go. Thanks!

Can you show me the full CSS code you’re using and where are you adding that?

It could be because the CSS is getting mixed and matched vs what is in the post above.

Here is the first way you suggested replacing ol with .tptn_posts ul

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

.tptn_posts ul {
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.tptn_posts ul li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.tptn_posts ul li::before {
  content: "0" counter(my-awesome-counter);
  font-weight: bold;
  font-size: 3rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
}

This has no effect. However, if I remove the styling option then bullet points show up with the above code and then the widget in post pages (Top 10) needs to be restyled.

Since the Top 20 is embedded into a page builder, I tried doing this instead:

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

.sek-module .sek-module-inner ol>li, .sek-module .sek-module-inner ul>li {
  list-style: none;
  counter-reset: my-awesome-counter;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}
.sek-module .sek-module-inner ol>li, .sek-module .sek-module-inner ul>li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.sek-module .sek-module-inner ol>li, .sek-module .sek-module-inner ul>li::before {
  content: "0" counter(my-awesome-counter);
  font-weight: bold;
  font-size: 3rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
}

The result is the image here, which shows the numbers but only #1 on all of the posts.

• This reply was modified 3 years, 4 months ago by Keith a.k.a. K j A M.

I did it. While I wanted two columns for desktop — I couldn’t get the numbering to start at 11 on the 2nd column even though I had the offset correct in the shortcode.

So, I settled on a single column since that’s the way it would be on tablet and mobile anyway.

I also removed the excerpt and title because I couldn’t get those formatted correctly, which is fine. Each episode has it’s own artwork and everything is visual with the title embedded in the artwork so this works just as good.

Here’s the final output:

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');

.sek-module .sek-module-inner .tptn_posts ul>li, .sek-module .sek-module-inner ul>li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
.sek-module .sek-module-inner .tptn_posts ul>li, .sek-module .sek-module-inner ul>li::before {
  content: "" counter(my-awesome-counter);
  font-weight: bold;
  font-size: 3rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
}

.tptn_posts_daily .tptn_title, .tptn_posts .tptn_title {
  display: none !important;
}

.tptn_excerpt {
	display: none !important;
}

Top 20

• This reply was modified 3 years, 4 months ago by Keith a.k.a. K j A M.

Thank you for confirming.