ركن شروحات الزين فورو XENFORO هذا القسم خاص بكل شروحات إستخدام XENFORO وتعديلات القوالب

اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى بى

السلام عليكم ورحمه الله وبركاته حاصية جديد وطريقة جديدة يتم اضافتها على الاسكريبت الاكثر من رائعه وهى خاصية Collapsible Node Categories والتى تتيح لم ولاعضاء منتداك او الزوار بتقليص او

احصائياتى

الردود
3

المشاهدات
686
abo-karim
.:: Administrator ::.
  • abo-karim is a glorious beacon of lightabo-karim is a glorious beacon of lightabo-karim is a glorious beacon of lightabo-karim is a glorious beacon of lightabo-karim is a glorious beacon of lightabo-karim is a glorious beacon of light

  • abo-karim غير متواجد حالياً

المشاركات
2,258

+التقييم
20

تاريخ التسجيل
Jun 2015

الاقامة
ام الدنيــ EGYPT ــا

نظام التشغيل
windows 7

رقم العضوية
1
02-17-2018, 05:00 PM
المشاركة 1
02-17-2018, 05:00 PM
المشاركة 1
افتراضي اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى بى
السلام عليكم ورحمه الله وبركاته
حاصية جديد وطريقة جديدة يتم اضافتها على الاسكريبت الاكثر من رائعه وهى خاصية Collapsible Node Categories والتى تتيح لم ولاعضاء منتداك او الزوار بتقليص او اخفاء اقسام المنتدى بالصفحة الرئيسية كما هو الحال فى منتديات الفى بى VB واليوم اقوم بطرحها لكم داعين المولى عز وجل ان يوفقنا جميعا الى ما هو خير لنا.
اسم الدرس : Collapsible Node Categories
التوافق الدرس : مع الجيل الثانى XF 2.0
صورة من العمل ونتيجته

اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى بى BLV5tGT.gif

الشرح
1- ادخل الى لوحة تحكم المنتدى >> المظهر >> البحث عن القوالب >> ابحث عن قالب اسمه node_list_category بداخله ابحث عن هذا الكود.
كود:
<div class="block block--category block--category{$node.node_id}">
استبداله بـــ
كود:
<div class="block block--category block--category{$node.node_id} collapsible-nodes">
2- فى نفس القالب ابحث عن
كود:
<h2 class="block-header">
اسفله ضع هذا الكود
كود:
<div class="block-header--left">
3- ثم ابحث داخل نفس القالب عن
كود:
<div class="block-desc">{$node.description|raw}</div></xf:if>
ضع بعدها
كود:
</div>
4- ثم ابحث عن
كود:
</h2>
ضع قبلها مباشره هذا الكود
كود:
<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>
5- ثم قم بالبحث عن
كود:
<div class="block-body">
استبداله بـــ
كود:
<div class="block-body block-body--collapsible is-active">
ثم قم بالحفظ

6 - توجه الان الى قالب اسمه extra.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%;
        }
    
    .block-body
    {
        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;
        &.is-active
        {
            height: auto;
        }
    }
}

/* Node Collapse end */
ثم احفظ
انتهى


من منكم احس الموضوع صعب ليها فقط باستبدال قالب node_list_category بالكامل بهذا القالب.
كود:
<xf:macro name="depth1" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="block block--category block--category{$node.node_id} collapsible-nodes">
        <span class="u-anchorTarget" id="{$node.Data.getCategoryAnchor()}"></span>
        <div class="block-container">
            <h2 class="block-header">
            <div class="block-header--left">
                <a href="{{ link('categories', $node) }}">{$node.title}</a>
                <xf:if is="{$node.description}"><div class="block-desc">{$node.description|raw}</div></xf:if></div>
