ChrisTERiS
Well-known member
I've found 4 very useful articles for Articles layout but none on how to set the grid to show always 2 articles per row in all pages.
Is it possible?
Thank you
Chris
Is it possible?
Thank you
Chris
XF 2.2 Articles Layout
- Thread starter ChrisTERiS
- Start date
ChrisTERiS
Well-known member
Don't know if I've permission to post it as the solution given to me to his site, but in any way, full credit goes to @BassMan
Add the code below to extra.less template
Code:
.p-body-main:not(.p-body-main--withSidebar) .block--previews .block-body {
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a" "b_1 b_2" "b_3 b_4";
}
@media (min-width: @xf-responsiveMedium)
{
@__ctaArticleFooter: 40px;
.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;
&:nth-of-type(n)
{
grid-area: unset;
& .articlePreview
{
&-main
{
flex-direction: column;
min-height: 100%;
padding-bottom: @__ctaArticleFooter;
}
&-image
{
width: 100%;
}
&-title
{
font-size: @xf-fontSizeLarger;
}
&-content
{
margin-bottom: -@__ctaArticleFooter;
}
&-footer
{
position: relative;
bottom: @__ctaArticleFooter;
}
&-meta
{
border-top: solid 1px @xf-borderColor;
& .articlePreview-by
{
display: none;
}
}
}
}
}
}
.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
background: none;
}If you want to show 3 Articles per row instead of 2, then change:
Code:
grid-template-columns: repeat(2, 1fr);
Code:
grid-template-columns: repeat(3, 1fr);Once again the solution given by @BassMan
D
Deleted member 241496
Guest
Thank you @ChrisTERiS. I placed that code and tried in Chrome and Firefox, but neither is changing from the 4 column layout.
ChrisTERiS
Well-known member
For me it works. The node is just Articles and what I wanted is to have all pages showing 3 articles per row:
Only the widget need different code which works fine as grid, but the article does not appears well as it includes all the text.
ChrisTERiS
Well-known member
...hmmmm,.... I wonder what I wroteFull credit?
...... "Full credit" does not means "The congratulation..... thank you .... etc goes to BassMan and not to me"? 
I was alluding to the fact that the original resource is mine.
xenforo.com
Bassman has just modified it to change the number of articles per row.
Article Forum Symmetrical Grid Layout
In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so: This can be changed by adding some custom CSS to the extra.less template. Equal Grid -...
xenforo.com
Bassman has just modified it to change the number of articles per row.
D
Deleted member 241496
Guest
Checked yours out and yes it does work on yours. Does it matter that it's not our homepage? It's just an articles thread that we are trying to have it laid out that way. If you can check out our page and see maybe how it displays for you?
ChrisTERiS
Well-known member
...ahaaaa......... Now I got it ........... By the way I've read all your articles before. Actually when I wrote "I've found 4 very useful articles for Articles" I was meaning your Articles. But to post my question means that none was doing this........ Sorry if I overpass something in your Articles.I was alluding to the fact that the original resource is mine.
Article Forum Symmetrical Grid Layout
In the default style, an article forum in preview mode has a layout of 1:2:2:4:4 in terms of the number of threads (articles) shown on each row, like so: This can be changed by adding some custom CSS to the extra.less template. Equal Grid -...
Bassman has just modified it to change the number of articles per row.
ChrisTERiS
Well-known member
Is this a XFRM page and you placed it like a widget?Checked yours out and yes it does work on yours. Does it matter that it's not our homepage? It's just an articles thread that we are trying to have it laid out that way. If you can check out our page and see maybe how it displays for you?
D
Deleted member 241496
Guest
It is an article node displayed as "preview." Something I did notice is on my big monitor it shows up as 4 in the row regardless of which code I place in the extra.less template. However, if i shrink the browser size, it displays responsively as 2, again regardless if i put 2, 3, etc. in the code.
ChrisTERiS
Well-known member
This page is Article node and works with 2 and/or 3 articles per row without sidebar. Have tested it. Don't know how it appears with 4 per row or with sidebar.
My knowledge is limited here. Also the widgets show one per row. With some help I was able to show 3 per row but is not responsive. Meaning that even with mobile view show 3 per row.
My knowledge is limited here. Also the widgets show one per row. With some help I was able to show 3 per row but is not responsive. Meaning that even with mobile view show 3 per row.
D
Deleted member 241496
Guest
And your page is also using the "preview" mode, rather than extended or standard??
ChrisTERiS
Well-known member
This page use Preview (Article Node)
This page below is Node Page and use Widget Expanded as there is no Preview option. Also there is no option to cut off the text and the full article appear. Very strange for widget.
If I understood well in your page you've set to show 4 articles per row? Are you sure that you've so many articles for that place? .....Just in case.... Sometimes we waste hours of hours for something that we forgot to check.
This page below is Node Page and use Widget Expanded as there is no Preview option. Also there is no option to cut off the text and the full article appear. Very strange for widget.
If I understood well in your page you've set to show 4 articles per row? Are you sure that you've so many articles for that place? .....Just in case.... Sometimes we waste hours of hours for something that we forgot to check.
D
Deleted member 241496
Guest
I placed the code you gave to display 2 across per row but it continuously keeps doing it as 4 which is too skinny for us. It is very frustrating that we can't figure this out. Our site just got up on Saturday evening so we are limited on content right now.
ChrisTERiS
Well-known member
To make things clear. eg you've set that piece of code to show 4 articles per row. If you've only 2 articles what you're seeing is correct as (if I understood well seeing the code) it splits the row in 4 parts. So by having 2 articles it fills the 1st and 2nd block letting 3nd and 4th empty.
If this is true, I suggest you to start by showing 2 articles per row and change the value to 4 later.
If this is true, I suggest you to start by showing 2 articles per row and change the value to 4 later.
D
Deleted member 241496
Guest
This is the code I placed into the extra.less template:
Code:
.p-body-main:not(.p-body-main--withSidebar) .block--previews .block-body {
grid-template-columns: repeat(2, 1fr);
grid-template-areas: "a a" "b_1 b_2" "b_3 b_4";
}
@media (min-width: @xf-responsiveMedium)
{
@__ctaArticleFooter: 40px;
.block.block--articles.block--previews .block-body .message--articlePreview
{
margin-top: 0;
&:nth-of-type(n)
{
grid-area: unset;
& .articlePreview
{
&-main
{
flex-direction: column;
min-height: 100%;
padding-bottom: @__ctaArticleFooter;
}
&-image
{
width: 100%;
}
&-title
{
font-size: @xf-fontSizeLarger;
}
&-content
{
margin-bottom: -@__ctaArticleFooter;
}
&-footer
{
position: relative;
bottom: @__ctaArticleFooter;
}
&-meta
{
border-top: solid 1px @xf-borderColor;
& .articlePreview-by
{
display: none;
}
}
}
}
}
}
.message--articlePreview .articlePreview-image+.articlePreview-text .bbWrapper:after
{
background: none;
}ChrisTERiS
Well-known member
Something may conflict in your site. I replaced my code with your code above and works fine:
The only difference in my site is that I don't have sidebar.
The only difference in my site is that I don't have sidebar.
Similar threads
- Question
- Question
- Question
