Support » Plugin: Single Latest Posts Lite » Borders around thumbnails

Viewing 8 replies - 1 through 8 (of 8 total)
  • Yes, edit these lines in style.css:

    .slposts-block-thumbnail a > img {
       border: 1px solid #efefef;
       padding 3px;
    }

    to:

    .slposts-block-thumbnail a > img {
       border: 1px solid #000;
       padding 3px;
    }

    If you want to get rid of the white between the image and the border, remove that padding line as well.

    Thread Starter mallorycruz

    (@mallorycruz)

    Hmm, I tried adding that to the custom CSS, which overrides the stylesheet. Nothing happened. I also looked for that in the actual style.css but didn’t see it.

    This is already in my custom.css–used it to fixed the alignment.

    .slposts-block-item {
    float: none !important;
    display: inline-block;
    width: 47%;
    margin-right: 10px;
    margin-bottom: 10px;

    Thanks!

    .slposts-block-item{} applies to the <div> tag that contains your thumbnail images. The .slposts-block-thumbnail a > img {} that I mentioned styles <img> tags below that <div>.

    You can just add this block to your custom CSS as well and you should be good:

    .slposts-block-thumbnail a > img {
       border: 1px solid #000;
       padding 3px;
    }

    Thread Starter mallorycruz

    (@mallorycruz)

    Still no changes, not sure why. I’m just not happy with the way this looks–it looks unfinished to me. I can’t get it aligned correctly either so maybe I’ll just look for another plugin.

    Thanks for your help!

    Plugin Author Jose Luis SAYAGO

    (@iluminatus)

    Hello Mallory,

    Sorry for the late response. Actually this is a styling issue rather than a plugin’s one, the thing is it was meant to give people freedom to visually adapt content to match their sites. That’s why it’s difficult to suit everybody’s needs.

    However before giving up, I propose you to add one more rule to your stylesheet. Please try adding this:

    .slposts-block-title {
        min-height: 100px;
    }

    The problem is, your post titles’ length vary from one to another so shorter ones render images closer than larger ones. This tweak should set a minimum 100px height area for titles to keep them equally spaced from top and bottom elements. I’ve tested this on your actual site and here you can see a screenshot of what it should look like after this rule has been applied: Screenshot

    Hope this solves the problem.

    Thread Starter mallorycruz

    (@mallorycruz)

    Thank you very much! That definitely solved some of the spacing issue. As you can see in the thread above, I’m also trying to darken the borders of the thumbnails but having no luck. One guy suggested adding

    .slposts-block-thumbnail a > img {
    border: 1px solid #000;
    padding 3px;

    to the custom css but nothing has changed. If I want to change the font size as well, do I do that on the custom.css or is in the shortcode generator?

    Thanks so much!

    Plugin Author Jose Luis SAYAGO

    (@iluminatus)

    I’m glad the spacing issue is solved. As for the black borders those are the rules however as they’re used in the default stylesheet as well you’ll need to override them. In CSS it means you need to force those rules adding the !important tag:

    .slposts-block-thumbnail a > img {
       /* change 1px to 3px for a stronger border */
       border: 1px solid #000 !important;
       padding: 3px !important;
    }

    Adding those rules to your custom stylesheet should do the trick. Let me know if it works.

    Ah, the plugin is putting it’s stylesheet at the bottom! Tsk tsk. http://codex.wordpress.org/Function_Reference/wp_enqueue_style

    Mallory, Jose’s last code should do what mine was trying to do.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Borders around thumbnails’ is closed to new replies.