Title: [Plugin: WordPress Popular Posts] Styling-Question: No 1….5
Last modified: August 20, 2016

---

# [Plugin: WordPress Popular Posts] Styling-Question: No 1….5

 *  Resolved [sam99077](https://wordpress.org/support/users/sam99077/)
 * (@sam99077)
 * [14 years, 7 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/)
 * Hi there, just a short styling-question (btw wonderful plugin!). I would like
   to display the top-5-posts with No1,…, No5 in front. As I´ve seen on several 
   websites (e.g. [http://blogcastor.com/extend/codex/display-buddypress-followers-counts/](http://blogcastor.com/extend/codex/display-buddypress-followers-counts/)).
   It´s obviously not an ol-list but I don´t know how to manage it with wpp?
 * Any help is appreciated
 * [http://wordpress.org/extend/plugins/wordpress-popular-posts/](http://wordpress.org/extend/plugins/wordpress-popular-posts/)

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/page/2/?output_format=md)

 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402827)
 * An OL list would be more appropiated in this case. you can either use the Custom
   HTML Markup functionality to change from UL to OL, or hack WordPress Popular 
   Posts and change this:
 * `$content .= "<ul>" . "\n";`
 * … into this:
 * `$content .= "<ol>" . "\n";`
 * … and that should do it.
 *  Thread Starter [sam99077](https://wordpress.org/support/users/sam99077/)
 * (@sam99077)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402853)
 * Hi Héctor, thank you for your answer. In the meantime I tried “content:counter…”
   and what a surprise – it works!
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402858)
 * Mmm, so you ended using CSS instead? I didn’t know that selector, nice finding!
 *  Thread Starter [sam99077](https://wordpress.org/support/users/sam99077/)
 * (@sam99077)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402859)
 * well, it took several hours to find 😉
    actually I´m using the following css:
 * content: counter(level1, decimal) ” “;
    counter-increment: level1;
 *  [Be Dark](https://wordpress.org/support/users/b_dark/)
 * (@b_dark)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402861)
 * where u edit this code?
 *  [mrmagos](https://wordpress.org/support/users/mrmagos/)
 * (@mrmagos)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402862)
 * Yes, please share your solution – I’m struggling with this as well!
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402863)
 * Sam’s solution is pure CSS, no code hacking involved.
 *  [Be Dark](https://wordpress.org/support/users/b_dark/)
 * (@b_dark)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402864)
 * yes i know , but where exactly we change or add this solution?
 *  Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/)
 * (@hcabrera)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402865)
 * On wp-content/plugins/wordpress-popular-posts/style/wpp.css, add:
 * `.popular-posts ul li { content: counter(level1, decimal) " "; counter-increment:
   level1; }`
 * Haven’t tested it myself, but I believe that should do the trick.
 * To keep changes through updates, you might consider copying that file into your
   theme’s directory. Otherwise, everytime my plugin gets updated you’ll lose all
   custom CSS.
 *  Thread Starter [sam99077](https://wordpress.org/support/users/sam99077/)
 * (@sam99077)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402866)
 * sure, here we go. first i copied the css to my own style.css. i´ve marked the
   important lines with ==> (please remove):
 * #sidebar3 ul {
    margin-top: 0; padding: 0; ==> counter-reset: level1; }
 * #sidebar3 ul li {
    border-bottom: 1px dotted #D4D4D4; font-size: 100%; font-weight:
   100; height: 90px; padding-bottom: 10px; padding-top: 15px; }
 * #sidebar3 ul li:before {
    background: none repeat scroll 0 0 #5C87B3; color: #
   FFFFFF; ==> content: counter(level1, decimal) ” “; ==> counter-increment: level1;
   font-family: arial; font-size: 18px; font-weight: bold; margin-left: -140px; 
   margin-top: 60px; padding: 3px 9px; position: absolute; }
 * you have to put the ‘counter-reset: level1;’ into the parent-div (otherwise you
   will get only ‘1’ and no counting).
 * use li:before or li:after as you wish, you can also use multiple ‘levels’. i´
   ve not tried but you can find a lot of information about that on the web, just
   google.
 * you can see how it works on our new website [GRAMSTA ](http://gramsta.com)
 *  [Be Dark](https://wordpress.org/support/users/b_dark/)
 * (@b_dark)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402867)
 * ok i add in my style.css of my theme :
 * _[CSS moderated as per the [Forum Rules](http://codex.wordpress.org/Forum_Welcome#Posting_Code).
   Please just post a link to your site.]_
 * and after i go to widget to pus some code?
 *  [mrmagos](https://wordpress.org/support/users/mrmagos/)
 * (@mrmagos)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402868)
 * [@sam99077](https://wordpress.org/support/users/sam99077/) Thank you! I was missing
   the counter:reset in the parent element and was having difficulty with the li:
   before selector. I greatly appreciate the example.
 *  [mrmagos](https://wordpress.org/support/users/mrmagos/)
 * (@mrmagos)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402869)
 * FYI, the numbers are positioned *way* off to the left when viewing the page in
   Chrome. Adding the following to will position them as they appear in Firefox:
 * [@media](https://wordpress.org/support/users/media/) screen and (-webkit-min-
   device-pixel-ratio:0) { #sidebar3 ul li:before { margin-left: 0; } }
 *  [Be Dark](https://wordpress.org/support/users/b_dark/)
 * (@b_dark)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402870)
 * I just want it to be a numbered list.
    Like this: 1. Post title 2. Post title…
   etc
 *  [Be Dark](https://wordpress.org/support/users/b_dark/)
 * (@b_dark)
 * [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/#post-2402871)
 * like the display at Popular Posts Stats panel.

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/page/2/?output_format=md)

The topic ‘[Plugin: WordPress Popular Posts] Styling-Question: No 1….5’ 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/)

 * 16 replies
 * 4 participants
 * Last reply from: [sam99077](https://wordpress.org/support/users/sam99077/)
 * Last activity: [14 years, 6 months ago](https://wordpress.org/support/topic/plugin-wordpress-popular-posts-styling-question-no-15/page/2/#post-2402872)
 * Status: resolved