Article Forum Symmetrical Grid Layout

Article Forum Symmetrical Grid Layout

kelle67

Active member
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?
 

Wildcat Media

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

Mr Lucky

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

Brogan

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

rdn

Well-known member
Not sure though what specific CSS I can use or change from this :|.
Code:
.message--articlePreview .articlePreview-image {
    background: center/cover #edf4fa no-repeat;
}
 

Brogan

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

PaulineK

Member
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!
 

PaulineK

Member
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.
 

Lawrence

Well-known member
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, :)
 

zonzon

Member
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
 

Brogan

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

Page 2
1616616016541.png
 

ivp

Active member
Noticed that image height of the fifth article (first one in the second row) is different than the others?
 

Ozzy47

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