WordPress.org

Ready to get started?Download WordPress

Forums

Yet Another Related Posts Plugin (YARPP)
[resolved] How to center thumbnail images? (11 posts)

  1. Jose
    Member
    Posted 10 months ago #

    I can't seem to find this anywhere and I am surprised this is not a common question.

    I want the thumbnails to be aligned center, not left as they show in my single posts:

    http://www.shortstoryguy.com/current-event-fiction-podcast-and-story-gentlemen-democrats-by-marina-hovhannisyan/

    Any help or suggestions is appreciated!

    Thank you

    http://wordpress.org/plugins/yet-another-related-posts-plugin/

  2. jeffparker
    Member
    Plugin Author

    Posted 10 months ago #

    I'd suggesting adding the following to your main style.css file:

    .yarpp-related-widget {text-align: center !important;}

    Since your titles are also being cut off, you could also make them smaller and increase the container height by doing the following in your style.css file:

    .yarpp-thumbnail { height: 200px !important; }
    .yarpp-thumbnail-title { font-size:0.8em !important; max-height: 4em !important;}

  3. Jose
    Member
    Posted 10 months ago #

    Thanks man!

    It didn't work out. I decided to hold off on it for now... I actually found a way to center them by going into the content.php of my theme i think it was...but i didn't like the styling of the pictures.

    Do you need to style the pictures with every related plugin, or is there one that comes ready out of the box?

  4. jeffparker
    Member
    Plugin Author

    Posted 10 months ago #

    Do you mind trying to add the CSS code and sending me a link to your site? I wouldn't recommend making style changes in php files.

    YARPP doesn't add much styling because we want to leave it up to the theme and the users to edit their CSS as they wish.

  5. Jose
    Member
    Posted 10 months ago #

    I currently have the plugin disabled because it was not fitting well with the aesthetics of the site. I hadn't touched any CSS code for the majority of the time I had the plugin...so whatever the default was that it came with, that's what I was working with.

  6. joeyproulx
    Member
    Posted 10 months ago #

    JeffParker - thanks for the great plugin. I love it...except that when I enter in the CSS code you specify above, it doesn't change the orientation or the font size.

    I've cleared my cache, and even checked on a couple other machines.

    You can see the issue with some longer related post titles on this post:

    http://www.backyard-hockey.com/2012/10/17/top-5-reasons-you-should-build-a-backyard-rink-this-year. The first three related posts are cut off.

  7. jeffparker
    Member
    Plugin Author

    Posted 10 months ago #

    Hi joeyproulx. The CSS code I specified in this thread was to solve the problem that jcervantes28 was having. Moreover, I don't see where you made those changes in your CSS file. Did you edit your theme's CSS file?

  8. joeyproulx
    Member
    Posted 10 months ago #

    I have the same problems at jcervantes28 does - I'd like my icons centered and I need the font to be smaller to show the entire post title.

    To make the changes, I went to Appearance > Editor > style.css

    And added these lines:

    .yarpp-related-widget {
    			text-align: center !important;
    }
    
    .yarpp-thumbnail {
    		height: 200px !important;
    }
    
    .yarpp-thumbnail-title {
    			font-size:0.8em !important; max-height: 4em !important;
    }

    My theme has a number of PHP files in that same area, but I saw that you don't recommend changing the PHP files.

  9. jeffparker
    Member
    Plugin Author

    Posted 10 months ago #

    Joeyproulx, I don't see that additional CSS code anywhere in your file. Can you confirm that you added it and clicked "Save"? Are you sure you're using that style.css file too?

  10. joeyproulx
    Member
    Posted 10 months ago #

    It looks like my theme blocks the editing of the actual style.css file, but instead has a section in the theme's options where we can insert CSS code. I did that, and it reduced the font size so the full post title was there. But it did not center the icons. Getting closer...

  11. jeffparker
    Member
    Plugin Author

    Posted 10 months ago #

    I think if you do the following, it should center the icons and the entire "Related Posts" section (if that's your intent):

    Comment out the margin from the following:

    .yarpp-thumbnails-horizontal .yarpp-thumbnail-title { }
    img.wp-post-image { }

    Then add this:

    .yarpp-related {text-align:center;}

Reply

You must log in to post.

About this Plugin

About this Topic