Article Forum Symmetrical Grid Layout

Subject Information

Category Name XenForo 2.x Tips and Guides
TOPIC TITLE Article Forum Symmetrical Grid Layout
Thread starter AnimeHaxor
Start date
Replies
Views
First message reaction score
LAST MESSAGE BY AnimeHaxor

AnimeHaxor

Retro-NulledTeam
Staff member
Administrator
Moderator
Registered
Local time
4:58 AM
Joined
Nov 22, 2015
Messages
6,397
Reaction score
42,549
Points
113
Website
www.nullscripts.net
Site Script
XenForo
AnimeHaxor submitted a new resource:

Article Forum Symmetrical Grid Layout - Evolver

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:View attachment 32313


This can be changed by adding some custom CSS to the extra.less template.

Equal Grid - Floating Footer​

Adding this code will produce a uniform grid layout with the footer at the default location, floating below the content in each article...

Read more about this resource...
 

AnimeHaxor

Retro-NulledTeam
Staff member
Administrator
Moderator
Registered
Local time
4:58 AM
Joined
Nov 22, 2015
Messages
6,397
Reaction score
42,549
Points
113
Website
www.nullscripts.net
Site Script
XenForo

AnimeHaxor

Retro-NulledTeam
Staff member
Administrator
Moderator
Registered
Local time
4:58 AM
Joined
Nov 22, 2015
Messages
6,397
Reaction score
42,549
Points
113
Website
www.nullscripts.net
Site Script
XenForo
AnimeHaxor updated Article Forum Symmetrical Grid Layout with a new update entry:

Changing the layout from page 2 onwards

It isn't possible to target specific pages in less templates, so a different approach is required.

Move the code to a custom template (just create one) - in this case I have called it ctaArticleGridLayout.less.

Then edit the forum_view_type_article template like so:
Less:
<xf:if is="$page > 1">
    <xf:css src="ctaArticleGridLayout.less" />
</xf:if>
View attachment 32318


The result is the first page appears as the default style...

Read the rest of this update entry...
 

AnimeHaxor

Retro-NulledTeam
Staff member
Administrator
Moderator
Registered
Local time
4:58 AM
Joined
Nov 22, 2015
Messages
6,397
Reaction score
42,549
Points
113
Website
www.nullscripts.net
Site Script
XenForo

AnimeHaxor

Retro-NulledTeam
Staff member
Administrator
Moderator
Registered
Local time
4:58 AM
Joined
Nov 22, 2015
Messages
6,397
Reaction score
42,549
Points
113
Website
www.nullscripts.net
Site Script
XenForo
AnimeHaxor updated Article Forum Symmetrical Grid Layout with a new update entry:

Setting a default image

For threads without images, it is possible to configure those to use a default image.

Edit the post_article_macros template.

Look for:
HTML:
<xf:if is="$thread.cover_image">
    <a href="{$linkUnread}" class="articlePreview-image" style="background-image: url('{$thread.cover_image}')" aria-hidden="true" tabindex="-1">&nbsp;</a>
</xf:if>

Replace with:
HTML:
<xf:if is="$thread.cover_image">
    <a href="{$linkUnread}" class="articlePreview-image"...

Read the rest of this update entry...
 

AnimeHaxor

Retro-NulledTeam
Staff member
Administrator
Moderator
Registered
Local time
4:58 AM
Joined
Nov 22, 2015
Messages
6,397
Reaction score
42,549
Points
113
Website
www.nullscripts.net
Site Script
XenForo
AnimeHaxor updated Article Forum Symmetrical Grid Layout with a new update entry:

Configuring the layout for 2 or 3 articles per row

This modification is courtesy of @BassMan

The core code is the same as for the Equal Grid - Fixed Footer layout in the main resource: Article Forum Symmetrical Grid Layout

Add the following code before it:
Less:
.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"...

Read the rest of this update entry...