- Joined
- Jan 20, 2022
- Messages
- 385
- Points
- 53
Reputation:
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;
}
}}
}
- Joined
- May 31, 2022
- Messages
- 166
- Points
- 28
Reputation:
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; } }} }
↑View previous replies…
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
one_finger_manI 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
one_finger_manYes 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
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
jommytonny888are you using an uptodate version of xenforo
one_finger_manremove those codes and add this to the extra less
smaller codes
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
one_finger_manYes version :
v2.2.10
Yes the correct theme is selected
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.
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
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
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.
- Joined
- Jan 20, 2022
- Messages
- 385
- Points
- 53
Reputation:
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:
BattleKing
Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
- Joined
- May 24, 2020
- Messages
- 3,519
- Points
- 523
Reputation:
- By BattleKing
you want the treads to display like that
- Joined
- Jan 20, 2022
- Messages
- 385
- Points
- 53
Reputation:
I do not know what he want in detail
- Joined
- May 31, 2022
- Messages
- 166
- Points
- 28
Reputation:
i gave the codes for the topic if thats not it than im done cause it should look like this
View attachment 30679
- Joined
- Jan 20, 2022
- Messages
- 385
- Points
- 53
Reputation:
Yes this is what I want. I used the code nothing.
- Joined
- May 31, 2022
- Messages
- 166
- Points
- 28
Reputation:
i gave the codes for the topic if thats not it than im done cause it should look like this
View attachment 30679
Node 13 I selected good, copied from the link of the node like shown
using ryzer theme
Attachments
- Joined
- Jan 20, 2022
- Messages
- 385
- Points
- 53
Reputation:
Yes this is what I want. I used the code nothing.
- Joined
- Jan 20, 2022
- Messages
- 385
- Points
- 53
Reputation:
are you using an uptodate version of xenforo
Code:
/* Copyright */
.p-footer-copyright{font-size: 0px;}
.custom-copyright{font-size: 11px;}
BattleKing
Spirit of darkness
Staff member
Administrator
Moderator
+Lifetime VIP+
S.V.I.P Member
Collaborate
Registered
- Joined
- May 24, 2020
- Messages
- 3,519
- Points
- 523
Reputation:
- By BattleKing
are you using an uptodate version of xenforo
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
- Joined
- May 31, 2022
- Messages
- 166
- Points
- 28
Reputation:
are you using an uptodate version of xenforo
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
- Joined
- May 24, 2020
- Messages
- 3,519
- Points
- 523
Reputation:
- By BattleKing
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
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
- Joined
- May 24, 2020
- Messages
- 3,519
- Points
- 523
Reputation:
- By BattleKing
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.
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
- Joined
- Jan 20, 2022
- Messages
- 385
- Points
- 53
Reputation:
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
- Joined
- May 31, 2022
- Messages
- 166
- Points
- 28
Reputation:
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