XenForo Kategorileri açılır kapanır yapma
Uyumlu XF Sürümleri- 2.2.X
- 2.3.X
XenForo 2.2.X
node_list_category şablonunu açın ve aşağıdaki kodu bulun:
Kod:
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>Aşağıdaki kodu sonuna ekle:
Kod:
</div>
Kod:
</h2>
Kod:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>Aynı şablonda aşağıdaki kodu bul:
Kod:
<div class="block-body">Aşağıdaki kod ile değiştir:
Kod:
<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">Aşağıdaki kodu aktif olarak kullandığınız temanın extra.less şablonuna ekleyin:
Less:
/* Açılır Kapanır Kategori TRXF.TR */
.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%;
}
}Eğer animasyon şeklinde açılıp kapanmasını isterseniz aşağıdaki kodu extra.less şablonuna 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;
}XenForo 2.3.X
node_list_category şablonunu açın ve aşağıdaki kodu bulun:
Kod:
</h2>Aşağıdaki kodu üstüne ekle:
Kod:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>Aynı şablonda aşağıdaki kodu bul:
Kod:
<div class="block-body">Aşağıdaki kod ile değiştir:
Kod:
<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">Aşağıdaki kodu aktif olarak kullandığınız temanın extra.less şablonuna ekleyin:
Less:
/* Node Collapse */
.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%;
}
}
.collapseTrigger:not(.button).collapseTrigger--block:before {
float: right;
margin-top: -25px;
margin-right: 0;
margin-left: 5px;
font-size: 100%;
line-height: inherit;
}
.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;
}GÖRÜNÜM
