WordPress.org

Support

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

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

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author Hector Cabrera

    @hcabrera

    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.

    sam99077

    @sam99077

    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

    @hcabrera

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

    sam99077

    @sam99077

    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?

    mrmagos

    @mrmagos

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

    Plugin Author Hector Cabrera

    @hcabrera

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

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

    Plugin Author Hector Cabrera

    @hcabrera

    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.

    sam99077

    @sam99077

    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?

    mrmagos

    @mrmagos

    @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

    @mrmagos

    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 ‘[Resolved] [Plugin: WordPress Popular Posts] Styling-Question: No 1….5’ is closed to new replies.
Skip to toolbar