Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Overview Updates (5) Reviews (4) Discussion
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..
 
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.
 
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.
Click to expand...
Wrap the code in this:
Less: 
[data-container-key="node-88"]
{
    ...
}

Where 88 is the node ID.
 
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. 👍👍
 
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. 👍👍
 
If you can post the URL, I can take a quick look with the inspector to see if it's something simple to resolve.
 
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;
}
 
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)
    {
        ...
 
This modification will also apply to subsequent pages.

Or did you mean you only want it to apply from page 2 onwards?
 
Brogan said:
This modification will also apply to subsequent pages.

Or did you mean you only want it to apply from page 2 onwards?
Click to expand...
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:
Click to expand...
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.
 
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.
 
You must log in or register to reply here.
Back
Top Bottom