Changes to Blog Index Page Ethos

Support
#1

Hello guys!

I’m currently using Ethos Stack for the Blog section of a website and I managed to do somewthing like this:

What I’ve done is write some CSS to change the beckaground color:
> .blog .x-main .hentry {

    background-color: #f2f2f2;
    border-top: none;
}

As you can see the featured image is not filling the entire section and there is no space between the image and the rest of the content. To make things easier to understand the final result I would like to get is like this:

Can you help me?

Thanks for your time

#2

Hi Fabio,

Please try this code in X > Theme Options > CSS:

.blog .x-main .hentry>.entry-featured, .search .x-main .hentry>.entry-featured, .archive .x-main .hentry>.entry-featured {
    float: none;
    width: auto;
    flex: 1;
}

a.entry-thumb {
    padding-bottom: 80%;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.search .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    padding: 69px 40px;
    background-color: #fafafd;
    margin-left: 25px;
    float: none;
    width: auto;
    flex: 2;
}

.entry-wrap .entry-content {
    display: none;
}

.blog .x-main .hentry, .search .x-main .hentry, .archive .x-main .hentry {
    display: flex;
    align-items: center;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps you get started.

Cheers!

#3

Thank you @Jade you are awesome!

I have to ask you something about the code you wrote though:

can I make the entry-wrap (the area with background #fafafd) the same height of the image regardless of the quantity of text inside it?

Thank you for you time!

#4

Hello Fabio,

To have the featured image and the entry wrap equal in height, please have your code updated and use this instead:

.blog .x-main .hentry>.entry-featured, 
.search .x-main .hentry>.entry-featured, 
.archive .x-main .hentry>.entry-featured {
    float: none;
    width: auto;
    max-width: 300px;
    flex: 0 1 100%;
}

a.entry-thumb {
    padding-bottom: 80%;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.search .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    padding: 69px 40px;
    background-color: #fafafd;
    margin-left: 25px;
    float: none;
    width: auto;
    flex: 0 1 100%;
    align-items: flex-start;
}

.entry-wrap .entry-content {
    display: none;
}

.blog .x-main .hentry, 
.search .x-main .hentry, 
archive .x-main .hentry {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
}

Please let us know if this works out for you.

#5

Thank @RueNel we are almost there!

I wouldn’t want to abuse your kindness but there is only one thing missing to reach perfection:

Is it possible to center the text both horizontally and vertically inside the entry-wrap without losing the same height?

Thanks!

P.S.
This is a screenshot of the current setup:

#6

Hello Fabio,

Please have the code updated and use this instead:

.blog .x-main .hentry>.entry-featured, 
.search .x-main .hentry>.entry-featured, 
.archive .x-main .hentry>.entry-featured {
    float: none;
    width: auto;
    max-width: 300px;
    flex: 0 1 100%;
}

a.entry-thumb {
    padding-bottom: 80%;
}

.blog .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.search .x-main .hentry.has-post-thumbnail>.entry-wrap, 
.archive .x-main .hentry.has-post-thumbnail>.entry-wrap {
    background-color: #fafafd;
    margin-left: 25px;
    float: none;
    width: auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex: 1 0 0%;
    display: flex;
}

.entry-wrap .entry-content.excerpt {
    display: none;
}

.blog .x-main .hentry, 
.search .x-main .hentry, 
archive .x-main .hentry {
    display: flex;
    align-items: stretch;
    justify-content: center;
}

The resulting look of the blog index will be:

Hope this helps.

#7

Yes! Wonderfull!

Thank you guys

#8

You’re most welcome, Fabio. :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.