HTML & CSS Customization

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, content, customfield, 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, conditional_title_tag, conditional_title_class, content_tag, content_class, date_tag, date_class, date_modified_tag, date_modified_class, excerpt_tag, excerpt_class, morelink_tag, 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 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="http://127.0.0.1/wordpress/?p=38" 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="http://127.0.0.1:8080/wordpress/?p=40"></a>
</h4>

• the thumbnail_class parameter. The class will be added to the img element. [catlist id=13 thumbnail=yes thumbnail_class="lcp_thumbnail"] Will produce:

<a href="http://localhost:8080/?p=1016" title="Featured Image (Vertical)">
    <img src="http://localhost:8080/wp-content/uploads/2013/03/featured-image-vertical-150x150.jpg" class="lcp_thumbnail wp-post-image" alt="Vertical Featured Image" srcset="http://localhost:8080/wp-content/uploads/2013/03/featured-image-vertical-150x150.jpg 150w, http://localhost:8080/wp-content/uploads/2013/03/featured-image-vertical-100x100.jpg 100w" sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px" width="150" height="150">
</a>