Grid layout for Thread without addon

Grid layout for Thread without addon

Overview Updates (2) Reviews (2) Discussion
At the start of the CSS code add:
[data-container-key="node-#"] where # is the id number of the forum node (you can get this using your browsers 'inspect' function).

So, it would look something like this:

Code: 
[data-container-key="node-8"] .structItem-title{
 
Davyc said:
At the start of the CSS code add:
[data-container-key="node-#"] where # is the id number of the forum node (you can get this using your browsers 'inspect' function).

So, it would look something like this:

Code: 
[data-container-key="node-8"] .structItem-title{
Click to expand...
I would like to set this display for this node : 199 :

www.forum-des-portables-asus.fr

L'atelier Asus répare votre matériel : Etudes de cas

Le forum des portables Asus et l'atelier Asus : Etudes de cas : découvrez nos rapports d'intervention
www.forum-des-portables-asus.fr www.forum-des-portables-asus.fr

I set this code, but no effect :

Code: 
[data-container-key="node-199"]  .structItem-title{
/********* Css Grid Code Start ********/
.structItem-title{
    text-overflow: ellipsis !important;
    max-width: 50ch;
    white-space: nowrap;
    overflow: hidden; }
.structItem--thread{
    border-collapse: collapse;
    width: 100%;
    height: auto;
    display: inline-block !important;
    margin: 9px 0px 0px 6px;
    max-width: 49% !important;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); }
.structItem-cell{width:100%;}
@media (max-width: 650px){
.structItem-cell.structItem-cell--meta { display:none; } }
.structItem-cell--meta{
    display: block;
    width: auto !important;
    margin-top: -13px;
    float:left; }
.structItem-cell--latest{
    display: block;
    width: auto !important;
    margin-top: -13px;
    margin-bottom: 15px;
   float:right; }
.structItem-cell--meta > .pairs.pairs--justified>dd {
    float: left; text-align: right;  max-width: 100%; }
.structItem-cell--meta dl.pairs.pairs--justified{  float:left; }
.structItem-cell--latest{ margin-bottom:0px !important; }
@media (max-width: 1125px) {
  .structItem--thread {max-width: calc(95%) !important;   } }
@media (max-width: 650px) {
  .structItem-cell--latest{ margin-top: -20px !important;}
  .structItem--thread {
    display: table !important;
    max-width: 100% !important;
    margin: 5px 5px 5px 0px;
    box-shadow: none;     } }
@media (max-width: 650px){
.structItem-cell.structItem-cell--latest,.structItem-cell--meta { float:right !important;  }}
.structItem-cell--meta dt{ font-size:0px; }
.structItem-cell--meta dd{ margin-left:18px; font-size: 12px; color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
    font-family: FontAwesome;
    font-size: 12px;
    position: absolute;
    margin-left: 0px;
    color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before {content: '\f06e '; }
.structItem-cell--meta dt:before {content: '\f112'; }
.structItem-cell--latest{ margin-top: -34px;}
.structItemContainer-group.js-threadList { margin-bottom: 8px; }
.structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;}
/********* Css Grid Code End ********/
}
 
kankan said:
I would like to set this display for this node : 199 :

www.forum-des-portables-asus.fr

L'atelier Asus répare votre matériel : Etudes de cas

Le forum des portables Asus et l'atelier Asus : Etudes de cas : découvrez nos rapports d'intervention
www.forum-des-portables-asus.fr www.forum-des-portables-asus.fr
I set this code, but no effect :

Code: 
[data-container-key="node-199"]  .structItem-title{
/********* Css Grid Code Start ********/
.structItem-title{
    text-overflow: ellipsis !important;
    max-width: 50ch;
    white-space: nowrap;
    overflow: hidden; }
.structItem--thread{
    border-collapse: collapse;
    width: 100%;
    height: auto;
    display: inline-block !important;
    margin: 9px 0px 0px 6px;
    max-width: 49% !important;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); }
.structItem-cell{width:100%;}
@media (max-width: 650px){
.structItem-cell.structItem-cell--meta { display:none; } }
.structItem-cell--meta{
    display: block;
    width: auto !important;
    margin-top: -13px;
    float:left; }
.structItem-cell--latest{
    display: block;
    width: auto !important;
    margin-top: -13px;
    margin-bottom: 15px;
   float:right; }
.structItem-cell--meta > .pairs.pairs--justified>dd {
    float: left; text-align: right;  max-width: 100%; }
.structItem-cell--meta dl.pairs.pairs--justified{  float:left; }
.structItem-cell--latest{ margin-bottom:0px !important; }
@media (max-width: 1125px) {
  .structItem--thread {max-width: calc(95%) !important;   } }
@media (max-width: 650px) {
  .structItem-cell--latest{ margin-top: -20px !important;}
  .structItem--thread {
    display: table !important;
    max-width: 100% !important;
    margin: 5px 5px 5px 0px;
    box-shadow: none;     } }
@media (max-width: 650px){
.structItem-cell.structItem-cell--latest,.structItem-cell--meta { float:right !important;  }}
.structItem-cell--meta dt{ font-size:0px; }
.structItem-cell--meta dd{ margin-left:18px; font-size: 12px; color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
    font-family: FontAwesome;
    font-size: 12px;
    position: absolute;
    margin-left: 0px;
    color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before {content: '\f06e '; }
.structItem-cell--meta dt:before {content: '\f112'; }
.structItem-cell--latest{ margin-top: -34px;}
.structItemContainer-group.js-threadList { margin-bottom: 8px; }
.structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;}
/********* Css Grid Code End ********/
}
Click to expand...
You are using wrong clases to overlap the whole css that's doesn't gonaa work
 
