How to center thumbnail images?

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;}

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?

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.

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.

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:

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

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?

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.

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?

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…

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;}