Display blog excerpt on Home page like Home Boxes

[Karlson Rapp]

Hi Bill,
We would like the layout display of our most recent blog post on the website homepage to look like the Home Box widget. With the image to the left or right and then the title and excerpt on the side. I do not want to hard code this into a Home Box widget because we would like it to populate automatically when the next post is published. I was thinking I could modify the Featured post to display like the Home Box Widget but I could not find where the layouts are for the Featured post or the Home Box widget. If possible could you also provide some assistance with how to modifying the Featured post layout to display like the Home Box widget?

Thanks!
Karlson

[Bill Robbins]

Hello Karlson,

You have a great idea there. This is certainly not something that I would want to hard code into each blog post. I believe we can alter the featured post widget to look like the home boxes with a bit of CSS. Give this a try:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (min-width: 767px) {
   
   	.home .widget article.post {
   		background-color: rgba(0, 0, 0, 0.08);
   		margin-bottom: 30px;
   		padding: 30px;
   	}
   	
   	.home .widget article.post p.post-meta {
   		display: inline-block;
   	}
   	
   	.home .widget article.post img.attachment-home-thumbnail {
   		max-width: 50%;
   		float: left;
   		margin-top: -30px;
   		margin-bottom: -30px;
   		margin-left: -30px;
   		margin-right: 30px;
   	}
   	
   	.home .widget article.post:nth-child(even) img.attachment-home-thumbnail {
   		float: right;
   		margin-left: 30px;
   		margin-right: -30px;
   	}
   
   }
   

3. Update your settings.

If all goes as planned, that should give you a “box” for each post. Posts that are “odd” will have the image aligned to the left while “even” ones will be on the right side.

If that works well, I may incorporate this into the theme. That seems like a good option to me.

Let me know if you run into any trouble or questions,
Bill

[Karlson Rapp]

Hi Bill,
That did the trick! Thanks for the help. The photo sizing and alignment is off by what I think is the margin settings of the article element. But I think this is because of targeting the parent article element and there is no wrapper around the text elements to differentiate it. I’m kinda picky and stuff has to line up or I can’t sleep at night. So I played with the CSS you gave me a bit and came up with this.

@media only screen and (min-width: 767px) {

	.home .widget article.post {
		background-color: rgba(0, 0, 0, 0.08);
		margin-bottom: 30px;
	}
	.home .widget article.post h3{
		margin-top: 30px;
	}
	.home .widget article.post h3,	.home .widget article.post p{
		margin-right: 30px;
	}
	.home .widget article.post p.post-meta {
		display: inline-block;
	}
	
	.home .widget article.post img.attachment-home-thumbnail {
		max-width: 50%;
		float: left;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 30px;
	}
	
	.home .widget article.post:nth-child(even) img.attachment-home-thumbnail {
		float: right;
		margin-left: 30px;
		margin-right: 0px;
	}
	.home .widget article.post:nth-child(even) p,.home .widget article.post:nth-child(even) h3{
		margin-left: 30px;
	
	}

}

The images are lined up and the margins and padding work. I am not sure if it is semantically correct to add the margins to the text elements but it works. I tried looking in the layout files to add in a wrapper div around the text elements but I couldn’t find the correct file to edit.
If you decide to incorporate it into a Theme update that would be great! Maybe consider adding in a wrapper around the text elements of the Featured post so that the padding could be set easier.
Again Thanks for the help!!
Karlson

[Bill Robbins]

Hey Karlson,

The home block widget does have a wrapper around the content portion that makes lining things up a bit easier. If this makes it into the theme, then some similar HTML wrapper will likely come into play here too.

You’re welcome to add margins to text elements. No trouble there at all.

Take care,
Bill

[Author]

Posts