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

xenforo 2x Açılır kapanır forum katogorileri

YukseLL

Emektar
Yönetici
Admin
Moderatör
Üye
kullanıcıların ilgilenmedikleri katogorileri daraltma seceneğinın basit bir yolu. artık kullanıcılar sayfayı yenilediğinde veya siteyi tekrar ziyaret ettiklerinde kapattıkları katogoriler kapalı kalmaya devam edecek.tir.

sablonu ac
Kod:
node_list_category
bul
Kod:
<div class="block block--category block--category{$node.node_id}">
değiştir
Kod:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">
bul
Kod:
<h2 class="block-header">
üstüne ekle
Kod:
<div class="block-header--left">
BUL
xenforo 2x için
Kod:
<div class="block-desc">{$node.description|raw}</div></xf:if>
xenforo 2.1x için
Kod:
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>
altına ekle
Kod:
</div>
bul
Kod:
<div class="block-body">
değiştir
Kod:
<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">
ac ve ekle extra.less: template

Kod:
/* Collapse katogori */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}
 

Ekli dosyalar

YukseLL

Emektar
Yönetici
Admin
Moderatör
Üye
eğer geçiş efekti vermek isterseniz extra.less: template ye asağıdaki kodları ekleyin

Kod:
.block-body.block-body--collapsible
{
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}
 

Üst Alt