Making a Widget Display Featured Posts like Agency Pro

[bearknuckles]

Hello,

I was using Agency Pro and just switched to monochrome. I really miss how Agency Pro displayed their featured posts widget on the middle widget there. I can't seem to figure it out myself.

Can anyone help?

[ᴅᴀᴠɪᴅ]

The easiest way would be to create a new widget area on the front page of monochrome pro, with the same markup as the one in Agency Pro (so name it home-middle, or home-bottom, whichever one you're talking about - just take it from the functions.php file) Then copy and paste the styling from that home page widget area from agency pro to your Monochrome Pro stylesheet. Then you can add the featured content like you would with agency pro and it should look pretty much the same.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[bearknuckles]

That's an interesting idea, Dave. But there are so many other elements to how Agency pro displays that widget that are undesirable for this current design. I'm really only looking for the specific text overlay tiling effect.

[bearknuckles]

This is what I have thus far, guys. I can't get the entry information to load over the transparency overlay though.

/* Front Page 2 Featured Posts Support
---------------------------------------------------------------------------------------------------- */

.front-page-2 .flexible-widgets.widget-fourths,
.front-page-2 .flexible-widgets.widget-halves {
	padding-bottom: 20px;
}

.front-page-2 .flexible-widgets.widget-halves.uneven {
	padding-bottom: 0;
}

.front-page-2 .flexible-widgets.widget-fourths .widget:nth-of-type(1) {
	width: 100%;
}

.front-page-2 .flexible-widgets.widget-fourths .widget {
	width: 50%;
}

.front-page-2 .flexible-widgets.widget-fourths .widget:nth-child(4n) {
	clear: left;
}

.front-page-2 .flexible-widgets.widget-area .featuredpost:nth-child(1) .entry,
.front-page-2 .flexible-widgets.widget-halves.uneven .featuredpost .entry {
	float: left;
	width: 50%;
}

.front-page-2 .flexible-widgets.widget-area .featuredpost:nth-child(1) .entry:nth-of-type(odd),
.front-page-2 .flexible-widgets.widget-halves.uneven .featuredpost .entry:nth-of-type(odd) {
	clear: left;
	padding-right: 40px;
}

.front-page-2 .flexible-widgets.widget-area .featuredpost:nth-child(1) .entry:nth-of-type(even),
.front-page-2 .flexible-widgets.widget-halves.uneven .featuredpost .entry:nth-of-type(even) {
	padding-left: 40px;
}

.front-page-2 .flexible-widgets .widget-wrap p {
	margin-bottom: 20px;
}

.front-page-2 .flexible-widgets.widget-area .widget-wrap p.entry-meta {
	font-size: 14px;
	font-size: 1.4rem;
	margin-bottom: 0;
}

.front-page-2 .featuredpost img:hover {
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
	  filter: alpha(opacity=10);
	  -moz-opacity: 0.1;
	  -khtml-opacity: 0.1;
	  opacity: 0.1;
}

.front-page-2 .featuredpost .entry {
	background-color: #fff;
	color: #000;
}

.front-page-2 .featuredpost .entry-title a {
	color: #000;
}

[ᴅᴀᴠɪᴅ]

The way it is done on agency pro is that the .featured-content .entry is position: relative and the image is position: absolute; This is the key to the entry-header and entry-content to sit behind the image like it does.

On hover, the image reduces it's opacity and the content becomes visible.

You'll find the exact CSS from about line 1300 in the style.css in agency pro. If you don't understand the CSS, then I don't know how to help.

Good luck!

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[bearknuckles]

Hi Dave,

My problem was that the absolute position on the image class threw everything off. It was a cluster F.

[bearknuckles]

Anyone else with some insight in particular to the absolute position issue?

[Author]

Posts