WordPress.org

Ready to get started?Download WordPress

Forums

Single Latest Posts Lite
Borders around thumbnails (9 posts)

  1. mallorycruz
    Member
    Posted 7 months ago #

    Hi again! Is there a easy addition to the css that can make a black border around the thumbnails? It looks like there is already a border there but it's white.

    Thanks!
    Mallory

    http://www.mallorycruz.com

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

  2. Luke Rumley
    Member
    Posted 7 months ago #

    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.

  3. mallorycruz
    Member
    Posted 7 months ago #

    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!

  4. Luke Rumley
    Member
    Posted 7 months ago #

    .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;
    }
  5. mallorycruz
    Member
    Posted 7 months ago #

    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!

  6. Jose Luis SAYAGO
    Member
    Plugin Author

    Posted 7 months ago #

    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.

  7. mallorycruz
    Member
    Posted 7 months ago #

    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!

  8. Jose Luis SAYAGO
    Member
    Plugin Author

    Posted 7 months ago #

    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.

  9. Luke Rumley
    Member
    Posted 7 months ago #

    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.

Reply

You must log in to post.

About this Plugin

About this Topic