Customize Genesis Featured Posts in Agency Pro

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

This topic is: resolved

This topic contains 13 replies, has 3 voices, and was last updated by  chamster 4 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #92985

    chamster
    Member
    Post count: 24

    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!

    #93044

    anitac
    Participant
    Post count: 6991

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #93054

    chamster
    Member
    Post count: 24

    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 150×150 images for the widget, the boxes were still 380×380, and there were still two rows and three columns.

    #94781

    chamster
    Member
    Post count: 24

    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!

    #94783

    anitac
    Participant
    Post count: 6991

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #94785

    chamster
    Member
    Post count: 24

    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.

    • This reply was modified 4 months, 1 week ago by  chamster.
    • This reply was modified 4 months, 1 week ago by  chamster.
    #94787

    chamster
    Member
    Post count: 24

    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.

    #94788

    anitac
    Participant
    Post count: 6991

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #94789

    chamster
    Member
    Post count: 24

    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.

    • This reply was modified 4 months, 1 week ago by  chamster.
    • This reply was modified 4 months, 1 week ago by  chamster.
    #94864

    anitac
    Participant
    Post count: 6991

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #94866

    Diane Kinney
    Participant
    Post count: 30

    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

    #94875

    chamster
    Member
    Post count: 24

    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.

    #95921

    chamster
    Member
    Post count: 24

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

    #96174

    chamster
    Member
    Post count: 24

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

    Thank you to those who took the time to respond.

    • This reply was modified 4 months ago by  chamster.
    • This reply was modified 4 months ago by  chamster.
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.