• 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

Infinity Pro Blog Grid Layout

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 › Infinity Pro Blog Grid Layout

This topic is: not resolved

Tagged: blog, grid layout

  • This topic has 16 replies, 3 voices, and was last updated 4 years, 5 months ago by marybaum.
Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • August 29, 2018 at 5:26 pm #222799
    chris01
    Member

    Hi All,

    How does one install/create the 'grid' view on the Blog post page for the Infinity Pro template?

    As explained in the Infinity Pro set up...

    "The Infinity Pro theme demo does not use the Blog Page template to display a list of blog posts. Instead, we’ve created a post category named Journal and have added its link to the menu."

    So with this in mind, I went ahead and set up the 'good old Blog page'... Which turned out fine. Blog posts show up etc.

    But as for the Grid set up. Nothing works.

    I have now tried...what .... 4 different plugins - inclucing the Genesis Grid Loop - and still nothing. Cleared the cache. Nothing. And on.

    So, what am I missing?

    Can it be done?

    https://chrisjechoux.com/blog/

    https://chrisjechoux.com/blog/
    August 30, 2018 at 12:07 pm #222813
    marybaum
    Participant

    Hmmm. I'm taking a look and I'll see what's up.


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 12:29 pm #222815
    marybaum
    Participant

    Welp.

    Looks to me like they don't set the Journal page up as a grid in the demo (https://demo.studiopress.com/infinity/category/journal/?_ga=2.92114394.1324417560.1535652250-1192956035.1493832702) on StudioPress itself.

    Do I understand that you'd like to customize that page to show a grid of posts?

    There actually is a blog template in the files, and that grid might exist in the CSS -- lemme check.

    Mary


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 12:38 pm #222817
    chris01
    Member

    Hi Mary,

    Do I understand that you'd like to customize that page to show a grid of posts?
    You are correct -

    Tks for looking into this!

    August 30, 2018 at 12:47 pm #222818
    marybaum
    Participant

    Actually, there isn't - I misspoke.

    Easy enough to create that grid without a template; I stopped using blog templates and some others a few years back, because the CSS to control that grid is pretty straightforward.

    I'll post it for you later this afternoon after a couple of appointments -- I should be back around 4 pm Central (GMT =6).


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 1:01 pm #222820
    marybaum
    Participant

    If you have a little time to watch videos (who am I kidding?) check my talks on body classes and CSS-Grid. They basically nail this customization in about ten lines of code, give or take.

    Off to the chiro and the haircut!

    MB


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 1:33 pm #222821
    chris01
    Member

    Tks!

    August 30, 2018 at 4:08 pm #222823
    marybaum
    Participant

    Got back late - throwing it together now.

    Do you need me to write it specifically for your site, or can you add your colors and type?


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 4:29 pm #222824
    chris01
    Member

    Hi!

    If you could write for my site, that would be greatly appreciated - that said, I can add colors and type, no problem.

    This is really...really nice - tks!

    (I'm at my wits end with this - and just disappointed with myself that I did not realize when installing the template, that this type of issue would...show up! Like they say, read the fine lines - or look further than your nose! )

    PS: what are/is the link(s) to your video tutorials?

    August 30, 2018 at 5:04 pm #222825
    marybaum
    Participant

    They're right in my signature - just click the blue type and you'll be on my WordCamp speaker page.(http://wordpress.tv/speakers/mary-baum) At the moment there are eight talks - body classes is Phoenix 2016, and Grid are Miami and Albuquerque 2018.

    Miami opens with a better joke! 😜

    I'm just about done with your code - another 20 mins or so I think.


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 5:58 pm #222828
    marybaum
    Participant

    In your Genesis settings, you'll want to make sure you check Show the Featured Image.

    I took the liberty of assuming in your grid you'd just want headline and featured image, and left out all the references to your colors and type.

    /* Journal styling
    --------------------------------------------- */
    
    .page_blog .site-inner {
    	display: grid;
    	grid-gap: 2rem;
    	margin: 2rem 12vw;
    }
    
    .page_blog .content-sidebar-wrap {
    	display: flex;
    	flex-flow: column;
    	justify-content: flex-start;
    	align-items: center;
    }
    
    .page .content {
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	grid-gap: 2rem;
    	max-width: none;
    	margin: 0;
    	padding: 0;
    }
    
    .archive-description {
    	display: grid;
    	grid-column: 1/-1;
    }
    
    .page_blog .page .category-journal .entry {
    	display: grid;
    	grid-gap: 2rem;
    	margin: 0;
    	padding: 0;
    }
    
    .page_blog.page .category-journal .entry-header {
    	display: grid;
    	grid-row: 2;
    }
    
    .page_blog.page .category-journal h2.entry-title {
    	display: grid;
    }
    
    .page_blog.page .category-journal .entry-content {
    	display: grid;
    	grid-row: 1;
    }
    
    .page_blog.page .category-journal .entry-content a.entry-image-link,
    .page_blog.page .category-journal .entry-content a > img {
    	display: grid;
    	grid-row: 1;
    }
    
    .page .category-journal .entry-content p,
    .page .category-journal .entry-content ul li,
    .page .category-journal .entry-content h3,
    .page .category-journal .entry-meta {
    	display: none;
    }

    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 6:02 pm #222829
    marybaum
    Participant

    Without getting into your admin, this is what the above styling gies you:Grid of posts


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 6:03 pm #222830
    marybaum
    Participant

    Gives you ... not gies you. 😜


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    August 30, 2018 at 6:59 pm #222833
    chris01
    Member

    Hello again!

    May I just say...YOU. ARE. THE. BEST!!

    As for the design, you assume correctly. I like it simple and to the point. Again, thank you so much for your time - As I said before, this is greatly appreciated.

    Also, just had a look at your presentations @ WordCamp, very interesting, and for sure, will be following up more deeply. WordCamp is the best. Been to a few of them myself in Montreal throughout the years... Best 3 days...

    You made my day!

    Merci!

    🙂

    August 31, 2018 at 6:11 pm #222849
    marybaum
    Participant

    You are most welcome, and I'm glad I did!

    One caveat: That's the relatively new CSS-Grid specification, which should work in modern browsers going back through the last year or two of all the major browsers except Opera Mini. Course, as I asked the folks in Miami, who among us even knows anyone who uses Opera Mini?

    (The person running the video has a friend ... )


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

    October 8, 2018 at 9:17 am #223602
    cartwa
    Member

    Hi Mary,

    I too am looking to format my blog page into a grid. Except unfortunately I am not so bright.

    Podcasts and Blogs

    I have opened the editor and can't find anything titled "Journal Styling" to edit. Where is that section so that I can do the above?

    October 8, 2018 at 12:10 pm #223606
    marybaum
    Participant

    That's right. As Chris mentioned in her very first post, the setup instructions include this info:

    As explained in the Infinity Pro set up...
    
    "The Infinity Pro theme demo does not use the Blog Page template to display a list of blog posts. Instead, we’ve created a post category named Journal and have added its link to the menu."

    Since they've created a post category, there's probably a body class called Journal you can use to target your grid styles. If they haven't, you might take a few minutes and watch my talk on body classes.

    Hope that helps!

    MB

    PS> When you say you've opened the editor, please tell me you mean a code editor on your hard drive and NOT the Editor in the Admin? Editing code in that editor is the surest way I know to break a site permanently.


    Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 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

© 2023 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