This is what I use for my movie site and my music site - adapt to suit your own situation; this changes the layout of many forums on my site:
Code: 
/*Change Look of forum listings for movies */
[data-template="snog_movies_forum_view_type_movie"]
{
&[data-container-key="node-2"],
&[data-container-key="node-8"],
&[data-container-key="node-3"],
&[data-container-key="node-4"],
&[data-container-key="node-5"],
&[data-container-key="node-6"],
&[data-container-key="node-7"],
&[data-container-key="node-9"]

{
 .structItem-title {
        font-weight: 600;
    }
        form.structItem.structItem--quickCreate {
    display: none !important;
}
    .structItemContainer-group{
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        padding: 10px;
        grid-gap: 10px;
        gap: 10px;
        
    }

    .structItem {
    flex-direction: column;
    border-width: 1px;
    display: flex;
    align-items: center;
    border-style: solid;
    border-color: #525151;
    border-radius:5px;   
    justify-content: space-between;
}
.structItemContainer>.structItem:first-child, .structItemContainer>.structItemContainer-group:first-child>.structItem:first-child {
    border: none;
}
    .structItem-cell.structItem-cell--movie{
        width: 100%;
    }

    .structItem-cell--main .structItem-minor,
    .structItem-cell--latest,
    .structItem-cell--icon{
    display: none !important;
    }

    .structItem-cell--main{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px !important;
    flex-direction: column-reverse;
    justify-content: flex-end;
    margin-top: -20px;
    padding: 12px !important; // Required for mobile
    margin-bottom: -20px;   
    }

    .structItem-extraInfo{
        margin-top: 10px;
        order: 1;
    }

    .structItem-extraInfo > li:first-child{
        margin-left: 0;
    }
[data-template="forum_view"] .ratingStars {
    margin-bottom: 10px;
}
    .moviePoster {
    width: 100%;
}
}
}
 
Have you removed the code? The forum is not showing in grid format. You may need an addon to add an image.
 
Yes i removed it.

I have setup Grid Layout addon from @hemant_bhardwaj , it is working well for other nodes :

www.forum-des-portables-asus.fr

Mon portable ASUS : maintenance

www.forum-des-portables-asus.fr www.forum-des-portables-asus.fr
but not for this one (it does not take the attachment picture, and i don't know why)
www.forum-des-portables-asus.fr

L'atelier Asus répare votre matériel : Etudes de cas

Le forum des portables Asus et l'atelier Asus : Etudes de cas : découvrez nos rapports d'intervention
www.forum-des-portables-asus.fr www.forum-des-portables-asus.fr
This is why i would like to setup CSS, but it is a bit pain, so i think i will leave the display in line.

Thank you for you help
 
@hemant_bhardwaj

For reason i ignore, for the node which is not displaying the picture, i have this code while inspecting my browser :

<div class="structItem-iconContainer">
<a href="/forums/members/asus-bot.27310/" class="avatar avatar--s" data-user-id="27310" data-xf-init="member-tooltip" id="js-XFUniqueId14">
<img src="/forums/data/avatars/s/27/27310.jpg?1616758586" srcset="/forums/data/avatars/m/27/27310.jpg?1616758586 2x" alt="Asus Bot" class="avatar-u27310-s">
</a>

</div>
Click to expand...
Ex : https://www.forum-des-portables-asus.fr/forums/forums/latelier-asus-etudes-de-cas.199/


For nodes which are working in same place, i have this code : (so images are displayed)

<div class="structItem-iconContainer">
<a href="/forums/threads/a-la-reception-de-votre-portable-asus.20675/">

<img src="/forums/attachments/tpasus_jeremie_p1150990-jpg.14960/" style="height: 190; object-fit: cover;">

</a>

</div>
Click to expand...
Ex : https://www.forum-des-portables-asus.fr/forums/forums/mon-portable-asus-maintenance.150/

If i replace the code in Firefox inspector, all is working fine, but i don't know where to fix this in the XF Template.

Any help would be appreciate. As addon is no more maintained i do not know where to post this, sorry.

Thank you
 
It looks to me that the first image in the second forum is a universal image throughout that forum, whereas in the forum that is working with images, the first image is the attachment. Try removing that image at the top - perhaps locate elsewhere - and make the first image an attachment; hopefully, that will resolve the issue.
 
I love this code BUT - when I have my forum type set to "Articles" and "Review," the cover image is massive. Is there any way to have the article cover image be resized to fit the space? Here is a screenshot of my view. The black items where you can see &Chat are a part fo the first image in the thread.

1768809587213.webp
 
Change 'object-fit cover' to 'object-fit contain' that should force the image to be contained within the container.
 
Davyc said:
Change 'object-fit cover' to 'object-fit contain' that should, force the image to be contained within the container.
Click to expand...
Thanks a lot. This is a great answer. I modified the template style and now it works perfectly for my needs. Thanks again!!

I actually used object-fit scale-down
 
You must log in or register to reply here.

Similar threads

hemant_bhardwaj
[Xenbros] Grid layout for node without addon
2 3 4
Replies
74
Views
7K
AndreaMarucci
AndreaMarucci
hemant_bhardwaj
Grid layout for XFRM without Addon
2
Replies
37
Views
5K
Sirmadsen
Sirmadsen
hemant_bhardwaj
Grid layout for XFRM by Hemant
Replies
6
Views
1K
Robert9
R
erich37
Add-on Grid Layout for Threads
Replies
0
Views
1K
erich37
erich37
Back
Top Bottom