Docs

[streitcouncil]

Hi,

Does anyone know how to customize the masonry layout for the ethos stack? Specifically:

1. I’d like the images in the masonry squares to draw on the ones used in the individual blog posts. Right now the squares are blank.
2. Is there a way to add short excerpts to those squares that are only visible when the cursor hovers over them?
3. Longer blog post titles are currently cutoff at the bottom of the squares. Is there a way to add another line to fix this?
4. Can dates of publication be added below the title of each square?

Any help would be appreciated, thanks!

[Rahul]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[streitcouncil]

Thanks for the quick response. It’s blog.streitcouncil.org

[Rupok]

Hi there,

Thanks for the URL.

#1. You need to use “Featured Image” for the post and that will be appear on the thumbnail.

#2 & 4. It’s not usually possible but could be achieved with Child Theme.

#3. You can add this under Custom > CSS in the Customizer.

.h-entry-cover span {
   white-space: normal;
}

Hope this helps.

[streitcouncil]

It does, thanks! One thing I noticed, though, is that the titles in the masonry squares are still cutoff. Is there a way to fix this?

[Lely]

Hi There,

Please use this custom CSS:

.blog .h-entry-cover {

    top: calc(100% - 7em); /*Adjusr 7em as necessary*/
}

Hope this helps.

[streitcouncil]

That works, thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts