Blog layout override - Forum | JoomShaper
Solved Helix Framework

Blog layout override

Asked by copycat 3 years ago Last activity 3 years ago

HI,

Please tell me which file i need to edit to change how my article is rendering in Category Blog view?

I want to have this order: Article title, intro image (left), intro text and read more on the right.

Accepted answer

Marked as the solution
Pavel
3 years ago · edited

Hi. Override is not required for this. Only CSS is enough.

Here is example

.article-list .article .article-intro-image, 
.article-list .article .article-featured-video, 
.article-list .article .article-featured-audio, 
.article-list .article .article-feature-gallery {
    margin: 0;
}
.article-list .article-body {
    display: contents;
}
.article-list .article {
    display: grid;
    grid-template-columns: .5fr 1fr;
    gap: 0 20px;
}
.article-list .article > a, 
.article-featured-audio, 
.article-featured-video, 
.article-feature-gallery {
    grid-row: 2/6;
}
.article-header {
    grid-row: 1/2;
    grid-column: 1/-1;
}
.readmore {
    grid-row: 5/6;
    justify-self: end;
}

4 more replies

copycat Asked this

Thanks..

Rashida Rahman Staff

Hi both,

Glad to have a helpful community here:)

Please take my greetings!

copycat Asked this

Hello,

I click on Thanks too fast.

This override is working, but only if each article have thumbnail. Article without images are now stuck in 50% width.

What to change so that articles without image expand top 100% in width?

Pavel

Hi. Then only the php override with the addition of your own HTML structure and additional CSS coding. Read Helix documentation about override system for overriding the layouts coming from the box.

Log in to reply.