شرح تركيب أيقونات الأقسام لمنتدى vbulletin الجيل الرابع vb 4.1 بدون هاك

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

سأشرح لكم اليوم طريقة تركيب أيقونات ( صور الأقسام ) للمنتدى
الطريقة تصلح لكافة نسخ الجيل الرابع vb 4.x.x
وما أظن أنها شرحت بهذه الطريقة من قبل
حيث أنني اعتمدت في الطريقة على بعض التعديلات في الأكواد وبدون أي هاك
والشرح مهدى لأخي فواز بمناسبة افتتاح منتداه الجديد

المثال :

الشكل الافتراضي	الشكل بعد تركيب الأيقونات

الطريقة :

ادخل إلى لوحة تحكم المنتدى ثم الإستايلات والقوالب ثم البحث في القوالب واكتب

forumhome_forumbit_level1_post

ثم ادخل إلى القالب المذكور
ابحث عن

احذفه وضع بدلاً منه:

للمستخدمين المتقدمين : كرر العملية على قالب forumhome_forumbit_level2_post
للمستخدمين الجدد : الشرح بشكل مفصل لتكرار العملية على القالب forumhome_forumbit_level2_post :
ابحث عن القالب

forumhome_forumbit_level2_post

ابحث بداخله عن

واستبدله بـ:

الآن علينا رفع صور الأيقونات إلى الموقع
ندخل إلى لوحة تحكم الموقع cpanel أو باستخدام برامج ftp
ندخل إلى مجلد المنتدى vb ثم images ونقوم بإنشاء مجلد بداخله باسم tahasoft_icons
ونضع بداخل هذا المجلد صور الأقسام حيث نسمي كل صورة برقم (رقم القسم)



طيب الأغلب يتساءل الآن كيف أعرف ماذا أسمي الصور ومن أي أتت هذه الأرقام
الجواب : إن لكل قسم بالمنتدى رقم يمكنك معرفته بالطريقة التالية
بكل بساطة مرر مؤشر الماوس فوق القسم وانظر إلى الرقم الذي يظهر في أسفل المتصفح


مثلاً في منتدانا رقم قسم برامج التصميم والجرافيكس هو 14
وهذا يعني أننا نرفع صورة باسم

 14.jpg

إلى المجلد tahasoft_icons فتظهر الصورة
وهكذا نتابع مع كافة الأقسام
ملاحظة مهمة : امتداد الصورة يجب أن يكون jpg

إضافات متقدمة:

ما ذكر سابقاً يكفي لظهور الأقسام
ولكن سأتوقف عند هذه المحطة لمن يحب الاستفاضة في الشرح وسأشرح لكم الكود الذي أضفناه كونه من كتابتي

الوسم a لإضافة رابط على الصور والرابط هو
{vb:link forum, {vb:raw forum}}
وهي تعني رابط القسم نفسه
ثم أضفنا وسم img لإضافة الصورة وأضفنا لها صنفين css هما forumicon rotate
forumicon من أساسيات المنتدى لتنسيق الأيقونة
rotate إضافي من عندي لجعل الصورة تدور عند الوقوف فوقها ويمكنك حذفه ( سأتحدث عنه أكثر بعد قليل )
مصدر الصورة src وضعنا فيه مسار مجلد الأيقونات
images/tahasoft_icons/
وأتبعناه بالصورة حيث إن {vb:raw forum.forumid} هو متغير يعبر عن رقم القسم
وهنا فكرة الكود كله تكمن بهذا المتغير
ثم وضعنا id الصورة وأغلقنا الوسوم

جعل الصورة تدور عند الوقوف عليها:
وضعنا الصف rotate للصورة والآن سنضع قيم هذا الصف
نبحث عن القالب vbulletin.css
ثم نضيف في آخره كود css3 التالي

img.rotate{

-webkit-transition: all 500ms ease-in 0ms;

-moz-transition: all 500ms ease-in 0ms;

-o-transition: all 500ms ease-in 0ms;

transition: all 500ms ease-in 0ms;

}

علماً أن هذا المؤثر لن يظهر على كل المتصفحات بل يظهر فقط على المتصفحات الحديثة التي تدعم css3
وإذا حدا بيحب نشرح كود css3 هذا فأنا جاهز