[Plugin: Single Latest Posts Lite] – Post Title format

Hello,

You could use CSS, here is one I created so you can easily adapt it to your needs: SLPosts Custom Titles

At the end of the file you will see the section below, just change the rules to adapt titles to your theme:

/*\
 * ---------------------
 * | + Custom Titles + |
 * ---------------------
\*/
.slposts-wrapper .slposts-ulist-title a,
.slposts-wrapper .slposts-olist-title a,
.slposts-wrapper .slposts-block-title a {
	font-family: Helvetica;
	font-size: 3em !important; /* Keep the !important */
	color: red;
}
.slposts-wrapper .slposts-ulist-title a:hover,
.slposts-wrapper .slposts-olist-title a:hover,
.slposts-wrapper .slposts-block-title a:hover {
  color: blue;
}
/*\
 * ---------------------
 * | - Custom Titles - |
 * ---------------------
\*/

Save the file ‘slposts-customtitles.css‘ to your active WordPress theme root folder (where the style.css file is found) then add the css_style parameter to your shortcode, something like this:

[slposts css_style=slposts-customtitles]

Hope it helps.

Best regards,
José Luis.

Hello Robin,

I’m glad to know it works, as for the thumbnails shamefully this is something I can’t fix on my own, once we upload images WordPress fixes their sizes, this plugin uses those images which have been resized already, it also uses core functions to handle them so it’s not possible to resize them beyond their original size (which is 150×150 by default).

I could of course hardcode image dimensions but it will bring as a result pixelated images with a poor visual quality, that’s why I recommend people other solutions. Here is an idea: Change default WordPress thumbnail dimensions, resize thumbnails using one of the plugins proposed in other topics, if you see your theme is displaying thumbnails applying the new dimensions, then use CSS to fix their size using their classes, i.e:

.supertheme-thumbnail {
    width: 150px !important;
    height: 150px !important;
}

It’s not a panacea, but it may help. There are solutions proposed like this one: Setting Post Thumbnail on WordPress with custom size and Cropping – A simpler approach but it has the same constraints, once WordPress has set its default dimensions, even add_image_size won’t let you create a copy beyond the size set by default.

Cheers.

Hello Bevan,

You could create a custom CSS stylesheet to do that, I’ve tweaked the default style to display blocks horizontally. Of course you may want to add some more changes to adapt it to your theme.

Download this CSS file and save it to your active WordPress theme folder: slp-horizontalBlocks.css then set your Widget Style Settings > Display Type to Blocks, and Custom CSS filename to slp-horizontalBlocks

The only changes I made to the default stylesheet were these:

@media( min-width: 800px ) {
  .slposts-block-item {
      float: left; // Float items to the left
      width: 33.33%; // Set them 33.33% width so 3 blocks fit horizontally
      margin-right: 10px;
      margin-bottom: 10px;
  }
}
.slposts-block-thumbnail a > img {
    border: 1px solid #efefef;
    padding: 3px;
    margin: 0 0 1em 0;
}

Which you will find below comment block starting at line 409:

/*\
 * =========================
 * |                       |
 * | ++ Blocks ++          |
 * |                       |
 * =========================
\*/

Hope this helps,

Cheers.

Hello Bevan,

Sorry I forgot to modify blocks when using Widgets, I’ve fixed it now. I’ve also reduced width to 31.33% to fit 3 blocks in the area you’ve set the widget. Please replace the CSS file by this one: slp-horizontalBlocks.css. Here is a screenshot where you can see how it should look like: http://i.imgur.com/ADlXfbS.png (taken directly from your website, applying fixed rules).

Please let me know if it works.

I’m glad it’s working now. As for the thumbnails just set the widget Height and Width, however, bear in mind those dimensions are ruled by WordPress thumbnail sizes, they crop images do not resize them so if you want your thumbnails to be set 300x100px then your WordPress thumbnail size must be at least 350x350px.

Cheers.