[Resolved] Can I create a featured post grid layout?

[Tim]

On the homepage of anabolicfacts.com, I like the featured posts grid layout. It’s 4 recent posts in a nicely spaced apart grid like layout. Is it possible to achieve something like this with Generate Press? I just bought Premium last night and hoping it can help.

[bluebit]

I took a screenshot of my website with the layout before adding generatepress: [img]http://i.imgur.com/HzHhVK6.jpg[/img]

[Tom]

Hi there,

I’ve had a few other users request something like this.

I may be able to swing something using the Masonry layout – let me play with this a bit tomorrow 🙂

[bluebit]

Awesome, can’t wait to see what you come up with. I was using this theme before: http://themeforest.net/item/oldpaper-ultimate-magazine-blog-theme/7431822

You can see the live preview of the layout.

[Tom]

This may be a good starting point using masonry:

.masonry-post .inside-article {
	min-height: 150px;
	position: relative;
	overflow: hidden;
}
.masonry-post .entry-header {
	bottom: 0;
	right: 0;
	z-index:10;
	position: absolute;
	padding: 30px;
}
.masonry-post .post-image img {
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}
.masonry-post .entry-content,
.masonry-post .entry-summary,
.masonry-post footer.entry-meta {
	display: none;
}

Will definitely need some adjusting..

If you have issues with the image stretching, try to replace the .post-image img block with this:

.masonry-post .post-image img {
    height: 100vh;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100vw;
}

[bluebit]

Quick question: Why is the “Home” button always highlighted on my site: http://anabolicfacts.com when I go to other pages, it’s always highlighted. How do I fix this?

[Tom]

Hmm, that’s something you may need to ask the Ubermenu developers – looks like it has something to do with their code.

[Timon]

Where do I post this code?

[Tom]

This should help: http://generatepress.com/knowledgebase/adding-css/

[bluebit]

I just installed Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/

Posted the code inside, hit update. Nothing happened.

What do I do now?

[img]http://i.imgur.com/zZQxQiZh.png[/img]

[Tom]

Is your blog set to masonry?

[bluebit]

Thanks, now I set it to Masonry, take a look: anabolicfacts.com

Images appeared to be streched, so I added the anti-strech code that you gave me, now they appear really big Lol 🙂

How to disable the right sidebar on the homepage and turn the text white? Make it look as close as possible to the image below:

By the way Masonry looks awesome!!! Maybe you can add some of this code the next update, make it possible for people to change the text color inside of Masonry, the sizes of each box, stuff like that, so people can customize the look. I’d be happy to pay for an add-on like this.

[Tom]

The Colors add-on allows you to the blog post title color and meta color in “Customize > Colors > Content Colors” – that’s your easiest bet.

Let me know 🙂

[bluebit]

I changed the Blog Post Title Color to White on the homepage. I’m glad this option is only for the homepage.

I tried changing the “Entry Meta Text” and “Entry Meta Links” to White, but found that this option also turn the meta text and links white on the blog posts. So, this option wasn’t useful.

But take a look, it’s starting to look better already: http://anabolicfacts.com

Would be great to have options in “Customize > Colors > Content Colors” to change the “Blog Post Title” font size/style/bold.

[bluebit]

How do I decrease the space in here: [img]http://i.imgur.com/2oMIG1j.png[/img]

I want the image to hug the title.

[Author]

Posts