شرح إضافة قائمة منسدلة احترافية إلى الهيدر في XenForo 2.3

  • بادئ الموضوع بادئ الموضوع codeNET
  • تاريخ البدء تاريخ البدء
codeNET

codeNET

Administrative
طاقم الإدارة
ادارة كود نت
السمعة: 96%

إضافة قائمة منسدلة احترافية إلى الهيدر في XenForo 2.3​


إذا كنت ترغب بإضافة زر يحتوي على قائمة منسدلة داخل الهيدر في منتدى XenForo، فهذا التعديل يوفر لك طريقة بسيطة وأنيقة لإضافة قائمة مخصصة تظهر داخل شريط التنقل العلوي.

التعديل متوافق مع إصدار XenForo 2.3 ولا يحتوي على علامة تجارية ظاهرة، كما يمكن تخصيص الروابط والألوان بسهولة بما يتناسب مع تصميم منتداك.

مميزات التعديل​


  • إضافة قائمة منسدلة داخل الهيدر.
  • سهولة تخصيص الروابط والأزرار.
  • تصميم خفيف ومتوافق مع أغلب الاستايلات.
  • إخفاء الزر تلقائيًا على الهواتف الصغيرة.
  • لا يحتاج إلى إضافات خارجية.

طريقة التركيب​


قم بالدخول إلى لوحة التحكم ثم توجه إلى:

كود: 
Appearance > Templates

بعدها افتح قالب:

كود: 
PAGE_CONTAINER

وابحث عن الكود التالي:

HTML: 
<xf:if is="$xf.options.registrationSetup.enabled">
    <a href="{{ link('register') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--register"
        data-xf-click="overlay" data-follow-redirects="on">
        <span class="p-navgroup-linkText">{{ phrase('register') }}</span>
    </a>
</xf:if>
</xf:if>
</div>

ثم أضف الكود التالي أسفله مباشرة:

HTML: 
<div class="trxf-yardim-butonu" data-xf-click="menu" aria-label="Daha fazla seçenek" aria-expanded="false" aria-haspopup="true">
    Yardım istiyorum!
</div>

<div class="menu" data-menu="menu" aria-hidden="true">
    <div class="menu-content">
        <a href="/resources/categories/template-modifications-2-x.2/" class="menu-linkRow">- XNFORO.IR</a>
        <a href="/resources/categories/template-modifications-2-x.2/" class="menu-linkRow">- XNFORO.IR</a>
        <a href="/resources/categories/template-modifications-2-x.2/" class="menu-linkRow">- XNFORO.IR</a>
        <a href="/resources/categories/template-modifications-2-x.2/" class="menu-linkRow">- XNFORO.IR</a>
    </div>
</div>

إضافة أكواد CSS​


الآن توجه إلى قالب:

كود: 
extra.less

وأضف الكود التالي:

CSS: 
.trxf-yardim-butonu {
    background: #f2930d;
    color: #ffffff;
    display: inline-block;
    padding: 0 calc(20 * 1px);
    font-size: 15px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    transition: all 300ms;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    margin-left: 8px;

    &:after {
        .m-faContent(@fa-var-level-down);
    }
}

@media (max-width: 650px) {
    .trxf-yardim-butonu {
        display: none;
    }
}

شرح التعديل​


يقوم هذا الكود بإضافة زر جديد داخل شريط التنقل العلوي، وعند الضغط عليه تظهر قائمة منسدلة تحتوي على روابط مخصصة يمكنك تعديلها حسب احتياجات منتداك.

كما أن التعديل يحتوي على تنسيق CSS جاهز يمنح الزر شكلًا احترافيًا مع دعم إخفائه تلقائيًا على الشاشات الصغيرة لتحسين التوافق مع الهواتف.

تخصيص الروابط​


يمكنك تغيير الروابط الموجودة داخل القائمة بسهولة عبر تعديل هذا الجزء:

HTML: 
<a href="الرابط" class="menu-linkRow">اسم الرابط</a>

ويمكنك إضافة عدد غير محدود من الروابط داخل القائمة.

ملاحظات مهمة​


  • يفضل أخذ نسخة احتياطية قبل تعديل القوالب.
  • قد تحتاج لتعديل الألوان لتتناسب مع الاستايل المستخدم.
  • يمكن تغيير نص الزر من:
    كود: 
    Yardım istiyorum!

    إلى أي نص عربي تريده مثل:
    كود: 
    روابط مهمة
  • متوافق مع XenForo 2.3.

الخلاصة​


إذا كنت تريد إضافة قائمة منسدلة بسيطة وأنيقة داخل هيدر منتدى XenForo بدون استخدام إضافات خارجية، فهذا التعديل يعتبر خيارًا ممتازًا وسهل التخصيص ويمنح منتداك مظهرًا أكثر احترافية وتنظيمًا.
 
ملاحظة صديقي :
ياريت مثل هذه التعديلات تكون مصورة او أمثلة عليها حتى لا يتعب عليه عضو و بالنهاية لا تعجبه ...
 
for sat قال:
ملاحظة صديقي :
ياريت مثل هذه التعديلات تكون مصورة او أمثلة عليها حتى لا يتعب عليه عضو و بالنهاية لا تعجبه ...
أنقر للتوسيع...
ان شاء الله استاذنا ..
ساحرص على النشر المصور ..
 
يجب تسجيل الدخول أو التسجيل كي تتمكن من الرد هنا.
عودة
أعلى أسفل