Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making a Widget Display Featured Posts like Agency Pro
- This topic has 6 replies, 2 voices, and was last updated 6 years, 10 months ago by bearknuckles.
-
AuthorPosts
-
June 22, 2017 at 3:14 pm #208119bearknucklesMember
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?
June 22, 2017 at 8:23 pm #208148ᴅᴀᴠɪᴅMemberThe 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.
June 23, 2017 at 10:20 am #208174bearknucklesMemberThat'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.
June 23, 2017 at 12:06 pm #208185bearknucklesMemberThis 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; }
June 23, 2017 at 4:07 pm #208201ᴅᴀᴠɪᴅMemberThe 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.
June 23, 2017 at 5:22 pm #208216bearknucklesMemberHi Dave,
My problem was that the absolute position on the image class threw everything off. It was a cluster F.
June 26, 2017 at 10:01 pm #208325bearknucklesMemberAnyone else with some insight in particular to the absolute position issue?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.