3 blocks wide & center thumbnail

Hi, yes it’s possible with some CSS tweaks. I’ve created a style to display posts in 3 columns with centered thumbnails over the title, check this screenshot: Example Screenshot

The stylesheet can be downloaded through this link > slposts_threeColumns.css

Save the CSS file to your WordPress theme active folder (where style.css is found), then add to your shortcode the css_style parameter like this:

[slposts title_only=false
    thumbnail=true
    auto_excerpt=true
    css_style=slposts_threeColumns
]

CSS rules used to do this (included in the slposts_threeColumns.css file) are found below:

/*\
 * =========================
 * |                       |
 * | ++ Blocks ++          |
 * |                       |
 * =========================
\*/
/*\
 * -----------
 * | Content |
 * -----------
\*/
.slposts-container
.slposts-block-wtitle {
    font-size: 1.3em;
    border-bottom: 1px dotted #efefef;
}
.slposts-block-title a {
    font-size: 1.4em !important;
    text-decoration: none;
}
ul.slposts-block-thumbnail {
    list-style: none !important;
    margin: 0 auto !important;
    text-align: center;
}
.slposts-block-item {
    float: left;
    width: 30%;
    margin-right: 10px;
    margin-bottom: 20px;
}
.slposts-block-item .slposts-caption {
    text-align: left;
}
.slposts-block-thumbnail a > img {
    border: 1px solid #efefef;
    padding: 3px;
    margin: 0 auto;
}
.slposts-block-thumbnail a > img:hover {
    -webkit-box-shadow: 1px 1px 3px rgba(99, 175, 208, 0.15);
    -moz-box-shadow: 1px 1px 3px rgba(99, 175, 208, 0.15);
    box-shadow: 1px 1px 3px rgba(99, 175, 208, 0.15);
}
.slposts-block-thumbnail
div.slposts-block-excerpt
a > img {
    border: 0;
    padding: 0;
}
.slposts-block-meta {
    float: right;
    margin-left: 5px;
    font-family: sans-serif !important;
    font-size: .8em;
    border: 1px dotted #efefef;
    padding: 3px;
    color: #777;
}
.slposts-block-meta a {
    text-decoration: none;
}
.slposts-block-metafooter {
    display: block;
    clear: both;
    border-top: 1px dotted #efefef;
    font-size: .8em;
    text-align: right;
    color: #777;
}
.slposts-block-excerpt {
    text-align: justify;
}
/*\
 * =========================
 * |                       |
 * | -- Blocks --          |
 * |                       |
 * =========================
\*/

Cheers.

Awesome. Thanks so much. I spend most of the night looking for a recent post that would work and I think this might be it.

One more question. It it possible to make an image hover over? Like at the bottom of https://hipsterwp.beantowndesign.com/ where is says “Latest Projects”. I feel like its possibly with some css but I just cant seem to get the image to pop up.

Hello, how can this be applied to a widget?
thanks

Hello tiki16,

Just follow the same instructions above: Download the CSS file, save it to your active WordPress theme folder, then in your widget set “Custom CSS Filename” under Style Settings to slposts_threeColumns. That should do the trick.

Let me know if you need more help.

Cheers,
José.

ok tried that. They are appearinh stacked vertically and not horizontally. I guess it is just a matter of css changes?
thanks

I managed to get the settings styled. thanks Steve

I managed to get the settings styled. thanks Steve

and how did you get it to work?

Hello José,

I would like to use your plugin with the 3 vertical column format. Together with my theme developer’s kind help I got the CSS pasted in but as tiki16 had originally posted here, the columns appear stacked.

I see that tiki16 has managed to fix the problem by himself/herself subsequently but I haven’t been able to do it. Could you please enlighten us non-coders?

Thank you.
Blogger