Jump to content

Welcome to Scriptznulled #1 nulling site

Welcome to Scriptznulled #1 nulling site, like most online communities you must register to view or post in our community, but don't worry this is a simple free process that requires minimal information for you to signup. Be apart of Scriptznulled #1 nulling site by signing in or creating an account.
  • Start new topics and reply to others
  • Subscribe to topics and forums to get email updates
  • Get your own profile page and make new friends
  • Send personal messages to other members.
Sign in to follow this  

Grid layout for XFRM without Addon

Recommended Posts

So here a simple CSS that you need to place it in Extra.less that will give it what you looking for. 


Note : you need to adjust the max-width: 50Ch; according to your forum layout. Ex : max-width: 40Ch; 
this will set the ... according to your width

/********* Css Grid Code Start ********/
    text-overflow: ellipsis !important;
    max-width: 50ch;
    white-space: nowrap;
    overflow: hidden; }
    border-collapse: collapse;
    width: 100%;
    height: auto;
    display: inline-block !important;
    margin: 9px 0px 0px 6px;
    max-width: 49% !important;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); }
@media (max-width: 650px){
.structItem-cell.structItem-cell--meta { display:none; } }
    display: block;
    width: auto !important;
    margin-top: -13px;
    float:left; }
    display: block;
    width: auto !important;
    margin-top: -13px;
    margin-bottom: 15px;
   float:right; }
.structItem-cell--meta > .pairs.pairs--justified>dd {
    float: left; text-align: right;  max-width: 100%; }
.structItem-cell--meta dl.pairs.pairs--justified{  float:left; }
.structItem-cell--latest{ margin-bottom:0px !important; }
@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;     } }
@media (max-width: 650px){
.structItem-cell.structItem-cell--latest,.structItem-cell--meta { float:right !important;  }}
.structItem-cell--meta dt{ font-size:0px; }
.structItem-cell--meta dd{ margin-left:18px; font-size: 12px; color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
    font-family: FontAwesome;
    font-size: 12px;
    position: absolute;
    margin-left: 0px;
    color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before {content: '\f06e '; }
.structItem-cell--meta dt:before {content: '\f112'; }
.structItem-cell--latest{ margin-top: -34px;}
.structItemContainer-group.js-threadList { margin-bottom: 8px; }
.structItem-cell--main .structItem-extraInfo {float: left;margin-left: -8px;} 
/********* Css Grid Code End ********/

Result : 

if anyone wants to get the Sticky thread look separate in color Text just paste this CSS below extra.less

.structItemContainer-group--sticky .structItem--thread {
    background: #fff5e8 !important;
  border: 1px solid #f9c479 !important;


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  


Important Information

By using this site, you agree to our Terms of Use.