Shortcode CSS: Modify the Layout of the Excerpts and/or Thumbnails

IMPORTANT: Please note that due to the PHP templates used in WP RSS Aggregator, not everything in the shortcode display can be directly modified using CSS. As an example, images cannot be moved above the title without modifying the PHP templates through a  customization.

NOTE: The below styles are applied to the feed item excerpts that are imported and displayed only when using the Excerpts & Thumbnails add-on along with the free core plugin.

Modify the layout of the excerpts and/or thumbnails in the shortcode display to achieve the look you want.

The below is CSS code that can be copied directly into your theme or child theme‚Äôs stylesheet ( style.css file), or it can be applied through a custom CSS plugin, such as the ones listed below.


CSS to Wrap Excerpt Around Thumbnail

.thumbnail-excerpt {
    overflow: visible !important;
}

If a feed item does not have an excerpt, the above rule will result in the feed item below overlapping the one above. To avoid this, the below CSS rule must also be added.

li.feed-item{
  overflow: auto !important;
}

Here is an example of what the above CSS could achieve, with a thumbnail size of 30px by 30px:


CSS to Set Image and Excerpt as Block Elements

Set the thumbnail image and the excerpt as block elements in order to have them displayed on separate lines for a different styling approach.

.thumbnail-excerpt img{
    float: none !important;
}<br>

Here is an example of what the above CSS could achieve with a thumbnail size of 100px by 100px:


CSS to Centre the Image and/or Excerpt

Centre the thumbnail image as well as the excerpt to have them displayed beneath each other as centred items.

.thumbnail-excerpt img{
    float: none !important;
}
 
.thumbnail-excerpt {
    text-align: center;
}

Here is an example of what the above CSS could achieve if we also removed the bullet points, centred the feed item title, and disabled the display the source and publish date. The additional CSS required for this would be:

li.feed-item {
    text-align: center;
}

ul.rss-aggregator {
    list-style-type: none;
}

Of course, you may style this even further to make it look that much better, such as adding padding above and below the thumbnail image, making the title font size larger, and changing the font style for the excerpt. Get creative!

Still need help? Contact Us Contact Us