Grid layout for Thread without addon

kankan · Feb 2, 2024

Hello, how to restrict this display for a specific node only ?
Thanks

Davyc · Feb 2, 2024

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{

kankan · Feb 2, 2024

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{

I would like to set this display for this node : 199 :

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

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 ********/
}

hemant_bhardwaj · Feb 2, 2024

kankan said:

I would like to set this display for this node : 199 :

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

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 ********/
}

You are using wrong clases to overlap the whole css that's doesn't gonaa work

kankan · Feb 2, 2024

hemant_bhardwaj said:
You are using wrong clases to overlap the whole css that's doesn't gonaa work

Which class should i use ?

Thank you

Davyc · Feb 2, 2024

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%;
}
}
}

kankan · Feb 2, 2024

Great this is working

But strange behaviour without images :

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

Anyway to set default image or first attached image ?
Thank you

Davyc · Feb 2, 2024

Have you removed the code? The forum is not showing in grid format. You may need an addon to add an image.

kankan · Feb 2, 2024

Yes i removed it.

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

Mon portable ASUS : maintenance

www.forum-des-portables-asus.fr

but not for this one (it does not take the attachment picture, and i don't know why)

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

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

kankan · Feb 2, 2024

@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>

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>

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

Davyc · Feb 2, 2024

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.

kankan · Feb 2, 2024

Thankl you @Davyc
I did this, but sadly no more chance.
Thanks anyway. I asked @hemant_bhardwaj in private as he developped this addon. Hope to have an answer

Grid layout for Thread without addon

kankan

Well-known member

Davyc

Well-known member

kankan

Well-known member

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

hemant_bhardwaj

Well-known member

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

kankan

Well-known member

Davyc

Well-known member

kankan

Well-known member

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

Davyc

Well-known member

kankan

Well-known member

Mon portable ASUS : maintenance

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

kankan

Well-known member

Davyc

Well-known member

kankan

Well-known member

Similar threads

We value your privacy