Title: Styling the list Last modified: August 21, 2016 --- # Styling the list * Resolved [Philip](https://wordpress.org/support/users/prose976/) * (@prose976) * [12 years ago](https://wordpress.org/support/topic/styling-the-list/) * Hello. I just wanted to find out if there is a way to use any of the styles here: [http://codeitdown.com/ordered-list-css-styles/](http://codeitdown.com/ordered-list-css-styles/) * If not, I have already used css to style my list here: tribyoot.org, and you can see I have aligned the text for each list item with a left border line before each entry. how can I use css to turn this into a numbered list? * Here’s the css I’m using so far: * /* WP Popular Postst */ .wpp-list li{ clear:both; display:block; background:# eee; border-top: 5px solid #fff !important padding-right: 5px; padding-left: 10px ; padding-left: 10px ; text-indent: -11px ; border-left-style: dotted; border- left-width: 1px; border-left-color:#e23a00; } * I hope you can help. * Philip * [https://wordpress.org/plugins/wordpress-popular-posts/](https://wordpress.org/plugins/wordpress-popular-posts/) Viewing 9 replies - 1 through 9 (of 9 total) * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [12 years ago](https://wordpress.org/support/topic/styling-the-list/#post-4985871) * 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 `` into `
    ` and `
`. 3. Save changes. * Thread Starter [Philip](https://wordpress.org/support/users/prose976/) * (@prose976) * [12 years ago](https://wordpress.org/support/topic/styling-the-list/#post-4985883) * 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 * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [12 years ago](https://wordpress.org/support/topic/styling-the-list/#post-4985916) * 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](https://filezilla-project.org/download.php?type=client)( 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. * Thread Starter [Philip](https://wordpress.org/support/users/prose976/) * (@prose976) * [12 years ago](https://wordpress.org/support/topic/styling-the-list/#post-4985975) * Thanks Hector. My problem is actually applying the code at: [http://codeitdown.com/ordered-list-css-styles/](http://codeitdown.com/ordered-list-css-styles/) to the css style sheet. I have applied various styles to WPP already as you can see: [http://www.tribyoot.org](http://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 * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [12 years ago](https://wordpress.org/support/topic/styling-the-list/#post-4985981) * 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. * Thread Starter [Philip](https://wordpress.org/support/users/prose976/) * (@prose976) * [12 years ago](https://wordpress.org/support/topic/styling-the-list/#post-4985982) * Great. Thanks. * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [12 years ago](https://wordpress.org/support/topic/styling-the-list/#post-4986032) * Alright, this is what you need to do: 1. Add this to the end of your theme’s stylesheet: 2. ``` 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; } ``` 3. Enable the _Custom HTML markup_ feature. 4. Under “_Before / after Popular Posts_“, change `` into `
    ` and `
`. 5. Set “_Post HTML Markup_” to `
  • {thumb} {title} {stats}
    • ` 6. Save changes. * This is how it looks like on the Twenty Thirteen theme: [http://www.image-share.com/ijpg-2581-91.html](http://www.image-share.com/ijpg-2581-91.html). * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [11 years, 11 months ago](https://wordpress.org/support/topic/styling-the-list/#post-4986116) * Hi Philip, * Haven’t heard from you for a week now. Do you need help with this? * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [11 years, 11 months ago](https://wordpress.org/support/topic/styling-the-list/#post-4986170) * 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. Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Styling the list’ is closed to new replies. * ![](https://ps.w.org/wordpress-popular-posts/assets/icon-256x256.png?rev=1232659) * [WP Popular Posts](https://wordpress.org/plugins/wordpress-popular-posts/) * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-popular-posts/#faq) * [Support Threads](https://wordpress.org/support/plugin/wordpress-popular-posts/) * [Active Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wordpress-popular-posts/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [list](https://wordpress.org/support/topic-tag/list/) * [numbered](https://wordpress.org/support/topic-tag/numbered/) * [style](https://wordpress.org/support/topic-tag/style/) * 9 replies * 2 participants * Last reply from: [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/styling-the-list/#post-4986170) * Status: resolved