- Reaction score
- 48
- Points
- 55
Compatibility with XenForo: 2.1
Visible branding: No
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 that you need to place it in Extra.less that will give it what you looking for.
IF YOU LIKE IT PLEASE REVIEW IT
Note : you need to adjust the max-width: 1100px; according to your forum layout.
Visible branding: No
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 that you need to place it in Extra.less that will give it what you looking for.
IF YOU LIKE IT PLEASE REVIEW IT
Note : you need to adjust the max-width: 1100px; according to your forum layout.
Less:
.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;
}
}}
}
XenForo is a commercial Internet forum software package written in PHP. It was developed by former vBulletin developers, and it is designed to enhance community engagement and provide forum owners with a powerful platform to build and manage their online communities.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It enables the separation of content from design, allowing for greater flexibility and control in the layout and appearance of web pages.