Posted 6 months 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/
Posted 6 months 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.
Posted 6 months ago #
Hi Héctor, thank you for your answer. In the meantime I tried "content:counter..." and what a surprise - it works!
Posted 6 months ago #
Mmm, so you ended using CSS instead? I didn't know that selector, nice finding!
Posted 6 months ago #
well, it took several hours to find ;-)
actually I´m using the following css:
content: counter(level1, decimal) " ";
counter-increment: level1;
Posted 6 months ago #
where u edit this code?
Posted 6 months ago #
Yes, please share your solution - I'm struggling with this as well!
Posted 6 months ago #
Sam's solution is pure CSS, no code hacking involved.
Posted 6 months ago #
yes i know , but where exactly we change or add this solution?
Posted 6 months 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.
Posted 6 months 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
Posted 6 months 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?
Posted 6 months 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.
Posted 6 months 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; } }
Posted 6 months ago #
I just want it to be a numbered list.
Like this:
1. Post title
2. Post title ...etc
Posted 6 months ago #
like the display at Popular Posts Stats panel.
Posted 5 months ago #
@mrmagos: thanks a lot for your comment! we changed that today
You must log in to post.
