[Resolved] Standardize or create a "title block"

[coco]

My site is a blog with all the posts on the main page. I’m using the masonry layout and I’ve standardized the featured images by making them all square.

I’d like to know if there is a way to either standardize the size of the area where the title appears below the featured image in order to make it the same size no matter the title’s length?

Or, even better, if I can add (and standardize) a title block that I can customize color-wise and customize according to the “separating space” I’ve selected under Layout>Content Layout>separating space? I’m going to add a sidebar at some point, so I want to be able to change the title area/box size when that happens.

Either way, I’d like the site to format the site somewhat like a grid, but I don’t want just the square images, a la Instagram.

shinybutter.com

Thanks very much,

Coco

[Leo]

Hi Coco,

Maybe I’m missing something here but wouldn’t it be easier to use Columns layout with 3 columns?

Then they would all be the same size and line up regardless the length of the title?

Let me know.

[coco]

Ah, yes, thank you for that ultra-simple solution. I must have migrated to the masonry layout at some point for some reason or another and then gotten stuck.

So is there a way to make title blocks, then? And/or to adjust the title’s padding below the featured image?

Continued thank yous~

Coco

[Leo]

Not quite sure what you meant by title blocks as they are already in a block?

Try this CSS to adjust the margin:

.post-image-above-header .post-image {
    margin-bottom: 10px;
}

Let me know.

[coco]

I’m wondering if I can make the titles of the blog posts in a gray block, say, that sits 7-10 px beneath the featured image.

[Leo]

ok the CSS above place the title 10px under the featured image. You can adjust the number to whatever you like.

Then try this for adding a background color to the title:

.generate-columns-container .entry-header {
    background-color: ##3a3a3a;
    padding: 10px 10px;
}

Let me know.

[coco]

Wonderful!! I think I’m getting there.

How can I make the boxes all the same size?

And how can I pad the post titles within these boxes?

Also, is there a way to move the rows closer together, and remove the ellipses, too?

Again, thank you.

Coco

[Leo]

– I’m not sure if there is a way to make the title boxes all the same size because it depends on a lot of things: text size, title length, the padding we are about to add…Maybe if you can enter a couple blank lines?

– I adjusted the code above to add paddings. The 1st number controls the top/bottom and the 2nd number controls left/right.

– Try this to adjust the line height (default was at 1.2em):

h2.entry-title {
    line-height: 1em;
}

– The ellipses will be removed in the next version when there is no read more text. For now, use this CSS:

.entry-summary {
    display: none;
}

[coco]

You have been really helpful—thank you so much!

I’ll see if I can maneuver the title boxes into a uniform size, because the rows where that occurs look good.

Your quick responses are very much appreciated.

Blessings!

Coco

[Leo]

You’re welcome. If you can show me an example of other sites using a uniform title box I can probably tell you how they did it 🙂

[Author]

Posts