Miguelito87

Thanks, Jeremy, that did the trick, and I see now what I was missing!

Would it be possible to do this for selected posts only? I’d like to upload some galleries and it would be great if only the gallery images would be displayed in the post while retaining the featured image on the front page. Hope you can help me out, I love the theme and the support!

Hey Petra,

Thanks for replying, you’re awesome! The theme I’m using is Sparkling by Colorlib.

I should have mentioned that I copied the css from the vertical layout into the custom css, which is from where I’m tweaking the css.

So I changed that code to 20px, which was too far to the right, but 12px puts it nicely in the center. That is, of course, until I start narrowing the window.

Here’s the screenshot: https://www.dropbox.com/s/9z20bo1uxs9grwi/Untitled.png?dl=0

Can I use css to move around the ‘Related posts’ text as well? Guess that’s more of a html thing in the plugin code itself, huh?

And here’s the whole of my custom code, if it’s of any help:

.wp_rp_wrap .related_post_title {
	clear: both;
	padding: 0 !important;
	margin: 0 !important;
}
div.wp_rp_content {
	display: inline-block !important;
}

div.wp_rp_footer {
	text-align: right !important;
	overflow: hidden !important;
}
div.wp_rp_footer a {
	color: #999 !important;
	font-size: 11px !important;
text-align: left !important;
	text-decoration: none !important;
	display: inline-block !important;
}
div.wp_rp_footer a.wp_rp_edit {
	color: #fff !important;
	font-size: 12px !important;
	text-decoration: underline !important;
text-align: left !important;
	font-weight: bold !important;
	background: #f79124 !important;
	border-radius: 2px !important;
	padding: 3px 6px;
}
ul.related_post {
	display: inline-block !important;
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
}
ul.related_post li {
	position: relative !important;
	display: inline-block !important;
	vertical-align: top !important;
	zoom: 1 !important;
	*display: inline !important;
	width: 200px !important;
text-align: left !important;
	margin: 10px 10px 10px 0px !important;
	padding: 12px !important;
	background: none !important;
}
ul.related_post li a {
	position: relative !important;
	display: block !important;
	font-size: 13px !important;
	line-height: 1.6em !important;
	text-decoration: none !important;
	margin-bottom: 5px !important;
	text-indent: 0 !important;
}
ul.related_post li img {
	display: block !important;
	width: 200px !important;
	height: 133px !important;
	max-width: 200px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;

	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
	opacity:1 !important;
	-webkit-transition: opacity 0.5s !important;
     	-moz-transition: opacity 0.5s !important;
       	-o-transition: opacity 0.5s !important;
          transition: opacity 0.5s !important;
	filter:alpha(opacity=100); /* For IE8 and earlier */
}

ul.related_post img:hover
{
opacity:0.6 !important;
-webkit-transition: opacity 0.5s !important;
     -moz-transition: opacity 0.5s !important;
       -o-transition: opacity 0.5s !important;
          transition: opacity 0.5s !important;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

ul.related_post li a img.wp_rp_santa_hat {
	display: none !important;
}

ul.related_post li small {
	font-size: 80%;
}

Muchas gracias for your help, looking forward to what you came up with for the scaling!

Hey Petra,

Thanks for your reply! My blog is still on a local host, so that’s a bit of a problem. Is there anything else I can do so you can help me out? Some code in particular you’re looking for?

Cheers,
Miguel

Thanks man, worked like a charm! I’ll leave the image width as it is, not worth screwing shit up for something minor as that. Cheers!