[Plugin: List category posts] Styling Output

I noticed quite a few posts asking about how to style the output from this plugin, and the documentation was a little confusing, so after spending some time with it I thought I would share my findings.

First, I highly recommend creating a child theme so that you do not mess up any of your core files, and so that your work will not be erased with your next theme update. See here for how to set this up: http://codex.wordpress.org/Child_Themes

If you want the formatting to work for both widget areas and on pages, there is a simple solution to allow shortcode in widgets.

Add the following to functions.php

/* This allows shortcodes in widget text areas */
add_filter('widget_text', 'do_shortcode');

Now you will be able to use shortcode in the standard Text widget.

See here for a more detailed explanation of this step:
http://wordpress.org/support/topic/how-to-make-shortcodes-work-in-a-widget
Or here:
http://digwp.com/2010/03/shortcodes-in-widgets/

1. Put the shortcode where you want your category list to show up

2. Add a tag and a class to each component
For example, I have used the span tag with all of my components. You can use p, br, or other html tags instead. You can name the classes whatever you want, as long as they are the same as the classes that you are about to build in step 3.
[catlist id=1 date=yes author=yes excerpt=yes title_tag=span title_class=titleclass date_tag=span date_class=dateclass author_tag=span author_class=authorclass excerpt_tag=span excerpt_class=excerptclass]

3. Add a class to style.css for each component (the html tag, then a period, then your class name)

For example:

span.titleclass{
}
span.dateclass {
}
span.authorclass {
}
span.exerptclass {
}

4. Optionally, you can choose not to display the bullet points with the following added to your style.css

ul.lcp_catlist li {
	list-style-type:none;
}

Here is a complete example of what I added to my style.css:

/* BEGIN CSS FOR CUSTOM DISPLAY OF LIST CATEGORY POSTS */
/* Decreases the left-hand margin of the entire list */
ul.lcp_catlist {
	margin:0 0 0 -3px;
}

/* Removes the bullet points from lists */
ul.lcp_catlist li {
	list-style-type:none;
}

/* The following are all classes that modify how each component of the list looks.
These classes must be specificed in the shortcode by first adding a tag around the component
i.e. author_tag=span
and then adding the class
i.e. author_class=authorclass */
span.titleclass {
font-size: 1.2em;
font-weight:bold;
display:block;
}

span.dateclass {
font-size: .8em;
font-weight:bold;
display:block;
}

span.authorclass {
font-size: 1.1em;
display:block;
}

span.excerptclass {
font-size: 1em;
display:block;
margin:0 0 20px 0;
}
/* END CSS FOR CUSTOM DISPLAY OF LIST CATEGORY POSTS */

Additional note: You can have as many classes as you want for each component and reference different classes (via the shortcode) on different pages. See the HTML & CSS Customization section of the Other Notes section of the plugin page for details about which components can be customized this way.