Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

Yes, any of the HTML 5 attributes can be used, for example:
Less:
[data-logged-in="false"]

[data-logged-in="true"]

[data-template*="name"]

[data-template="template_name"]

[data-type="type"]

[data-container-key="node-ID"]

[data-content-key="thread-ID"]


They can be further refined by joining attributes without a comma:
Less:
[data-template="template_name"][data-type="type"]


Or made to apply to multiple attributes with a comma:
Less:
[data-container-key="node-ID"],
[data-content-key="thread-ID"],
[data-type="type"]
Verry helpful @Brogan.
Is that also possible with categorie id?
 
You can only use what is shown in the <html> tag for the current forum and thread. If I open the browser inspector right now for this thread, here's what I see:

HTML:
<html id="XF" lang="en-US" dir="LTR" data-app="public" 
data-template="xfrm_thread_view_type_resource" data-container-key="node-94" 
data-content-key="thread-192499" data-logged-in="true" data-cookie-prefix="xf_" 
data-csrf="1616078441,d0c413691c96409dd4e7237d6412c0b9" 
class="has-js template-xfrm_thread_view_type_resource has-no-touchevents has-passiveeventlisteners has-no-hiddenscroll has-os-windows has-browser-chrome has-pointer-nav">

These three are helpful:

data-container-key="node-94"
data-content-key="thread-192499"
data-logged-in="true"

Otherwise, CSS won't know what to do if you try to enter anything else.
 
I'm using Safari. I'll check with Firefox.
I get the same with safari.

Workaround:

Code:
 &-content
                {
                    margin-bottom: 0px;
                }

It's not ideal, some of the fixed footers still have extra height and you'll get a bigger gap underneath some of the previews, but at least this stops the View full article from overlapping the text in safari
 
Last edited:
That's a function of the core code - this customisation doesn't affect how that works.

You can change it by overriding the default behaviour in extra.less.
 
Not sure though what specific CSS I can use or change from this :|.
Code:
.message--articlePreview .articlePreview-image {
    background: center/cover #edf4fa no-repeat;
}
 
It's going to require various changes to the background property, container height, etc.

You can post in the styling forum for help.
 
  • Like
Reactions: rdn
It's not ideal, some of the fixed footers still have extra height and you'll get a bigger gap underneath some of the previews, but at least this stops the View full article from overlapping the text in safari
That fixed the problem of overlapping text for me on my iPad. Thanks!
 
That fixed the problem of overlapping text for me on my iPad. Thanks!
I have decided to not use this even though I like the 4 up format. If you have a sticky thread for the forum (and I do) the count of articles for the first page is off because the sticky thread is not counted. For example, it is 4-across for 20 threads with no sticky thread, but 21 threads if you have one sticky thread, so the last row on the first page is just one post, which I think makes people think there are no following pages.
 
I have decided to not use this even though I like the 4 up format. If you have a sticky thread for the forum (and I do) the count of articles for the first page is off because the sticky thread is not counted. For example, it is 4-across for 20 threads with no sticky thread, but 21 threads if you have one sticky thread, so the last row on the first page is just one post, which I think makes people think there are no following pages.

AdminCP -> Forums -> Nodes -> Select your Article Node, and increase or decrease Override articles per page setting. In your case, either decrease this by one, or increase this by three, :)
 
AdminCP -> Forums -> Nodes -> Select your Article Node, and increase or decrease Override articles per page setting. In your case, either decrease this by one, or increase this by three, :)
I tried this trick, but each time I has or last row with one post on first page or on second and all next pages
 
That's a function of the XF software - nothing to do with this modification.

Sticky threads are not counted towards the number of threads shown per page.

The same thing would happen on this site if any of the threads in the HYS forum were stuck.

Page 1
1616615979184.webp

Page 2
1616616016541.webp
 
Noticed that image height of the fifth article (first one in the second row) is different than the others?
 
I'm using "Equal Grid - Fixed Footer"

I have a sticky article in the forum and it displays in the grid as expected. What I would like is for the sticky article to be full across the top of the grid, and the regular articles in the grid.
 
Top Bottom