XF 2.1 Grid layout nodes

[indicator]

Hi there,

Would like to make forum index into 2 column layout.

I have followed the instruction as per the link below

How do I show my page into two columns

How can we do as in the picture hopefully I did not open this topic in the wrong place :))

xenforo.com

But it is not working for XF2.1

Anyone help with the extra.less codes?

 

[hemant_bhardwaj]

Hi there,

Would like to make forum index into 2 column layout.

I have followed the instruction as per the link below

How do I show my page into two columns

How can we do as in the picture hopefully I did not open this topic in the wrong place :))

xenforo.com

But it is not working for XF2.1

Anyone help with the extra.less codes?

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

can you try this i write it for latest xenforo

 

[indicator]

Thanks Hemant for your response and help, however, it did not look right to me.
Would it possible to make everything inline or arrange in differently?

 

[hemant_bhardwaj]

hmmm well this is what it's look like with xenforo default theme

 

[indicator]

Thank you so much Hemant for your help.

 

[Abraham54]

Hello Hemant, for starting, it looks great indeed, only I wish for a better separation between the nodes.
Now it looks crowded.

 

[hemant_bhardwaj]

Hello Hemant, for starting, it looks great indeed, only I wish for a better separation between the nodes.
Now it looks crowded.

Ok boss let me see what i can do

 

[Abraham54]

Ok boss let me see what i can do

Thank you, I will wait for your next exercise.

 

[hemant_bhardwaj]

.block--category{
@media (min-width: 1100px){
 @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: 100%;
  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: 5px 1px 5px 1px;}
.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;
}
  }}
}

Try this

 

[Abraham54]

Much better, dear Hemant.

I have changed the color in @xf-borderColorLight​

But is it possible that between each gridblock the forum background can be shown?

 

[Abraham54]

Hello Hemant,
I have changed the border to 4px with color @xf-pageBg
Looks great.
I that could be made to happen between each node-grid block, I think things will look wonderful.

 

[Abraham54]

Hello Hamant - happy now!

  border-right: 3px solid @xf-pageBg;
  border-bottom: 2px solid @xf-pageBg;

 

[hemant_bhardwaj]

Hello Hamant - happy now!

  border-right: 3px solid @xf-pageBg;
  border-bottom: 2px solid @xf-pageBg;

don't forget to review it if you like it

[Xenbros] Grid layout for node without addon

Hemant here again with Node grid layout without Addon. Well after Developing some addon i really like to go back to learn and play with css but this time with flex instead of grid so here a quick mod for you. so here it is. So here a simple CSS...

xenforo.com

 

[indicator]

Very good work Hemant