Styling the list

Hi Philip,

To display an ordered list, you need to use the custom HTML markup feature.

Assuming you’re using the widget:

1. Enable the Custom HTML markup feature.
2. Under “Before / after Popular Posts“, change <ul class="wpp-list"> and </ul> into <ol class="wpp-list"> and </ol>.
3. Save changes.

It’s not too complicated, don’t worry 🙂

You need to add these styles to either your theme’s stylesheet or to WPP’s stylesheet. To do so, you need to do any of the following:

• Download the theme’s / plugin’s stylesheet to your desktop using a FTP program such as Filezilla (you’ll need your FTP credentials for this, ask your hosting if in doubt) and edit it. When you’re done, upload the file again to your server.
• Use WordPress’ inline editor. To edit your theme’s stylesheet, go to Appeareance > Editor. To edit plugin’s stylesheet, go to Plugins > Editor and use the select box at the top right to choose WPP.

Ah, that’s a whole different story. I thought you already knew what had to be changed, my apologies. Alright, I can give it a try but not today – probably this weekend.

Alright, this is what you need to do:

1. Add this to the end of your theme’s stylesheet:

   ol.wpp-list {
       list-style-type: none;
       list-style-type: decimal !ie; /*IE 7- hack*/
   
       margin: 0;
       margin-left: 3em;
       padding: 0;
   
       counter-reset: li-counter;
   }
   ol.wpp-list > li{
       position: relative;
       margin-bottom: 20px;
       padding-left: 0.5em;
       min-height: 3em;
       border-left: 2px solid #CCCCCC;
   }
   ol.wpp-list > li:before {
       position: absolute;
       top: 0;
       left: -1em;
       width: 0.8em;
   
       font-size: 3em;
       line-height: 1;
       font-weight: bold;
       text-align: right;
       color: #464646;
   
       content: counter(li-counter);
       counter-increment: li-counter;
   }
   
   ol.wpp-list li span.wpp-stats { display:block; }

2. Enable the Custom HTML markup feature.
3. Under “Before / after Popular Posts“, change <ul class="wpp-list"> and </ul> into <ol class="wpp-list"> and </ol>.
4. Set “Post HTML Markup” to <li>{thumb} {title} <span class="wpp-stats">{stats}</span></li>
5. Save changes.

This is how it looks like on the Twenty Thirteen theme: http://www.image-share.com/ijpg-2581-91.html.

Since it’s been a month since the OP last replied, I’m marking this as resolved.

Philip, if you still need help with this please feel free to mark this topic as unresolved again and post a comment.