Change blog design

[Héctor]

Hi,

First of all congratulations for your great theme and plugins.

I’ve been checking the forum to find a solution for what I’m trying to do without success, so maybe you can help me.

On the blog main page I want to display only the title and category on the image, the image covering the whole cell and the featured post’s font a bit bigger.

Something like this: https://imgur.com/a/rsZUbLo

Thanks in advance.

[Tom]

Hi there,

You can do something like this:

.blog .post-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 0;
}

.blog .inside-article {
    position: relative;
    overflow: hidden;
}

.blog .inside-article > *:not(.post-image) {
    position: relative;
    z-index: 10;
}

.blog .post-image:after {
    content: "";
    background: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.blog .entry-title a,
.blog .entry-title a:visited,
.blog .entry-meta,
.blog .entry-meta a {
    color: #fff;
}

You’ll just need to make sure the featured images are big enough to fill their containers.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Héctor]

Thanks! 🙂

[Tom]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts