WordPress: How to style Title and Excerpt in Display Post Shortcode Plugin

Question

I'm using the Display Posts Shortcode Version 2.5.1 user guide

I understand the list of attributes, even how to apply a wrapper_type (ol,ul,div) and how to apply a wrapper_class (ex: ".post-container"), and even a wrapper_id (ex: "#post-1").

The problem is that the output (4 separate posts) consists of a picture (I'm using "medium" size, which outputs a pic of 300px X 300px), a title, and an excerpt. What it looks like is a picture on the left, and then to the right of the picture is a title, and then to the right of the title is the excerpt.

What I need is to have the picture above the title and above the excerpt, so that picture, title, excerpt are vertically stacked instead of horizontally positioned.

I don't see any way using the [display-posts] shortcode a way to isolate the title and isolate the excerpt for styling in my stylesheet.

Here's an example post display. Note picture is left, post title is to the right of the picture:

Here's what I'm trying to achieve:

The documents page does give css examples:

.display-posts-listing .listing-item {
    clear: both;
}

.display-posts-listing img {
    float: left;
    margin: 0 10px 10px 0;
}

...so you can see I can position the chunk as a whole (picture,title,excerpt using the .display-posts-listing class), or the image specifically. But, what about the title, and the excerpt? How can I re-position them to look more like example picture #2?

To be clear, I'm not fishing for lessons on css and styling and how to position elements. I know how to do all that. What I can't find is how to specify a class for "title" and "excerpt" in the display-post shortcode, and then I can just create that class or id in my stylesheet.

Answer 1

In the style.css of plugin "Display Posts Shortcode" do add one more class with css

.listing-item
{
  float:left;
  width:20%;
}