[ تم الحل ] ممكن مساعده فى تنفيذ هذا فى الاستايل

[masrysat.com]

ممكن مساعده فى تنفيذ هذا فى الاستايل عندى بالمنتدى

 

[codeNET]

مشاهدة المرفق 1566
ممكن مساعده فى تنفيذ هذا فى الاستايل عندى بالمنتدى

اهلاً اخي ..
ان شاء الله اليلة اقدم لك الحلول لـ موضوعين حول نقل ايقونات الثيمات في الهيدر ، وايضًا ايقونة طي الاقسام وفتحها ..

تحياتي لك
اخوك مهدي حميد
@masrysat.com

 

[masrysat.com]

هل يوجد رد من احد على الموضوع

 

[shqawe]

حياك الله اخوي @masrysat.com واتمنى يا عزيزي تعذرنا على التأخر في الرد ولكن للناس ظروفها واشغالها خصوصا ً انك واضع الموضوع يوم الجمعة يعني اجازة والكل مشغول مع اهله فالصبر حلو وان شاء الله ما راح نتأخر عليك في الرد

عموما نرجع لسؤالك تفضل هذي الطريقة

ابحث عن هذا الكود في هذا القالب 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">

وايضا ابحث في نفس القالب عن هذا الكود

<h2 class="block-header">

واضف تحت هذا الكود

<div class="block-header--left">

وابحث عن هذا الكود

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

واضف تحته هذا الكود

</div>

وابحث عن هذا الكود في نفس القالب

 </h2>

واضف فوقه هذا الكود

<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>

ثم ابحث عن هذا الكود

<div class="block-body">

واستبدله بهذا الكود

<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">

اخيراً ضع هذا الكود في قالب extra.less

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            .m-faIcon(@fa-var-solid-chevron-down);
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            .m-faIcon(@fa-var-solid-chevron-up);
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

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

جرب ورد لي خبر بالنتيجة

احترامي وتقديري
اخوك
شقاوي

 

[masrysat.com]

الطريقه تعمل اخى ولاكن كود قالب extra.less بيعمل الاقسام الرئيسيه اتجاه اليمين وليس بالمنتصف كما اريد
واليك صوره


بعد وضع الكود

 

[shqawe]

بسيط الحل يالغالي استبد كود css بهذا الكود

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            .m-faIcon(@fa-var-solid-chevron-down);
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            .m-faIcon(@fa-var-solid-chevron-up);
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            text-align: center;
            width: 100%;
        }
}

وجرب ورد لي خبر

 

[masrysat.com]

بسيط الحل يالغالي استبد كود css بهذا الكود

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before
        {
            .m-faIcon(@fa-var-solid-chevron-down);
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            .m-faIcon(@fa-var-solid-chevron-up);
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            text-align: center;
            width: 100%;
        }
}

وجرب ورد لي خبر

تسلم الايادى يا محترم وجزيل الشكر للمساعده

 

[shqawe]

حياك الله يالغالي واسمح لي باغلاق الموضوع بما انه تم حل المشكلة.

احترامي وتقديري
اخوك
شقاوي