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.

Thanks for the quick reply Hector.

I’m quite a novice in regards to css. How do I use the code on the page I mentioned after I’ve made those changes? I’ve made the changes and saved the widget, but when I paste that code into the html box of wpp widget, the result is just a bunch of text on the web page.

Any guidance will be greatly appreciated.

Philip

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.

Thanks Hector. My problem is actually applying the code at: https://codeitdown.com/ordered-list-css-styles/
to the css style sheet. I have applied various styles to WPP already as you can see: https://www.tribyoot.org (sidebar). But the actual method to apply these new styles escapes me. I’m sure it is obvious to most people, but placement of the code in the stylesheet or in the html markup area is not working for me. I need a lesson in css (probably many lessons), because the concept of divs, styles, html and mixing them altogether is very confusing to me.

Philip

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.

Great. Thanks.

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: https://www.image-share.com/ijpg-2581-91.html.

Hi Philip,

Haven’t heard from you for a week now. Do you need help with this?

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.