Infinity Pro Blog Grid Layout

[chris01]

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/

[marybaum]

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

[marybaum]

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

[chris01]

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!

[marybaum]

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

[marybaum]

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

[chris01]

Tks!

[marybaum]

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

[chris01]

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?

[marybaum]

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

[marybaum]

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

[marybaum]

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

---

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

[marybaum]

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

[chris01]

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!

🙂

[marybaum]

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

[cartwa]

Hi Mary,

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

http://www.dynastylc.com/podcasts-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?

[marybaum]

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