Current/Active item in Kleo Recent Posts?

[geo7thqueen]

I have a post page with Kelo_recent_post in the side bar. Is there anyway to tell which li.newscontent is the one for the current page?

If I have in the side bar, Post1, Post2, Post3, and the page is displaying Post2, how can I change the li for Post2 so as to highlight it as different from others?

[Radu]

Hi,

Maybe yes, first i need to view your page with the recent posts in right sidebar.

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[geo7thqueen]

Running local instance for testing, so no internet on that.

But shouldn’t need an example as it is pretty straight forward: Can Kelo_recent_post tell what page it is on?

If so, is there a way to add a class to the li that is the current page?

Same issue as the menu being aware of which page it is on. Menu has a ‘.active’ (or is it ‘.current-menu-item’?) class on it. Something like that.

Thanks!

PS: Don’t know if this helps (you probably know this all), but here’s the generated HTML and you can see the ‘li class=”news-content”‘ that I’d like to make one ‘li class=”news-content current-post-item”‘ :

‘<div class=”sidebar sidebar-main col-sm-3 sidebar-left col-sm-pull-9″>
<div class=”inner-content widgets-container”>
<div id=”kleo_recent_posts-3″ class=”widget clearfix widget_kleo_recent_posts”><h4>Recent Posts</h4>
<div>
<ul class=’news-widget-wrap’>
<li class=”news-content”>

<span> Title <small class=”news-time”>March 9, 2016</small></span>
<span class=”news-excerpt”><p>Lorem ipsum dolor sit amet, consectetur …</p></span>

<li class=”news-content”>

<span>Other Title<small class=”news-time”>March 9, 2016</small></span>
<span class=”news-excerpt”><p>Lorem ipsum dolor sit amet, consectetur …</p></span>

</div>
</div> </div><!–end inner-content–>
</div><!–end sidebar–> ‘

[Radu]

Hi,

You can have a highlight your posts with this css

COPY CODE

div#kleo_recent_posts-3 li:nth-child(even) {
    background: red !important;
}

Css can be added to wp-admin -> theme options -> general settings -> quick css

You can style an element depends by page where you are, the body class will have a page name into it, you can see with inspect, if you need to style that widget only for posts like this

COPY CODE

body.single-post div#kleo_recent_posts-3 li:nth-child(even) {
    background: red !important;
}

Cheers

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts