• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Customize Genesis Featured Posts in Agency Pro

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Customize Genesis Featured Posts in Agency Pro

This topic is: resolved

Tagged: agency pro, customize, Genesis Featured Posts widget

  • This topic has 13 replies, 3 voices, and was last updated 11 years, 4 months ago by chamster.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 1, 2014 at 4:47 pm #92985
    chamster
    Member

    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!

    March 1, 2014 at 10:20 pm #93044
    AnitaC
    Keymaster

    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.


    Need help with customization or troubleshooting? Reach out to me.

    March 1, 2014 at 11:44 pm #93054
    chamster
    Member

    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.

    March 13, 2014 at 5:33 pm #94781
    chamster
    Member

    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!

    March 13, 2014 at 6:47 pm #94783
    AnitaC
    Keymaster

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


    Need help with customization or troubleshooting? Reach out to me.

    March 13, 2014 at 7:12 pm #94785
    chamster
    Member

    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.

    March 13, 2014 at 7:45 pm #94787
    chamster
    Member

    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.

    March 13, 2014 at 7:46 pm #94788
    AnitaC
    Keymaster

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


    Need help with customization or troubleshooting? Reach out to me.

    March 13, 2014 at 7:54 pm #94789
    chamster
    Member

    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.

    March 14, 2014 at 9:31 am #94864
    AnitaC
    Keymaster

    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.


    Need help with customization or troubleshooting? Reach out to me.

    March 14, 2014 at 9:39 am #94866
    Diane Kinney
    Member

    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

    March 14, 2014 at 11:09 am #94875
    chamster
    Member

    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.

    March 20, 2014 at 10:36 pm #95921
    chamster
    Member

    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.!

    March 23, 2014 at 9:03 am #96174
    chamster
    Member

    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
Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble