Article Forum Symmetrical Grid Layout

Paul B · Mar 15, 2021

Brogan 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 248587

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

Read more about this resource...

woody · Mar 15, 2021

Excellent

I'm noting that the first upper-left box in my grid positions the image differently than in all the others...guessing this is due to how Box1 would normally be full-width versus half or quarter width? https://www.rockcrawler.com/forum/forums/vehicle-classifieds.22/

Paul B · Mar 15, 2021

I don't have images on my localhost installation so it likely needs additional CSS to account for that.

I'll take a look later today when I have some time..

Paul B · Mar 15, 2021

@woody I've updated the CSS in the resource - try that.

Lee · Mar 15, 2021

Thank you Brogan, what would be the simplest way to enable this on a per node basis? I was thinking about creating a less template and calling it using a conditional.

Paul B · Mar 15, 2021

I've just updated the code again to make it less verbose.

Paul B · Mar 15, 2021

Lee said:
Thank you Brogan, what would be the simplest way to enable this on a per node basis? I was thinking about creating a less template and calling it using a conditional.

Wrap the code in this:

Less:

[data-container-key="node-88"]
{
    ...
}

Where 88 is the node ID.

Lee · Mar 15, 2021

Thanks for that.

Paul B · Mar 15, 2021

Brogan updated Article Forum Symmetrical Grid Layout with a new update entry:

Code updated

The code has been updated to remove the fade out effect of the content for the first row of articles.

See the main resource for the latest code: https://xenforo.com/community/resources/article-forum-symmetrical-grid-layout.8303/

Read the rest of this update entry...

Wildcat Media · Mar 15, 2021

This is nice!

Are the images only on the first row, or is that only because the articles in your additional rows do not have images?

The fixed footer fixes a common annoyance for me as well.

Paul B · Mar 15, 2021

If the threads have images, they will show.

Wildcat Media · Mar 15, 2021

Looks good! I had a quick second to install it and give it a try and yes, all the images are displaying.

Now I have to get it to work on the third party style properly. Works perfectly on the default XF style, but third party, I have the content width narrower and the bottom margins are bleeding into the tops of the images in the following row, along with the date wrapping onto new lines.

I don't really want to let the page stretch out wider but on the other hand, that might be best. Or I may just do away with the sidebar, as that is forcing things smaller than they need to be.

So I just need a little tweaking here and there, and I think we'll be rockin' this 4-across for Classifieds.

Paul B · Mar 15, 2021

If you can post the URL, I can take a quick look with the inspector to see if it's something simple to resolve.

Wildcat Media · Mar 16, 2021

It's a non-public development forum, but I got rid of the sidebar and that mostly fixed it. I only need to add some space between the footer and the images in the next row, and I think we'll be good.

This seems to be where I can increase the margin--it's working in the inspector. I can add this to extra.less for that particular style.

CSS:

[data-container-key="node-87"] .block.block--articles.block--previews .block-body .message--articlePreview {
    margin-bottom: 20px;
}

Paul B · Mar 16, 2021

You an just edit the original code and add it like so:

Less:

[data-container-key="node-87"] .block.block--articles.block--previews .block-body .message--articlePreview
{
    margin-top: 0;
    margin-bottom: 20px;

    &:nth-of-type(n)
    {
        ...

beerForo · Mar 16, 2021

There was a suggestion to have this layout on page 2 and beyond is that possible? Thanks

Paul B · Mar 16, 2021

This modification will also apply to subsequent pages.

Or did you mean you only want it to apply from page 2 onwards?

Wildcat Media · Mar 16, 2021

Brogan said:
This modification will also apply to subsequent pages.

Or did you mean you only want it to apply from page 2 onwards?

I think he means from page 2 onwards, as I had the same question myself back when we first saw the new layout.

Brogan said:
You an just edit the original code and add it like so:

I considered that.

What I've been doing is using a template modification to insert this code into extra.less, so it affects all styles. Then I can tweak an individual style separately if needed. It's made a world of difference, as I put all of what I call my "common" extra.less edits into template modifications, then wrap them up into an add-on that I can easily transport to the live forum when I do the upgrade.

Paul B · Mar 16, 2021

I've made a suggestion to have the page ID available.

Add data-page-key values to all relevant content types

Having data-page-key available as an attribute such as [data-page-key="page-1"] would be useful for styling purposes. That would make it easy to, for example, style the first page of an article forum separately from the subsequent pages.

xenforo.com

Wildcat Media · Mar 16, 2021

While I'm still here...

From what I understand, then, I can use code like [data-container-key="node-87"] in template modifications for .less documents to affect only the specified node(s)? If so, that would actually solve a couple other issues for me.

Article Forum Symmetrical Grid Layout

XenForo moderator

Well-known member

XenForo moderator

XenForo moderator

Well-known member

XenForo moderator

XenForo moderator

Well-known member

XenForo moderator

Well-known member

XenForo moderator

Well-known member

XenForo moderator

Well-known member

XenForo moderator

Well-known member

XenForo moderator

Well-known member

XenForo moderator

Well-known member

We value your privacy