[Resolved] Customize blog page

[Iva]

Hi,

I’m trying to customize the blog page using GP, though I’m a bit lost as to how this can be achieved.

The feel I’m going for is like on http://www.ntcrussia.com/blog/.

Though with some changes – the link button would not exist (clicking on the featured image, title or read more would take the user to the post), the container height and width should be fixed, there would be a 20 word excerpt.

Could you point me in the right direction of solving this?

[Leo]

Hi there,

Hmm should all doable within the customizer: https://docs.generatepress.com/article/blog-content-layout/#archives

Set the Content type to Excerpt, excerpt word count to 20, then remove the read more label.

[Iva]

I’m not sure we’re looking at the same thing here.

I have used the customizer, set the excerpt word count, wrote the read more label and removed info like author etc. Now what’s left is making the posts same height and colorful like in the link I wrote previously (NTC Russia Blog.

[Leo]

Hmm the example you linked aren’t the same height:
http://www.screencast.com/t/K4Q5lS8SbAae

You can see when the title is long/in 2 lines the container is larger.

The containers from GP are actually equal height already as you can see here:
http://www.screencast.com/t/KRVj8RqWAWjh

We can move the excerpt to the bottom but then there would be a big gap between the title and excerpt so I don’t think that will look good.

As for the colors, you would have to apply them manually using CSS for each individual post, here is the example for the first one:

.blog .post-244 .inside-article {
    background-color: #333;
}

[Iva]

Hi,

I’m aware the example I linked has posts of non-equal height, this is why I wrote – though with some changes.

You can see the current result on the page.

Is there a way for these colors and css I do on the posts only be applied to the Blog page, not when actually viewing the post itself?

I’m now just struggling making the text color different (doesn’t work in though CSS) but I’d rather not change it from the customizer, as that would set the color site-wide.

Also, is there a way to move the excerpt one line down, so that posts with a short title in one line are in line with the longer two liners?

Thank you for providing this assistance, it means a great deal.

[Leo]

Using the .blog selector would target the main blog page only – I’ve edited the CSS above.

As excerpt text color, it would be:

.post-241 .entry-summary {
    color: #fff;
}

To push the excerpt down, you’d have to do them individually again like the code below:

.post-241 .entry-summary {
    margin-top: 3em;
}

[Iva]

Hi,

The entry summary color bit works.

I’m still unable to change the entry title color, using the following CSS doesn’t change anything:

.blog .entry-title{
	color: #fff !important;
}

[Leo]

If you want to change them globally, then try Customizer > Colors > Content > Blog Post Title.

[Iva]

Works now, thank you.

[Leo]

No problem 🙂

[Author]

Posts