Grid view layout for thread list - Xenforo 2

Grid view layout for thread list - Xenforo 2

Grid view layout for thread list - Xenforo 2.png


Simply add the following codes to your theme's extra.less template. Tested with XenForo 2.2.2.

CSS:
//- Hizli ozelestirme seçenekleri
    @xgt-konu-ap: transparent;
    @xgt-konu-secilmis-ap: rgb(255, 248, 238);
    @xgt-konu-golgesi:  0 1px 4px rgba(0, 0, 0, 0.28);
    @xgt-konu-border: solid 1px rgba(0, 0, 0, 0.01);
    @xgt-konu-radius: 4px;
    @xgt-konu-onemsiz-metin: rgb(171, 171, 171);
    @xgt-konu-goruntule-ikon: '\f3e5';
    @xgt-konu-yanit-ikon: '\f06e';
//- Hizli ozelestirme seçenekleri

[data-template="forum_view"]
{
    @media (min-width: @xf-responsiveWide)
    {
        .structItem.is-mod-selected
        {
            background: @xgt-konu-secilmis-ap;
            opacity: 1;
        }
          
        .structItem-title
        {
            text-overflow: ellipsis !important;
            max-width: 50ch;
            overflow: hidden;
            white-space: nowrap;
        }
  
        .structItem--thread
        {
            background:@xgt-konu-ap;
            border: @xgt-konu-border;
            border-radius: @xgt-konu-radius;
            box-shadow: @xgt-konu-golgesi;               
            box-sizing: border-box;           
            border-collapse: collapse;   
            display: inline-block !important;
            position: relative;
            width: 100%;
            height: auto;
            margin: 9px 0px 0px 6px;
            max-width: 49% !important;
            vertical-align: top;
            overflow: hidden;
        }
      
        .xgt-konu-metalar
        {
            display: block;
            width: auto !important;
            margin-top: -13px;
        }

        .structItem-cell--meta
        {
            float:left;
            .xgt-konu-metalar();
        }

        .structItem-cell--latest
        {
            margin-bottom: 15px;
                float:right;
            .xgt-konu-metalar();
        }

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

        .structItem-cell--meta
        {   
            dt
            {
                font-size:0px;
            }

            dd
            {
                margin-left:18px;
                font-size: 12px;
                color: @xgt-konu-onemsiz-metin;
            }
        }

        .structItem-cell--meta .structItem-minor dt:before,
        .structItem-cell--meta dt:before
        {
            color: @xgt-konu-onemsiz-metin;
            font-family: 'Font Awesome 5 Pro';
            font-size: 12px;
            position: absolute;
            margin-left: 0px;
        }

        .structItem-cell--latest
        {
            margin-top: -34px;
        }

        .structItemContainer-group
        {
            &.js-threadList
            {
                margin-bottom: 8px;
            }
        }

        .structItem-cell--main
        {
            .structItem-extraInfo
            {
                float: left;
                margin-left: -8px;       
              
                .iconic
                {
                    position: absolute;
                    right: 10px;
                    top: 5px;
                }
            }
        }

        .structItem-cell
        {
            &.structItem-cell--icon
            {
                &.structItem-cell--iconEnd
                {
                    display: none;
                }
            }
        }

        .structItem-cell--meta
        {
            dt:before
            {
                content: @xgt-konu-goruntule-ikon;
            }
  
            .structItem-minor dt:before
            {
                content: @xgt-konu-yanit-ikon;
            }
        }       
    }
}
 

alkaline

New Member
Hi, this is nice, but how to create the same layout of threads like on this forum? Greetings
 
Top Bottom