[marybaum]

"Do I have to additionally define a new home featured "row" in front-page.php and assign CSS for each new widget?"

Yup. You do!

---

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

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

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

[marybaum]

I'm doing the unthinkable and running it on some production sites -- granted, they're small, with very little traffic, and I'm a reckless old bat!

But so far, no issues.

More concerned with learning enough JS to build new blocks. 😜

---

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

[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]

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]

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]

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

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

[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]

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

[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]

Yup. Looking at the mobile view in Chrome Developer Tools, I see it's sitting in the title area, as it should be.

But the title area has a width of 480 pixels and a right margin of 0.

Mobile screens generally are 414px wide at their widest - think iPhone 6/7/8 Plus.

What you want to do is make that title area less than 480 pixels wide. In fact, I wouldn't use pixels as a unit of measure on any container.

If you're not yet comfortable with contemporary CSS like flexible boxes and CSS-Grid, no problem--Genesis child themes still use traditional floats and clears, and you can make your layouts more fluid just by converting the widths to percentages.

So rather than just changing that width to, say, 300px or 240px, I'd go ahead and change it to, maybe, 50%. And since the place where you need to make that change is outside all of the media queries (styling specific to a certain screen width), that 50% will hold your image on the left side of the page no matter how wide your screen gets.

Hope that helps a little!

Two great places to learn about CSS are CSS-Tricks and Codrops.

After ten years of writing CSS, I still have a button for CSS-Tricks on my toolbar!

---

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

[marybaum]

Generally widgets only show if there's content in them.

Can you post a link to your spare webspace?

---

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

[marybaum]

Here are a couple things that I think will help solve your problem, and they should also help with similar issues that arise as you're laying things out.

1. To keep your home page from taking on any distortions from measurement changes you make to the rest of your site, start by making a copy of what you have now. At the beginning of any rule that affects the home page, add the class .home to the front of the selector, like this:

.full-width-content {}

becomes

.home .full-width-content {}

If you look at your site's source code in your browser dev tools, you'll notice that .home class shows up in the <body> tag at the top - we call that a body class, and it's useful as all getout.

You can style the home rules one way and the other rules, without the home body class, a different way, and pretty much do whatever you want with them.

So you'll want to do ...

2. I realize that your theme uses px and rem all over the place and is still responsive. And that's fine for most elements.

For the biggest containers - like .content, .sidebar and .full-width-content, I would substitute percentages: everywhere you see width: 300px (or thereabouts) I'd change that to roughly 26%. For values between 640px and 880px I'd use a value between 60 and 70% - lower for two sidebars, higher for one, so the total is less than 100%. That way you have room for gutters.

On .full-width-content, set the width to 90 or 100% and the max-width to none.

Doing that makes your site responsive to most screen widths bigger than a tiny phone, where the theme itself has already set those widths to 100%.

Hope this helps!

Mary Baum

---

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

[marybaum]

I would also like to see the white type on the full-screen pictures much bigger, and you might want to play with some more interesting typefaces (I'm an old-school typographer. I only say font when I mean the actual files. ? )

It's fairly simple to use web type these days. There are plugins for Google Fonts, or, better, since you're learning anyway, look through Altitude Pro's functions file for the line that has wp_enqueue_styles_scripts near the beginning, then replace the Google fonts you see listed there with some that are newer and have the same panache as the America's Cup.

The big-type-on-big-pic is one of my favorite tricks. Here are some examples of what I mean:

http://spoede.vet
http://moomawmullenwedding.com (Yes - that's my daughter)
http://racquetpress.com

---

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

[marybaum]

It doesn't have a separate page - it thinks you're going to show all your portfolio pieces on the home page, in the Portfolio section.

Now. A caveat. What follows is Addled Momma's ADHD-Friendly Automated Archive Method (because while I have a lot of passions, taxonomies are NOT on the list). So please feel free to extrapolate.

Start by defining a category called Portfolio (or something berry-related, in your case. You could have several: Berry Decadent Desserts, Berry Good Fun for Kids (a page of craft and cooking activities, from using the berries as dye in tie-dying shirts to making berry sundaes?) Berry Nutritious Breakfasts (sorry - there's an ad writer in my chair trying to get the developer to shut up.)

Since Genesis gives us a place for a title and intro copy on the Add New/Edit Category page, you can just use those Category archive pages (not to be confused with the Genesis archive page that looks like a site map) as your variously named pages.

To be clear, you will not be going to Pages/All Pages/Add New and choosing a template from the dropdown in the sidebar on the right. In fact, you won't be physically adding pages at all.

All you'll do is pull out the dropdown under Posts and choose Categories, then start adding new ones. When you build your menus, use those categories as your links - not pages, since you won't have any.

From here, your options depend on two factors:

1. how comfortable you are with CSS and php -
2. how different you want those pages to look from the default,

You can do some stuff on the Genesis Theme Settings page - about halfway down.

You can do more with CSS and body classes, if you want each category to look different.

And if you really want to get funky, the actual template file that generates these category files is index.php, in the Genesis parent folder. get_theme_directory() versus get_stylesheet_directory() if you know what I mean. 😉 You'll want to copy that file from the genesis folder to the modern-portfolio-pro folder, then make your changes.

---

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

[marybaum]

Katy,

1. Say hi to Bill Shafer! We lived next door to each other as kids. 😉

2. Can you point me to the problem images?

Mary Baum

Please feel free to text me at 314.609.7844 - I'll be happy to help you directly, since we're practically meshpukeh.

---

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

[marybaum]

I'm thinking Parallax Pro or Atmosphere might work too - even Modern Portfolio Pro.

In any case you'll need to duplicate the widget areas in front-page.php, but that's not hard - it's a matter of copy and paste, and some more edits to functions.php.

---

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

[Author]

Posts