Customize Genesis Featured Posts in Agency Pro

[chamster]

I'm building my first Agency Pro site and I like how the demo site for this theme uses the Genesis Featured Posts widget to show featured posts as images with text overlay upon rollover.

My question is this: is there a way to customize the number of rows and columns, along with the size of the images?

The default is two rows of three posts, with each having default width of 380 px. What I want to do is have a single row of six posts with width of about 120px each.

I'm pretty good at messing around with php and css but I don't have an unlimited amount of time to put into this, so hopefully there's a not-too-complex way to get at this.

Thanks!

[Anita]

Open up the functions and look for the image sizes. Look for 380, change to 120. See how that takes effect. You may have to regenerate the thumbnails to resize images.

---

Love coffee, chocolate and my Bella!

[chamster]

Sounds good for creating the proper image sizes. But will that change the rows/columns to what I'm looking for? I noticed before that when I chose 150x150 images for the widget, the boxes were still 380x380, and there were still two rows and three columns.

[chamster]

I've gotten it to display the featured posts and images in the proper size for my layout (via css). But still haven't found where in the code it says to make 3 columns per row. I want 5 columns. When I view page source I see <section id="featured-post-3" class="widget featured-content featuredpost">. But I can't find any css that says #featured-post-3 and I don't know if that has anything to do with the 3 columns anyway. Any ideas? Thanks!

[Anita]

It's hard working in the blind. Can you share a link to your site so I can take a look?

---

Love coffee, chocolate and my Bella!

[chamster]

It's very rough and preliminary but here it is:

http://www.terracomwebdesign.com/websites/gs2014/

The featured post widget I'm working on is on the home page only.

Thus far I've only been developing it on my hard drive. Just uploaded it to the url above for demo purposes.

[chamster]

Well I've hunted it down and found the following css:

.home-bottom .featuredpost .post:nth-of-type(3n+1),
.home-middle .featuredpost .post:nth-of-type(3n+1) {
clear: left;
}

I'm just learning about this, but looks like this takes the first article and clears the left float, leaves the left float in place for 2nd and 3rd, then clears the left float for the 4th, thus effectively starting a new row of articles.

Now I understand how css does this. Theoretically I could edit the code to make it (5n+1) and that would give me 5 columns before starting a new row. Problem is, I can't find the code that designates first and fourth articles get the (3n+1) css applied to them.

[Anita]

In the widget, do you have it set to 3 or 5 right now.

---

Love coffee, chocolate and my Bella!

[chamster]

I'm not sure which setting you're referring to but "number of posts to show" is set to 9. I don't see another setting that seems relevant. If I change it to 5, it still shows 3 columns.

[Anita]

I sent out a tweet to see if I can get you someone with more experience. I am not proficient in what you need. Hope to see someone respond here shortly.

---

Love coffee, chocolate and my Bella!

[Diane Kinney]

The number of posts across is not controlled by setting a number to display but rather the width of the container and the elements.

The containing div is currently only 450px wide, increase that and then change the featured post element to be 20% instead of 33%.

#home-middle .wrap {
float:left;
max-width:450px;
}

.agency-pro-home .featuredpost .entry {
background: #333;
float: left;
width: 33.33334%;
}

---

Need more help? Find me on Twitter @gidgetthegeek

[chamster]

Thanks for the idea. Makes sense, and I think those changes did need to be made, but making them still didn't achieve the objective. I've uploaded the new stylesheet to the url above. I just tried to go for 4 columns, so I set the max-width to 600px and the post width to 25%. But still 3 columns.

When I view the page source code in Firefox, the article tags don't show any .post:nth-of-type classes. But when I inspect the page in Firebug the 1st and 4th articles both have the .post:nth-of-type(3n+1) class applied to them. All the articles have a float:left style, but only the 1st and 4th articles have the .post:nth-of-type(3n+1) class, which gives those 2 articles a clear:left. This causes the 4th article to be displayed on a new "row", as opposed to being displayed to the right of the preceding article.

At least that's how it appears to be working. So my question remains: where is that .post:nth-of-type(3n+1) coming from?

Thanks.

[chamster]

Does anybody know where/how the .post:nth-of-type(3n+1) class gets put in for the 1st and 4th posts in the featured posts widget? I'm stumped! Thanks.!

[chamster]

This topic was resolved here: http://www.studiopress.community/topic/nth-of-type-css-on-agency-pro-featured-posts/

Thank you to those who took the time to respond.

[Author]

Posts