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

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author Héctor Cabrera


    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.

    Hi Héctor, thank you for your answer. In the meantime I tried “content:counter…” and what a surprise – it works!

    Plugin Author Héctor Cabrera


    Mmm, so you ended using CSS instead? I didn’t know that selector, nice finding!

    well, it took several hours to find 😉
    actually I´m using the following css:

    content: counter(level1, decimal) ” “;
    counter-increment: level1;

    where u edit this code?

    Yes, please share your solution – I’m struggling with this as well!

    Plugin Author Héctor Cabrera


    Sam’s solution is pure CSS, no code hacking involved.

    yes i know , but where exactly we change or add this solution?

    Plugin Author Héctor Cabrera


    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.

    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

    ok i add in my style.css of my theme :

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    and after i go to widget to pus some code?

    @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.

    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 screen and (-webkit-min-device-pixel-ratio:0) { #sidebar3 ul li:before { margin-left: 0; } }

    I just want it to be a numbered list.
    Like this:
    1. Post title
    2. Post title …etc

    like the display at Popular Posts Stats panel.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘[Plugin: WordPress Popular Posts] Styling-Question: No 1….5’ is closed to new replies.