HTML & CSS Customization

Fernando Briano edited this page Sep 12, 2016 · 3 revisions

By default, the plugin lists the posts in an unordered list with the lcp_catlist CSS class, like this:

<ul class="lcp_catlist">

So if you want to customize the appearance of the List Category Posts lists, you can just edit the lcp_catlist class in your theme's CSS.

You can also customize what HTML tags different elements will be surrounded with, and set a CSS class for this element, or just a CSS class which will wrap the element with a span tag.

The customizable elements (so far) are: author, catlink (category link), comments, date, excerpt, morelink ("Read More" link), thumbnail and title (post title).

The parameters are: author_tag, author_class, catlink_tag, catlink_class, comments_tag, comments_class, date_tag, date_class, date_modified_tag, date_modified_class, excerpt_tag, excerpt_class, morelink_class, thumbnail_class, title_tag, title_class, posts_morelink_class, customfield_tag, customfield_class

So let's say you want to wrap the displayed comments count with the p tag and a "lcp_comments" class, you would do:
[catlist id=7 comments=yes comments_tag=p comments_class=lcp_comments]
This would produce the following code:

<p class="lcp_comments"> (3)</p>

Or you just want to style the displayed date, you could wrap it with a span tag:
[catlist name=blog date=yes date_tag=span date_class=lcp_date]
This would produce the following code:

<span class="lcp_date">March 21, 2011</span>

Elements without a specified tag, but a specified class, will be wrapped with a span tag and its class. For example this:
[catlist id=7 date=yes date_class="lcp_date"]
Will produce the following:

<span class="lcp_date">October 23, 2013</span>

The only exceptions here are the title_tag and title_class parameters. If you only use the title_class parameter, the CSS class will be assigned to the a tag like this:
[catlist id=1 title_class="lcp_title"]
Will produce:

<a href="" title="Test" class="lcp_title">Test</a>

But if you use both:
[catlist numberposts=5 title_class=lcp_title title_tag=h4]
You will get:

<h4 class="lcp_title">
    <a title="Hipchat" href=""></a>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.