How to make node grid view?

[jommytonny888]

I want to make grid view and have better search in forum, like in the middle or something. Is it possible to make?

 

[foroxxx]

I take a seat.

 

[Soft4Win]

If you want grid layout using addon: https://enxf.net/resources/cxf-grid-nodes.1399/

Grid Layout of nodes without addon: https://enxf.net/resources/xenbros-grid-layout-for-node-without-addon.1592/

Grid Layout of Threads without Addon: https://enxf.net/resources/grid-layout-for-thread-without-addon.2505/

For search, you will have to manually customize it or get someone have it customized for you.

 

[jommytonny888]

No I mean i want to make grid view not notes list, but threads in node

 

[jommytonny888]

@

Soft4Win​

Yeah I need to try last! Could you please tell me where is extra.less for each node? I want some threads in nodes have grid view not all category.

 

[BattleKing]

@

Soft4Win​

Yeah I need to try last! Could you please tell me where is extra.less for each node? I want some threads in nodes have grid view not all category.

jommytonny888Extra.less is a template, which is available for each style. So it will go to all nodes. If you want to limit this to specific categories you need to add the data-container to it.

 

[jommytonny888]

Extra.less is a template, which is available for each style. So it will go to all nodes. If you want to limit this to specific categories you need to add the data-container to it.

BattleKingAndddddd how do i do this?

 

[one_finger_man]

you add this to extra-less and watch the magic happen

.block--category{
@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]

you add this to extra-less and watch the magic happen

.block--category{
@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 for all forum or just specific node? I just want to add to some nodes, not all

 

[one_finger_man]

This for all forum or just specific node? I just want to add to some nodes, not all

jommytonny888it would be easier to see an image of what ya want so we can give the right codes

 

[BattleKing]

it would be easier to see an image of what ya want so we can give the right codes

one_finger_manTry that, where node-2 is the id of the node you want to change

[data-container-key="node-2"]
.block--category{
@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]

Try that, where node-2 is the id of the node you want to change

[data-container-key="node-2"]
.block--category{
@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;
}
  }}
}

BattleKingThos for threads inside node yes?

 

[jommytonny888]

Try that, where node-2 is the id of the node you want to change

[data-container-key="node-2"]
.block--category{
@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;
}
  }}
}

BattleKingUmm, which file I should to find this code?

 

[BattleKing]

Umm, which file I should to find this code?

jommytonny888which code, do you mean the ID's

 

[jommytonny888]

which code, do you mean the ID's

BattleKingWhere can I find this :

 

[BattleKing]

Where can I find this :

[data-container-key="node-2"]
.block--category{
@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;
}
}}
}

jommytonny888This code need to be placed into extra.less

 

[jommytonny888]

This code need to be placed into extra.less

BattleKingtried node1/2 , did not work, threads still displayed like original

 

[jommytonny888]

tried node1/2 , did not work, threads still displayed like original

jommytonny888How do I find node id? its on the top of the page yes the number? Grid still does nto work

 

[BattleKing]

How do I find node id? its on the top of the page yes the number? Grid still does nto work

jommytonny888Hover over the node links

 

[one_finger_man]

Did you change the correct extra.less file?
It must be the one from your used style. So please be sure you used the right one.

But he mentioned he want that layout just for some nodes, not all of them

BattleKingthe two codes i gave him works for on all themes but what he wants is his topic to show on the main page but that can not happen in less he change his category to view has topic only after i gave him the first codes it would look like this

 

[jommytonny888]

the two codes i gave him works for on all themes but what he wants is his topic to show on the main page but that can not happen in less he change his category to view has topic only after i gave him the first codes it would look like this

View attachment 30681

one_finger_manThe short code code makes front page distorted like bugged and nothing inside nodes , threads dont change, just front page broken, but other long code DOES WORK, but it does not have node option.

 

[UNKNOWN PH]

I want to make grid view and have better search in forum, like in the middle or something. Is it possible to make?

jommytonny888cfx gridnode is the best