Xenforo 2.0 Şık Açılan Kapanan Kategori Yapımı | WMexe | Webmaster Forumu!
Neler Yeni
  • Ticaret Puanı vermek istediğiniz kişinin profilini ziyaret ederek "Ticaret Puanı" sekmesine tıklayıp ticaretinizin olumlu/olumsuz yorumunu yaparak kullanıcıyı değerlendirebilirsiniz.

Xenforo 2.0 Şık Açılan Kapanan Kategori Yapımı

[WF] Konu Bilgileri

Konu Hakkında Merhaba, tarihinde 2.x.x Düzenlemeler kategorisinde XenForo™ tarafından oluşturulan Xenforo 2.0 Şık Açılan Kapanan Kategori Yapımı başlıklı konuyu okuyorsunuz. Bu konu şimdiye dek 146 kez görüntülenmiş, 2 yorum ve 0 tepki puanı almıştır...
Kategori Adı 2.x.x Düzenlemeler
Konu Başlığı Xenforo 2.0 Şık Açılan Kapanan Kategori Yapımı
Konuyu başlatan XenForo™
Başlangıç tarihi
Cevaplar
Görüntüleme
ALDIĞI BEĞENİ
Son Mesaj Yazan XenForo™

XenForo™

XenForo Developer
WF Yönetici
Katılım
3 May 2020
Yaşınız
25
Konum
Kocaeli
Mesajlar
589
A.Beğeni
15
Son Görülme
Ticaret
0 /   0 /   0
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ç
1588362137594.png


1588362145656.png


İyi Kullanımlar
 

aFa

WF ÜYE
Katılım
16 May 2020
Yaşınız
36
Konum
Istanbul
Mesajlar
1
A.Beğeni
0
Son Görülme
Ticaret
0 /   0 /   0
Merhabalar. Sizdeki gibi nasıl yapılır acaba.
 

XenForo™

XenForo Developer
WF Yönetici
Katılım
3 May 2020
Yaşınız
25
Konum
Kocaeli
Mesajlar
589
A.Beğeni
15
Son Görülme
Ticaret
0 /   0 /   0

Dikkat!

Özel mesaj ile destek talep etmeyiniz, bu tip dm'lere kesinlikle cevap verilmeyecektir! Taleplerinizi "Destek Talepleriniz" kategorisine açık ve anlaşılır şekilde açınız.

Benzer konular

Konuyu Görüntüleyenler: (Üye: 0, Misafir: 1)


  • İpUcu

Google ads alanı