How to make node grid view?

[jommytonny888]

This code works, but its for all forum ., how to add node in this code

/********* Css Grid Code Start ********/ .structItem-title { .m-overflowEllipsis(); overflow: hidden; max-width: 50ch; } .structItem--thread { border-collapse: collapse; width: 100%; height: auto; display: inline-block; margin: 9px 0px 0px 6px; max-width: 49%; 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%; &.structItem-cell--latest { display: block; width: auto; margin-top: -34px; margin-bottom: 0; float: right; } &.structItem-cell--icon.structItem-cell--iconEnd { display: none; } } .structItem-cell--meta { .structItem--thread & { display: block; width: auto; margin-top: -13px; float: left; } .pairs.pairs--justified { float: left; > dd { float: left; } } dt { font-size: 0px; .m-faBefore(@fa-var-reply); } dd { margin-left: 18px; font-size: 12px; color: #ababab; } .structItem-minor dt:before, dt:before { .m-faBase(); font-size: 12px; position: absolute; margin-left: 0px; color: #ababab; } .structItem-minor dt { .m-faBefore(@fa-var-eye); } } .structItemContainer-group.js-threadList { margin-bottom: 8px; } .structItem-cell--main .structItem-extraInfo { float: left; margin-left: -8px; } @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; } .structItem-cell.structItem-cell--latest, .structItem-cell--meta { float: right !important; } .structItem-cell.structItem-cell--meta { display: none; } } /********* Css Grid Code End ********/

 

[BattleKing]

This code works, but its for all forum ., how to add node in this code

/********* Css Grid Code Start ********/
.structItem-title {
.m-overflowEllipsis();
overflow: hidden;
max-width: 50ch;
}

.structItem--thread {
border-collapse: collapse;
width: 100%;
height: auto;
display: inline-block;
margin: 9px 0px 0px 6px;
max-width: 49%;
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%;

&.structItem-cell--latest {
display: block;
width: auto;
margin-top: -34px;
margin-bottom: 0;
float: right;
}

&.structItem-cell--icon.structItem-cell--iconEnd {
display: none;
}
}

.structItem-cell--meta {

.structItem--thread & {
display: block;
width: auto;
margin-top: -13px;
float: left;
}

.pairs.pairs--justified {
float: left;

> dd {
float: left;
}
}

dt {
font-size: 0px;
.m-faBefore(@fa-var-reply);
}

dd {
margin-left: 18px;
font-size: 12px;
color: #ababab;
}

.structItem-minor dt:before,
dt:before {
.m-faBase();
font-size: 12px;
position: absolute;
margin-left: 0px;
color: #ababab;
}

.structItem-minor dt {
.m-faBefore(@fa-var-eye);
}
}

.structItemContainer-group.js-threadList {
margin-bottom: 8px;
}

.structItem-cell--main .structItem-extraInfo {
float: left;
margin-left: -8px;
}

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

.structItem-cell.structItem-cell--latest,
.structItem-cell--meta {
float: right !important;
}

.structItem-cell.structItem-cell--meta {
display: none;
}
}
/********* Css Grid Code End ********/

jommytonny888Then fake a picture to demonstrate how it has to look like

 

[one_finger_man]

No im not saying anything, I just ask how to add node, code is working but in this code there is no node select like in short code. your code is very good.

jommytonny888those are the only codes that are shard around the net on xenforo tutorials if you dont like the codes than download the add-on

 

[jommytonny888]

This is how short code homepage looks like lol. broken.

jommytonny888And how should it looks like, take an image tool and cut and paste the section in to the direction you want and show us.
Do not delete all the text just blur it, it is better to understand then

 

[BattleKing]

This is how short code homepage looks like lol. broken.

jommytonny888And how should it looks like, take an image tool and cut and paste the section in to the direction you want and show us.
Do not delete all the text just blur it, it is better to understand then

 

[jommytonny888]

And how should it looks like, take an image tool and cut and paste the section in to the direction you want and show us.
Do not delete all the text just blur it, it is better to understand then

BattleKingYour code is working perfect , the long code you give, but how to add "Node-13" in the code?

 

[jommytonny888]

@BattleKing
How to add node number in your code? Its working good but there is no node select.

 

[one_finger_man]

@BattleKing
How to add node number in your code? Its working good but there is no node select.

jommytonny888do you have most of tham as sub forums cause it wont show and you need to set your Node/forum list in your theme

 

[jommytonny888]

I added this in front - [data-container-key="node-13"] - did not work to make just node 13

 

[one_finger_man]

I added this in front - [data-container-key="node-13"] - did not work to make just node 13

jommytonny888you want it like this

 

[jommytonny888]

you want it like this

View attachment 30684

one_finger_manNo, threads like this. Big code make it , everything is working, just there is no node select so I can select nodes i want to have grid and other remain same. All forum threads are like this.

 

[one_finger_man]

No, threads like this. Big code make it , everything is working, just there is no node select so I can select nodes i want to have grid and other remain same. All forum threads are like this.

jommytonny888i eddit the codes to work for each category try this

change what ya want if this dont work than im done do it ya self

.block--category1, .block--category10, .block--category17{

.block--category1, .block--category10, .block--category17{
@media (min-width: 1100px){
 @supports(display: grid){
    .block-body{display:grid;
  grid-template-columns:50% 50%;
}
.node-body{
  display:flex;
  flex-wrap: wrap;
  border-right: 1px solid #dedede;
  position:relative;
  height: 100%;
  padding:5px;
}
.node-icon{width:12%; padding-top:5px;}
.node-main{width:87%;}
.node-stats{width:110px;}
.node-extra{
  position:absolute;
  right:0px;
  bottom:0px;
  padding: 10px 10px 13px 0px;
}
  }}
}

 

[jommytonny888]

i eddit the codes to work for each category try this

change what ya want if this dont work than im done do it ya self

.block--category1, .block--category10, .block--category17{

.block--category1, .block--category10, .block--category17{
@media (min-width: 1100px){
 @supports(display: grid){
    .block-body{display:grid;
  grid-template-columns:50% 50%;
}
.node-body{
  display:flex;
  flex-wrap: wrap;
  border-right: 1px solid #dedede;
  position:relative;
  height: 100%;
  padding:5px;
}
.node-icon{width:12%; padding-top:5px;}
.node-main{width:87%;}
.node-stats{width:110px;}
.node-extra{
  position:absolute;
  right:0px;
  bottom:0px;
  padding: 10px 10px 13px 0px;
}
  }}
}

one_finger_manThis code only works for me.

/********* Css Grid Code Start ********/
.structItem-title {
.m-overflowEllipsis();
overflow: hidden;
max-width: 50ch;
}

.structItem--thread {
border-collapse: collapse;
width: 100%;
height: auto;
display: inline-block;
margin: 9px 0px 0px 6px;
max-width: 49%;
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%;

&.structItem-cell--latest {
display: block;
width: auto;
margin-top: -34px;
margin-bottom: 0;
float: right;
}

&.structItem-cell--icon.structItem-cell--iconEnd {
display: none;
}
}

.structItem-cell--meta {

.structItem--thread & {
display: block;
width: auto;
margin-top: -13px;
float: left;
}

.pairs.pairs--justified {
float: left;

> dd {
float: left;
}
}

dt {
font-size: 0px;
.m-faBefore(@fa-var-reply);
}

dd {
margin-left: 18px;
font-size: 12px;
color: #ababab;
}

.structItem-minor dt:before,
dt:before {
.m-faBase();
font-size: 12px;
position: absolute;
margin-left: 0px;
color: #ababab;
}

.structItem-minor dt {
.m-faBefore(@fa-var-eye);
}
}

.structItemContainer-group.js-threadList {
margin-bottom: 8px;
}

.structItem-cell--main .structItem-extraInfo {
float: left;
margin-left: -8px;
}

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

.structItem-cell.structItem-cell--latest,
.structItem-cell--meta {
float: right !important;
}

.structItem-cell.structItem-cell--meta {
display: none;
}
}
/********* Css Grid Code End ********/

 

[one_finger_man]

This code only works for me.

jommytonny888dose the other codes i give you breaks your community if so than its conflicting with a codes in your extra less

 

[BattleKing]

dose the other codes i give you breaks your community if so than its conflicting with a codes in your extra less

one_finger_manI guess he would like to get something like this:

or like this for three sections, see red marks:

 

[BattleKing]

dose the other codes i give you breaks your community if so than its conflicting with a codes in your extra less

one_finger_man

.block--category12,.block--category6,.block--category1{
    @media (min-width: 1100px){
     @supports(display: grid){
        .block-body{display:grid;
      grid-template-columns:50% 50%;
        }
        .node-body{
          display:flex;
          flex-wrap: wrap;
          border-right: 1px solid #dedede;
          position:relative;
          height: 100%;
          padding:5px;
        }
        .node-icon{width:12%; padding-top:5px;}
        .node-main{width:87%;}
        .node-stats{width:110px;}
        .node-extra{
          position:absolute;
          right:0px;
          bottom:0px;
          padding: 10px 10px 13px 0px;
        }
      }
    }
}

12 6 and 1 are the block ids which can be received by hovering over the entry

 

[BattleKing]

.block--category12,.block--category6,.block--category1{
    @media (min-width: 1100px){
     @supports(display: grid){
        .block-body{display:grid;
      grid-template-columns:50% 50%;
        }
        .node-body{
          display:flex;
          flex-wrap: wrap;
          border-right: 1px solid #dedede;
          position:relative;
          height: 100%;
          padding:5px;
        }
        .node-icon{width:12%; padding-top:5px;}
        .node-main{width:87%;}
        .node-stats{width:110px;}
        .node-extra{
          position:absolute;
          right:0px;
          bottom:0px;
          padding: 10px 10px 13px 0px;
        }
      }
    }
}

12 6 and 1 are the block ids which can be received by hovering over the entry

BattleKing@jommytonny888 any news on that, any feedback

 

[one_finger_man]

i gave him the codes for this but it seems to me thats not how he wants it! so he can play with the codes that i gave him

 

[jommytonny888]

i gave him the codes for this but it seems to me thats not how he wants it! so he can play with the codes that i gave him

one_finger_manbro I told you 5 times, the code you give me did not work, the long code that battleing give only worked for me. But it does not have node selection.

 

[one_finger_man]

bro I told you 5 times, the code you give me did not work, the long code that battleing give only worked for me. But it does not have node selection.

jommytonny888than ether you dont know what ya doing or your xenfor is out dated or there is an issue with the code that is conflicting with some coding, you you are asking how to put the forums in grid view and this is the only way that you can do this with out add-0n....and if you want your topic to show only on the home page than you will need to change that




try this one

.block--category2,{
    @media (min-width: 1100px){
     @supports(display: grid){
        .block-body{display:grid;
      grid-template-columns:50% 50%;
        }
        .node-body{
          display:flex;
          flex-wrap: wrap;
          border-right: 1px solid #dedede;
          position:relative;
          height: 100%;
          padding:5px;
        }
        .node-icon{width:12%; padding-top:5px;}
        .node-main{width:87%;}
        .node-stats{width:110px;}
        .node-extra{
          position:absolute;
          right:0px;
          bottom:0px;
          padding: 10px 10px 13px 0px;
        }
      }
    }
}