[Guide] Making Grid Layout Forum/Node Without Add-ons

[HIdden.be]

[Guide] Making Grid Layout Forum/Node Without Add-ons
Working For All Style

​

Now Start:

1. Log In Admin Panel​
2. Go to Appearances/Templates​
3. ​
4. Filter/Search extra.less​
5. ​
6. Then open it.​
7. ​
8. Then Paste this css code​

For Dark Theme

.block--category{
@media (min-width: 1200px){
@supports(display: grid){
.block-body{display:grid; grid-template-columns:50% 50%;}
.block-container{background-color: #ffffff00;border:none;}
.node-body{
  display:flex;
  flex-wrap: wrap;
  border-right: 1px solid #dedede;
  position:relative;
  height: 90%;
  padding:5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-width: 1px;
  border-style: solid;
  background-color: #464646;
  border-top-color: #dfdfdf;
  border-right-color: #d8d8d8;
  border-bottom-color: #cbcbcb;
  border-left-color: #d8d8d8;
}
.node{margin: 2px 1px 5px 1px;}
.node-icon{width:12%; padding-top:1px;}
.node-main{width:65%;} .node-stats{width:110px;}
.node-extra{
  position:absolute;
  right:0px;
  bottom:0px;
  padding: 5px 10px 13px 0px;
}
}}
}

For Light Theme

.block--category{
@media (min-width: 1200px){
@supports(display: grid){
.block-body{display:grid; grid-template-columns:50% 50%;}
.block-container{background-color: #ffffff00;border:none;}
.node-body{
  display:flex;
  flex-wrap: wrap;
  border-right: 1px solid #dedede;
  position:relative;
  height: 90%;
  padding:5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-width: 1px;
  border-style: solid;
  background-color: #ffffff;
  border-top-color: #dfdfdf;
  border-right-color: #d8d8d8;
  border-bottom-color: #cbcbcb;
  border-left-color: #d8d8d8;
}
.node{margin: 2px 1px 5px 1px;}
.node-icon{width:12%; padding-top:1px;}
.node-main{width:65%;} .node-stats{width:110px;}
.node-extra{
  position:absolute;
  right:0px;
  bottom:0px;
  padding: 5px 10px 13px 0px;
}
}}
}

• Go to Style Properties
• Then Select your Style
• Adjust this

  @media (min-width: 1200px){

  css with Maximum page width
• 
• All Done

Credit: hemant_bhardwaj(Xenbros)
Modified ALiveVam​

 

[anonxpro]

Can u plz do something like adding a header menu like [cxf] top navigation ? it'd be much helpful!

 

[HIdden.be]

Can u plz do something like adding a header menu like [cxf] top navigation ? it'd be much helpful!

Wait. I am working on it.

 

[anonxpro]

Wait. I am working on it.

badly waiting for it

 

[jereve]

Thank you bro

 

[DarKMaSk]

[Guide] Making Grid Layout Forum/Node Without Add-ons
Working For All Style

​

Now Start:

1. Log In Admin Panel​
2. Go to Appearances/Templates​
3. ​
4. Filter/Search extra.less​
5. ​
6. Then open it.​
7. ​
8. Then Paste this css code​

For Dark Theme

.block--category{
@media (min-width: 1200px){
@supports(display: grid){
.block-body{display:grid; grid-template-columns:50% 50%;}
.block-container{background-color: #ffffff00;border:none;}
.node-body{
  display:flex;
  flex-wrap: wrap;
  border-right: 1px solid #dedede;
  position:relative;
  height: 90%;
  padding:5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-width: 1px;
  border-style: solid;
  background-color: #464646;
  border-top-color: #dfdfdf;
  border-right-color: #d8d8d8;
  border-bottom-color: #cbcbcb;
  border-left-color: #d8d8d8;
}
.node{margin: 2px 1px 5px 1px;}
.node-icon{width:12%; padding-top:1px;}
.node-main{width:65%;} .node-stats{width:110px;}
.node-extra{
  position:absolute;
  right:0px;
  bottom:0px;
  padding: 5px 10px 13px 0px;
}
}}
}

For Light Theme

.block--category{
@media (min-width: 1200px){
@supports(display: grid){
.block-body{display:grid; grid-template-columns:50% 50%;}
.block-container{background-color: #ffffff00;border:none;}
.node-body{
  display:flex;
  flex-wrap: wrap;
  border-right: 1px solid #dedede;
  position:relative;
  height: 90%;
  padding:5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-width: 1px;
  border-style: solid;
  background-color: #ffffff;
  border-top-color: #dfdfdf;
  border-right-color: #d8d8d8;
  border-bottom-color: #cbcbcb;
  border-left-color: #d8d8d8;
}
.node{margin: 2px 1px 5px 1px;}
.node-icon{width:12%; padding-top:1px;}
.node-main{width:65%;} .node-stats{width:110px;}
.node-extra{
  position:absolute;
  right:0px;
  bottom:0px;
  padding: 5px 10px 13px 0px;
}
}}
}

• Go to Style Properties
• Then Select your Style
• Adjust this

  @media (min-width: 1200px){

  css with Maximum page width
• 
• All Done

Credit: hemant_bhardwaj(Xenbros)
Modified ALiveVam​

This is a very good guide. However, what happens to the file after updating? Should we create a child theme to protect this code?