انشاء بلوك في القائمة الجانبية مع خصائص للاستايل ..!!

الحالة
مغلق و غير مفتوح للمزيد من الردود.

Turkialawlqy

xDeveloper
طاقم الإدارة
إنضم
1 فبراير 2012
الرسائل
1,895
الإعجابات
1,453
#1
بسم الله الرحمن الرحيم

السلام عليكم روحمة الله وبركاته

اسعد الله اوقاتكم بكل خير أحبتي اعضاء ومرتادي مجتمع دعم xenForo العربي
اليوم اقدم لكم شرح اعتبره مميز وخفيف وممتع في نفس الوقت

هنا سنستعرض بعض من مميزات نسخة xenForo الرائعه
واعتقد انها تخفى على الكثير لعدم وجود الشروحات الكافيه لخصائص النسخه

قبل كل شيء يجب ان تكون لديك خطه عمل >> حلوه هذه :D

ماذا تريد من البلوك الجانبي ( ماهو عمله )

كمثال هنا في المجتمع لدينا بلوك ( إصدارات XenForo )

وهناك خصائص له في الاستايل وهذه صورة للخصائص

1.png



كما تلاحظون هنا في الصورة
هذه الخيارات تغني عن الدخول لتعديل القوالب واللخبطه فيها >> مدري من وين جاية اللخبطه ;)

بعد هذه المقدمة ناتي الى تطبيق خطوات العمل :
حظر لك كاس شاي او ( كافيه ) >> مدمن كافيه :rolleyes:
يجب ان يكون الديباج مفعل ولتفعيله ( قم باضافة السطر التالي الى ملف config.php )
ضع الكود في آخر الملف
HTML:
$config['debug'] = '1';
وابدأ بتخطيط عملك

هنا ساضع لكم بلوك يستعرض نجم الاسبوع او الشهر :cool:

أذهب الى لوحة التحكم وانتقل الى تاب اللغات و الاستايلات

انتقل الى ايقونة خصائص الستايل
واعمل إضافة مجموعة جديدة مثل الصورة التالية
3.png


اتبع الخطوات بالصور

4.png


5.png


انتبه لاسم الخاصية سنستخدمه فيما بعد

6.png


هنا تم عمل حقل اسم البلوك لكي نستطيع التعديل في اي وقت لو احببت وضع نجم الاسبوع او الشهر او اليوم وغيرها

لاحظ معي في هذه الصوره
7.png


هنا توجد خيارات متعدده ونستطيع استخدامها في عدة امور
مثل لون الخط ونوعه وخلفيه الخط او البلوك
كل هذه الوظائف تستطيع استخدامها وتوظيفها في البوك حسب خبرتك في html و css

ثم نقوم بعمل خاصية جديدة
بنفس خصائص الخاصية اسم البلوك مع تغيير اسم الخاصية وانا استخدمت
title_xf_Star_Week

ايضاً نقوم بعمل خاصية جديدة لكن تكون رقمية
ولعمل ذلك بدلاً من اختيار String نختار Number (with or without units)

لكي تحتوي على id العضو

سيتكون لدينا الشكل التالي

8.png


الان انتقل الى ايقونة القوالب وابحث عن القالب
sidebar_online_users ~~> ليس بالضرورة اتباع خطواتي في القوالب والاكواد التي اقوم بعملها

نبحث عن الكود التالي
HTML:
<div class="footnote">
نجد بعده سطر وبعد السطر </div></div> شاهد الصورة لكي تتضح لك الفكره اكثر
2.png

ضع اسفل منهم الكود الذي ستعمل عليه
انا ساقوم بوضع الكود التالي

HTML:
<!-- Turki -->
<br />
<div class="secondaryContent">
<h3>@title_xf_Star_Week</h3>
<xen:if is="@name_xf_Star_Week">
<ol><li>
<dl class="ctrlUnit submitUnit">
  <dt><a href="?members/@id_xf_Star_Week/">@name_xf_Star_Week</a></dt>
</dl></li></ol>
</xen:if>
</div>
<!-- Turki -->
لاحظ انني استخدمت :
  1. @title_xf_Star_Week
  2. @name_xf_Star_Week
  3. @id_xf_Star_Week
وهي إسم الخاصية التي قمنا بعملها في السابق من مجموعة نجم الاسبوع التي تم انشائها من قبلنا

احفظ عملك

توجه لخصائص الاستايل ثم اختر نجم الاسبوع
ضع فيه البيانات التي تريد مثل
9.png


توجة الى رئيسية المنتدى وشاهد النتيجة

10.png


هنا لم استخدم اي من جماليات html او css

فقط اردت ايصال فكره العمل والجماليات تتوقف على حسب ذوق ومنشئ الكود


في الاخير ان وفقت فمن الله عز وجل وان اخطأت فمن نفسي والشيطان

أخوكم / تركي العولقي
 
إنضم
4 فبراير 2012
الرسائل
468
الإعجابات
92
العمر
37
#2
يسعدني ان اكون اول من يطلع على ابداعك هذا اخي تركي.
فعلاً وبكل صدق انها فكرة اكثر من رائعة.

سيكون لي عودة قريبة ان شاء الله بعد التنفيذ، وأمال الا ازعجكم باسئلتي المعروفة :)

دمت بحفظ الرحمن
 

Turkialawlqy

xDeveloper
طاقم الإدارة
إنضم
1 فبراير 2012
الرسائل
1,895
الإعجابات
1,453
#3
الله يسعد ايامك أخي عدنان
وتحت أمرك في اي وقت وحاضرين لاي أستفسار
 
الحالة
مغلق و غير مفتوح للمزيد من الردود.