WordPress.org

Ready to get started?Download WordPress

Forums

WordPress Popular Posts
[resolved] Styling-Question: No 1....5 (17 posts)

  1. sam99077
    Member
    Posted 2 years ago #

    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/). 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/

  2. Héctor Cabrera
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  3. sam99077
    Member
    Posted 2 years ago #

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

  4. Héctor Cabrera
    Member
    Plugin Author

    Posted 2 years ago #

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

  5. sam99077
    Member
    Posted 2 years ago #

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

    content: counter(level1, decimal) " ";
    counter-increment: level1;

  6. B_Dark
    Member
    Posted 2 years ago #

    where u edit this code?

  7. mrmagos
    Member
    Posted 2 years ago #

    Yes, please share your solution - I'm struggling with this as well!

  8. Héctor Cabrera
    Member
    Plugin Author

    Posted 2 years ago #

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

  9. B_Dark
    Member
    Posted 2 years ago #

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

  10. Héctor Cabrera
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  11. sam99077
    Member
    Posted 2 years ago #

    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

  12. B_Dark
    Member
    Posted 2 years ago #

    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?

  13. mrmagos
    Member
    Posted 2 years ago #

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

  14. mrmagos
    Member
    Posted 2 years ago #

    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; } }

  15. B_Dark
    Member
    Posted 2 years ago #

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

  16. B_Dark
    Member
    Posted 2 years ago #

    like the display at Popular Posts Stats panel.

  17. sam99077
    Member
    Posted 2 years ago #

    @mrmagos: thanks a lot for your comment! we changed that today

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic