How to get item_position to work

here

Hi @gorvie,

To use {item_position}, {summary} or any other Content Tag you need to use the post_html parameter (which I don’t see in your shortcode :P).

Additionally -as the documentation in the Parameters section states- in order to be able to use the {summary} Content Tag you also need to use the excerpt_length parameter, also missing from your shortcode.

For example:

[wpp range="last7days"
thumbnail_width=300 thumbnail_height=300 stats_author=1
limit=50 order_by="views" excerpt_length=30 post_html='<li>{thumb} {title} (Position: {item_position}) <span class="wpp-meta post-stats">{stats}</span><div class="wpp-excerpt">{summary}</div></li>']

If you have any questions don’t hesitate to ask.

Thanks for your help, That worked.

Few more things i could use help on..
1. Any way to bring in the picture and title/info more closer to the center of page? removing the gap in between? Preferably without effecting the css on mobile?

This is my current code

.wpp-list li {
margin: 0.5em;
font-size: 1em;
line-height: 1.;
text-align:center;
text-transform: uppercase;
}
.wpp-list li .wpp-thumbnail {
display: block;
margin: 0 0 0em;
width: 20%;
height: auto;

}
.wpp-post-title {
font-size: 20px;
color:#fff;

}
@media only screen and (max-width: 600px) {
.wpp-post-title {
font-size: 10px;
color:#fff;
}
}

2. Id like to change size/color on item position, is there a was for css (like: .wpp-post-title)

3. Lastly, When hovering title of posts, it gets smaller.. Is there a tweak i can put in the css above?

Thanks again!

There must be some CSS rules coming either from your theme and/or other plugins that affecting your styling (eg. titles becoming smaller on hover, etc.) so can’t really say without having a look at your website.

You can try using the !important declaration to force the browser to use your CSS rules. For example:

.wpp-post-title {
    font-size: 20px !important;
    color: #fff;
}

Almost forgot about this one:

Id like to change size/color on item position, is there a was for css (like: .wpp-post-title)

You can wrap the {item_position} content tag in an HTML tag and style the HTML tag itself. Using the same example from before:

[wpp range="last7days"
thumbnail_width=300 thumbnail_height=300 stats_author=1
limit=50 order_by="views" excerpt_length=30 post_html='<li>{thumb} {title} <span class="wpp-position">Position: {item_position}</span> <span class="wpp-meta post-stats">{stats}</span><div class="wpp-excerpt">{summary}</div></li>']

.wpp-position {
    color: red;
    font-size: 2em;
}

Awesome that worked!

Any way to get rid of the gap in between thumnails and info on the right?
looks good on mobile just on desktop a bit spaced out.

Appreciate your help!

see here

Well, the gap happens because you’re having the popular posts list stretch as wide as its container. In mobile this is fine because we’re talking about small screens but on desktop -as you can already tell- that won’t work and will result in what you’re seeing now.

You could use media queries in conjunction with the width or the max-width CSS properties (and probably a couple of things more) to have your popular posts list adapt better to different screen sizes (a.k.a. Responsive Web Design). Unfortunately, this is kind of a lengthy topic and I can’t really teach you how <abbr title=”Responsive Web Design”>RWD</abbr> works here (it’s not what this forum is for :P) so your options are:

• Learn the RWD principles so you can apply them to your website (this is the long route but if you plan on doing web development for a living then it’s totally worth it); or
• If you don’t have the time / will to learn RWD then you may want to consider hiring a more experienced developer who can help you out with all this.

Give it a shot and if you get stuck feel free to ask more questions.

For the time being and since the original issue was resolved (how to display the position and the excerpt) I’m marking this topic as resolved.