WordPress.org

Ready to get started?Download WordPress

Forums

Single Latest Posts Lite
[resolved] 3 blocks wide & center thumbnail (9 posts)

  1. SetMonkey13
    Member
    Posted 10 months ago #

    Is it possible to made the posts 3 blocks wide instead of two?
    Also, how do I center the thumbnail over the title?

    http://wordpress.org/extend/plugins/single-latest-posts-lite/

  2. Jose Luis SAYAGO
    Member
    Plugin Author

    Posted 10 months ago #

    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.

  3. SetMonkey13
    Member
    Posted 10 months ago #

    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 http://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.

  4. tiki16
    Member
    Posted 5 months ago #

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

  5. Jose Luis SAYAGO
    Member
    Plugin Author

    Posted 5 months ago #

    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é.

  6. tiki16
    Member
    Posted 5 months ago #

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

  7. tiki16
    Member
    Posted 5 months ago #

    I managed to get the settings styled. thanks Steve

  8. putnut00
    Member
    Posted 2 months ago #

    I managed to get the settings styled. thanks Steve

    and how did you get it to work?

  9. bloggerfortech
    Member
    Posted 3 weeks ago #

    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

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.