Register

How to make node grid view?

Thread starter jommytonny888
Start date Sep 25, 2022

O

one_finger_man

Well-known member

Registered

Sep 26, 2022

#8

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

CSS:

.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

Well-known member

Registered

By jommytonny888
Sep 28, 2022

#10

one_finger_man said:

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

CSS:

.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

↑View previous replies…

O

one_finger_man

Well-known member

Registered

By one_finger_man
Sep 29, 2022

#21

BattleKing said:
Hover over the node links

View attachment 30678

BattleKingyou want the treads to display like that this can only be done when you open the forum it self it will not show on the main page so if someone opens the category like tips and guide than in the category all the topics would be grid view and so on

add this to your extra-less

CSS:

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

Last edited: Sep 29, 2022

BattleKing

Spirit of darkness

Staff member

Administrator

Moderator

+Lifetime VIP+

S.V.I.P Member

Collaborate

Registered

By BattleKing
Sep 29, 2022

#22

one_finger_man said:
you want the treads to display like that

one_finger_manI do not know what he want in detail

O

one_finger_man

Well-known member

Registered

By one_finger_man
Sep 29, 2022

#23

BattleKing said:
I do not know what he want in detail

BattleKingi gave the codes for the topic if thats not it than im done cause it should look like this

jommytonny888

Well-known member

Registered

By jommytonny888
Sep 29, 2022

#24

one_finger_man said:
i gave the codes for the topic if thats not it than im done cause it should look like this
View attachment 30679

one_finger_manYes this is what I want. I used the code nothing.

O

one_finger_man

Well-known member

Registered

By one_finger_man
Sep 29, 2022

#25

jommytonny888 said:
Yes this is what I want. I used the code nothing.

jommytonny888than you are doing something wrong because those codes work are you adding it to your extra-less

jommytonny888

Well-known member

Registered

By jommytonny888
Sep 29, 2022

#26

one_finger_man said:
i gave the codes for the topic if thats not it than im done cause it should look like this
View attachment 30679

one_finger_manFirst code I have for remove copyright

Node 13 I selected good, copied from the link of the node like shown

using ryzer theme

O

one_finger_man

Well-known member

Registered

By one_finger_man
Sep 29, 2022

#27

jommytonny888 said:
Yes this is what I want. I used the code nothing.

jommytonny888are you using an uptodate version of xenforo

O

one_finger_man

Well-known member

Registered

By one_finger_man
Sep 29, 2022

#28

one_finger_man said:
are you using an uptodate version of xenforo

one_finger_manremove those codes and add this to the extra less

Code:

/* Copyright */
.p-footer-copyright{font-size: 0px;}
.custom-copyright{font-size: 11px;}

smaller codes

BattleKing

Spirit of darkness

Staff member

Administrator

Moderator

+Lifetime VIP+

S.V.I.P Member

Collaborate

Registered

By BattleKing
Sep 29, 2022

#29

one_finger_man said:
are you using an uptodate version of xenforo

one_finger_manDid 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

jommytonny888

Well-known member

Registered

By jommytonny888
Sep 29, 2022

#30

one_finger_man said:
are you using an uptodate version of xenforo

one_finger_manYes version :
v2.2.10

Yes the correct theme is selected

BattleKing

Spirit of darkness

Staff member

Administrator

Moderator

+Lifetime VIP+

S.V.I.P Member

Collaborate

Registered

By BattleKing
Sep 29, 2022

#31

BattleKing said:
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

BattleKingAn all of the confusion happened if the questions and request is not detailed enough.

Then use the code from one_finger_man, this is for all nodes and works fine.

BattleKing

Spirit of darkness

Staff member

Administrator

Moderator

+Lifetime VIP+

S.V.I.P Member

Collaborate

Registered

By BattleKing
Sep 29, 2022

#32

BattleKing said:
An all of the confusion happened if the questions and request is not detailed enough.

Then use the code from one_finger_man, this is for all nodes and works fine.

BattleKingAlso in Post3 there is also a solution with an addon
https://enxf.net/threads/how-to-make-node-grid-view.7387/post-43291

Do not know why you have not taken this one, also the other two links describe also how to make grids

O

one_finger_man

Well-known member

Registered

By one_finger_man
Sep 29, 2022

#34

BattleKing said:
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

Well-known member

Registered

By jommytonny888
Sep 29, 2022

#36

one_finger_man said:
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.

jommytonny888

Well-known member

Registered

Sep 29, 2022

#33

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

Last edited: Sep 29, 2022

BattleKing

Spirit of darkness

Staff member

Administrator

Moderator

+Lifetime VIP+

S.V.I.P Member

Collaborate

Registered

By BattleKing
Sep 29, 2022

#35

jommytonny888 said:
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

↑View previous replies…

jommytonny888

Well-known member

Registered

By jommytonny888
Sep 29, 2022

#37

BattleKing said:
Then fake a picture to demonstrate how it has to look like

BattleKingNo this code work perfect, problem is its for all forum, how to add code so I can just make for "node 13"

I want this just for some nodes, 3-4 nodes, thats all,other part normal is ok.

O

one_finger_man

Well-known member

Registered

By one_finger_man
Sep 29, 2022

#38

BattleKing said:
Then fake a picture to demonstrate how it has to look like

BattleKingjommytonny888 are you tryingto say my pics are fake when someone is trying to help you do it your self and dont ask for help from me but i give the link anyway to prove that all i do is costume my own codes stuff on a test site

jommytonny888

Well-known member

Registered

By jommytonny888
Sep 29, 2022

#39

one_finger_man said:
jommytonny888 are you tryingto say my pics are fake when someone is trying to help you do it your self and dont ask for help from me but i give the link anyway to prove that all i do is costume my own codes stuff on a test site

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

BattleKing

Spirit of darkness

Staff member

Administrator

Moderator

+Lifetime VIP+

S.V.I.P Member

Collaborate

Registered

By BattleKing
Sep 29, 2022

#40

one_finger_man said:
jommytonny888 are you tryingto say my pics are fake when someone is trying to help you do it your self and dont ask for help from me but i give the link anyway to prove that all i do is costume my own codes stuff on a test site

one_finger_manNo no I want that @jommytonny888 create some fake pictures, so that we see what he wants and how want that it looks like.

I know @one_finger_man that your code works fine.

O

one_finger_man

Well-known member

Registered

By one_finger_man
Sep 29, 2022

#41

jommytonny888 said:
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

You must log in or register to reply here.

Top