Q: formatting related posts output

Hey Yogie,

This is not possible ‘out of the box’. You should however be able to fix this pretty easily with some custom CSS. You can edit the CSS RP4WP outputs via the settings menu.

Does this answer your question?

Cheers,
Barry

Hi Barry,

well I already thought that this is the way to achieve it.

The more complicated question would be how? ??

You would need to know how to limit the output to each row to two posts and make each post take place 50% each right?

Cheers
Yogie

I can’t give you exact CSS because this will differ per theme. 50% width and maybe floating it left should do the trick.

Please note that you can also do the styling in your theme and disable the plugin CSS output by clearing the field.

Good luck and let me know if you run into anything!

Cheers,
Barry

Hi Barry,

I found this is working for me quite well now…

.rp4wp-related-posts ul {column-count:2; -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; -moz-column-rule-color:  #ccc; -moz-column-rule-style:  solid; -moz-column-rule-width:  1px; -webkit-column-rule-color:  #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width:  1px;}
.rp4wp-related-posts h3 {margin:0;padding-bottom:5px:0;font-family: 'Raleway',sans-serif;font-size:16px;font-type:bold;}
.rp4wp-related-posts li {list-style:none;padding-bottom:0px; height:240px; min-height: 240px; overflow:hidden;}
.rp4wp-related-posts li p {margin:0;padding:0;}
.rp4wp-related-post-image{width:80px;height:auto; border:1px;padding-right:8px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;float:left;}

Please feel free to share this along with your plugin for interested people.
This requires 4 related linked posts. I have set the Excerpt length to 50.

I tested it on Safari, Chrome, FireFox, Opera, SeaMonkey and an iPad, iPhone and Nexus and all looked good so far.

Cheers
Yogie

Thanks Yogie, that looks great!

Hoi Barry,

I ran into trouble with the above CSS for some browsers. Therefore I have changed it and come up with an even more robust CSS code, although the design needs to be changed a bit as well but I really love the look and feel now.

Again this is a 4 related posts in two column layout:

.rp4wp-related-posts ul {
	width:98%;
	overflow:hidden;
	}

.rp4wp-related-posts li {
	line-height:1.5em;
	float:left;
	display:inline;
	width: 44%;
	border-style:dotted;
	border-width:1px;
	border-color:#ccc;
	padding:5px;
	margin: 5px;
	height: 240px;
	max-height: 240px;
	overflow:hidden;
	}

.rp4wp-related-posts li:nth-child(odd) {
	clear:left;
	}

.rp4wp-related-posts h3 {
	margin:0px;
	padding-top:15px;
	padding-bottom:10px:
	font-size:16px;
	font-type:bold;
	}

.rp4wp-related-post-image{
	width:80px;
	height:auto;
	border:1px;
	padding-right:8px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	float:left;
	}

Cheers
Yogie