Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Brogan

XenForo moderator
Staff member
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..
 

Lee

Well-known member
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.
 

Brogan

XenForo moderator
Staff member
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.
 

Wildcat Media

Well-known member
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. 👍👍
 

Wildcat Media

Well-known member
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. 👍👍
 

Brogan

XenForo moderator
Staff member
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

Well-known member
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;
}
 

Brogan

XenForo moderator
Staff member
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)
    {
        ...
 

Brogan

XenForo moderator
Staff member
This modification will also apply to subsequent pages.

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

Wildcat Media

Well-known member
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.

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.
 

Wildcat Media

Well-known member
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.
 
Top