<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>
            </h2>
            <div class="block-body block-body--collapsible is-active">
                <xf:macro template="forum_list" name="node_list"
                    arg-children="{$children}"
                    arg-extras="{$childExtras}"
                    arg-depth="{{ $depth + 1 }}" />
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro name="depth2" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <div class="node node--id{$node.node_id} node--depth{$depth} node--category {{ $extras.hasNew ? 'node--unread' : 'node--read' }}">
        <div class="node-body">
            <span class="node-icon" aria-hidden="true"><i></i></span>
            <div class="node-main js-nodeMain">
                <xf:set var="$descriptionDisplay" value="{{ property('nodeListDescriptionDisplay') }}" />
                <h3 class="node-title">
                    <a href="{{ link('categories', $node) }}" data-xf-init="{{ $descriptionDisplay == 'tooltip' ? 'element-tooltip' : '' }}" data-shortcut="node-description">{$node.title}</a>
                </h3>
                <xf:if is="$descriptionDisplay != 'none' && $node.description">
                    <div class="node-description {{ $descriptionDisplay == 'tooltip' ? 'node-description--tooltip js-nodeDescTooltip' : '' }}">{$node.description|raw}</div>
                </xf:if>

                <div class="node-meta">
                    <xf:if is="!{$extras.privateInfo}">
                        <div class="node-statsMeta">
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('threads') }}</dt>
                                <dd>{$extras.discussion_count|number}</dd>
                            </dl>
                            <dl class="pairs pairs--inline">
                                <dt>{{ phrase('messages') }}</dt>
                                <dd>{$extras.message_count|number}</dd>
                            </dl>
                        </div>
                    </xf:if>

                    <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'menu'">
                        <xf:macro template="forum_list" name="sub_nodes_menu"
                            arg-children="{$children}"
                            arg-childExtras="{$childExtras}"
                            arg-depth="{{ $depth + 1 }}" />
                    </xf:if>
                </div>

                <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
                    <xf:macro template="forum_list" name="sub_nodes_flat"
                        arg-children="{$children}"
                        arg-childExtras="{$childExtras}"
                        arg-depth="{{ $depth + 1 }}" />
                </xf:if>
            </div>

            <xf:if is="!{$extras.privateInfo}">
                <div class="node-stats">
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('threads') }}</dt>
                        <dd>{$extras.discussion_count|number}</dd>
                    </dl>
                    <dl class="pairs pairs--rows">
                        <dt>{{ phrase('messages') }}</dt>
                        <dd>{$extras.message_count|number}</dd>
                    </dl>
                </div>
            </xf:if>

            <div class="node-extra">
                <xf:if is="{$extras.privateInfo}">
                    <span class="node-extra-placeholder">{{ phrase('private') }}</span>
                <xf:elseif is="{$extras.last_post_date}" />
                    <div class="node-extra-row"><a href="{{ link('posts', {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.last_thread_title}">{$extras.last_thread_title}</a></div>
                    <div class="node-extra-row">
                        <ul class="listInline listInline--bullet">
                            <li class="node-extra-date"><xf:date time="{$extras.last_post_date}" /></li>
                            <xf:if is="$xf.visitor.isIgnoring($extras.last_post_user_id)">
                                <li class="node-extra-user">{{ phrase('ignored_member') }}</li>
                            <xf:else />
                                <li class="node-extra-user"><xf:username user="{{ {'user_id': $extras.last_post_user_id, 'username': $extras.last_post_username} }}" /></li>
                            </xf:if>
                        </ul>
                    </div>
                <xf:else />
                    <span class="node-extra-placeholder">{{ phrase('none') }}</span>
                </xf:if>
            </div>
        </div>
    </div>
</xf:macro>

<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">
    <li>
        <a href="{{ link('categories', $node) }}" class="subNodeLink subNodeLink--category {{ $extras.hasNew ? 'subNodeLink--unread' : '' }}">{$node.title}</a>
        <xf:macro template="forum_list" name="sub_node_list"
            arg-children="{$children}"
            arg-childExtras="{$childExtras}"
            arg-depth="{{ $depth + 1 }}" />
    </li>
</xf:macro>



hqhtm ohwdm Collapsible Node Categories ghothx hrshl hglkj]n fhgwtpm hgvzdsdm ;lh flkj]dhj hgtn fn hg[dg hgehkn xf 2>0 hpthx hglkj]dhj hothx hghrshl hpthx hg.dk t,v, hpthx hrshl hglkj]n collapsible categories collapsible node h/ihv hghrshl h/ihv hrhsl hglkj]n node categories


قديم 02-17-2018, 05:05 PM
المشاركة 2
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى
شباب للمزيد و اصل الموضوع
ستجدوه هنا
كود:
https://xenforo.com/community/resources/collapsible-user-extras.6180/

قديم 02-17-2018, 11:52 PM
المشاركة 3
طيور الظلام
.:: عضو فعال ::.
  • طيور الظلام غير متواجد حالياً
افتراضي رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى
مشاء الله

شرح مهم وكنت منتظره للجيل الاول

شكرا لك على الطرح

قديم 03-18-2018, 07:39 AM
المشاركة 4
legend
.:: عضو جديد ::.
  • legend غير متواجد حالياً
افتراضي رد: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى
شرح كافي ووافي. شكرا لك على هذه الاضافه.

اضافة رد

العلامات المرجعية

اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى بى


أدوات الموضوع

الانتقال السريع

المواضيع المتشابهه للموضوع: اضافة خاصية Collapsible Node Categories لاخفاء اقسام المنتدى بالصفحة الرئيسية كما بمنتديات الفى بى
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
طريقة فصل اقسام المنتدى بالصفحة الرئيسية XenForo هيلبرنت ركن شروحات الزين فورو XENFORO 4 06-08-2018 10:58 AM
[ شرح ] : طريقة تخصيص اقسام للنساء بمنتديات الزين فورو ومنع الذكور من الدخول الى اقسام النساء طيور الظلام ركن شروحات الزين فورو XENFORO 4 05-16-2018 03:06 AM
[XF 1.x Add] : هاك الاحصائيات اسفل المنتدى الشبيه بمنتديات الفى بى الان للزين فورو abo-karim اضافات الزين فورو XENFORO 12 03-14-2018 05:19 PM
[XF 2.x Add] : هاك اضافة ايقونات مكتبة الخطوط font awesome لقائمة العضو بالصفحة الرئيسية هيلبرنت اضافات الزين فورو XENFORO 3 01-19-2018 12:53 PM
اضافة رتب الاعضاء بالصفحة الرئيسية للمنتدى بدون هاك abo-karim ركن تطوير منتديات vb3.8.0 4 10-20-2015 12:58 AM




الساعة الآن 12:40 AM
Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.