Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
Kaynak ikonu

XF 2.1 Eklenti Xenforo 2.1 Şık Açılıan Kapanan Kategori Yapımı

Bu eklenti, add-ons XenForo 2.1.X ile uyumlu ve stabil olarak çalışmaktadır.
Uyumlu XF 2 Sürümleri
NASIL YAPIYORUZ:

Şablon "node_list_category " aşağıdaki kod değişikliklerini yapıyoruz.

BUL :
CSS:
<div class="block block--category block--category{$node.node_id}">

DEĞİŞTİR:
CSS:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">

BUL :
CSS:
<h2 class="block-header">

ALTINA ILAVE ET:
CSS:
<div class="block-header--left">

BUL:
CSS:
<div class="block-desc">{$node.description|raw}</div></xf:if>

DEĞİŞTİR:
CSS:
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>

SONUNA EKLE:
CSS:
</div>

BUL :
CSS:
</h2>

ÜSTÜNE EKLE:
CSS:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block is-active" data-xf-click="toggle" data-xf-init="toggle-storage" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>

BUL :
CSS:
<div class="block-body">

DEĞİŞTİR:
CSS:
<div class="block-body block-body--collapsible is-active">

Şablon "extra.less " aşağıdaki kodu ekliyoruz

CSS:
/* Node Collapse */
.block--category .collapseTrigger {
  opacity: 0.5;
  transition: opacity 0.3s;
  margin-right: 10px;
}
.block--category .collapseTrigger.is-active:before {
  .m-faBase();
  content: "\f146";
  transform: scale(-1, 1);
  margin-right: -8px;
}
.block--category .collapseTrigger:before {
  .m-faBase();
  content: "\f0fe";
  font-size: 80%;
}
.block--category .block-container:hover .collapseTrigger {
  opacity: 1;
}
.collapsible-nodes .block-header {
  display: flex;
}
.collapsible-nodes .block-header--left {
  margin-right: auto;
  max-width: 100%;
}

Sonuç
6898


6899


İyi Kullanımlar



Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.