Blog Layout Override - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Blog Layout Override

C

copycat

Helix Framework 2 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.

0
5 Answers
Pavel
Pavel
Accepted Answer
2 years ago #117235

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;
}

0
C
copycat
Accepted Answer
2 years ago #117250

Thanks..

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 years ago #117252

Hi both,

Glad to have a helpful community here:)

Please take my greetings!

0
C
copycat
Accepted Answer
2 years ago #117287

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?

0
Pavel
Pavel
Accepted Answer
2 years ago #117397

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.

0