• Merhaba Ziyaretçi hoşgeldin! Forumdan daha fazla yararlanmak için buradan kayıt olunuz...

xenforo 2x Forum katogorileri çift sutun nasıl gösterilir?

Okunuyor :
xenforo 2x Forum katogorileri çift sutun nasıl gösterilir?

YukseLL

Emektar
Yönetici
Admin
Moderatör
Üye
Xenforo yüklü sitemizde Forum katogorilerini nasıl çift sutun gösterebiliriz?
Aşağıdaki kodları kullandığınız temanın extra.less şablonuna ekleyip kaydedin.

CSS:
@media (min-width: @xf-responsiveWide) {
    [data-template="forum_list"] .block.block--category .block-body,
    [data-template="forum_view"] .block .block-body.node,
    [data-template="category_view"] .block .block-body.node {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: 50% auto;
        grid-gap: 3px;
    }
    [data-template="forum_list"] .node .node-body .node-main,
    [data-template="forum_view"] .node .node-body .node-main,
    [data-template="category_view"] .node .node-body .node-main {
        max-width: 47%;
    }
    .node.node--id8 {
        grid-column: span 2;
    }
    .node .node-extra {
        width: 340px;
        margin: 0;
    }
    .node .node-extra .node-extra-row {
        white-space: nowrap !important;
    }
    .node .node-body {
        flex-wrap: nowrap !important;
    }
    .node .node-body .node-main {
        max-width: 85% !important;
    }
    .node.node--depth2 {
        color: @xf-textColor;
        background: @xf-contentBg;
        border-width: 1px;
        border-style: solid;
        border-top-color: @xf-borderColorFaint;
        border-right-color: @xf-borderColor;
        border-bottom-color: @xf-borderColorFaint;
        border-left-color: @xf-borderColor;
        border-radius: 4px;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        -webkit-transition-property: border margin;
        transition-property: border margin;
    }
    [data-template="forum_list"] .block.block--category .block-container,
    [data-template="forum_view"] .block .block-container.node,
    [data-template="category_view"] .block .block-container.node {
        background: none;
        border-style: none;
    }
    .node .node-body {
        display: flex;
        flex-grow: 1;
        flex-wrap: wrap;
    }
    [data-template="forum_list"] .node .node-body .node-main,
    [data-template="forum_view"] .node .node-body .node-main,
    [data-template="category_view"] .node .node-body .node-main {
        flex-grow: 1;
        max-width: 85%;
    }
    .node-extra {
        width: 90%;
        margin: -5px -46px 10px 46px;
    }
    .node-extra .node-extra-row {
        white-space: normal !important;
    }
    .node-statsMeta {
        display: inline;
    }
    .node-stats {
        display: none;
    }
    [data-template="forum_list"] .node-extra,
    [data-template="forum_view"] .node-extra,
    [data-template="category_view"] .node-extra {
        display: none;
    }
}

@media (max-width: @xf-responsiveWide) {
    .node-statsMeta {
        display: inline;
    }
    .node-stats {
        display: none;
    }
    [data-template="forum_list"] .node-extra,
    [data-template="forum_view"] .node-extra,
    [data-template="category_view"] .node-extra {
        display: none !important;
    }
}
Eğer tek kalan forum katogoriniz var ve bunu tam genişlikte göstermek isterseniz

CSS:
.node.node--id3 {
    grid-column: span 2;
}
Siz sadece forum ID numaralarını değiştirin.
NOT : Kodlar xenforo default temada denenmiştir Özel temalarda değişiklik gösterebilir.
 

YukseLL

Emektar
Yönetici
Admin
Moderatör
Üye
CSS:
[data-template="forum_list"] .block.block--category .block-body, [data-template="forum_view"] .block .block-body.gn-grid, [data-template="category_view"] .block .block-body.gn-grid {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 50% auto;
    grid-gap: 3px;
}
.block-container:not(.block-container--noStripRadius) > :last-child, .block-bottomRadiusContent, .block-container:not(.block-container--noStripRadius) > .block-body:last-child > .blockLink:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.block-body {
    list-style: none;
    margin: 0;
    padding: 0;
}
.node.node--depth2 {
    color: #141414;
    background: #555e64;
    border-width: 1px;
    border-style: solid;
    border-top-color: #dfdfdf;
    border-right-color: #d8d8d8;
    border-bottom-color: #cbcbcb;
    border-left-color: #d8d8d8;
    border-radius: 4px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    -webkit-transition-property: border margin;
    transition-property: border margin;
}
.node-statsMeta {
    display: inline;
}
.node-stats {
    display: none;
}
.node-title {
    margin: 0;
    padding: 0;
    font-size: 17px;
    font-weight: 400;
}
 

YukseLL

Emektar
Yönetici
Admin
Moderatör
Üye
Değişik bir versiyon birde bu kodu deneyin

CSS:
.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;
}
}}
}
grid-layout-for-node-without-addon.png
 
Tüm sayfalar yüklendi.
Reklam amaçlı yazı ve link içeren yorumlar onaylanmaz.
Üst Alt