زهير طه

32

8,290

شرح تركيب أيقونات الأقسام لمنتدى 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 هذا فأنا جاهز

التعليقات (2)

خادم القرآن     
شكراً أخي زهير تك التطبيق بنجاح

ولكن فقط التأثيرات على الصور لم تظهر، مع أني طبقت الشرح تمام

ما عم تصير شو السبب
فواز باراوي     
بارك الله بك جاري التجريب
وأنا بحثت عن وضع صور بجانب للأقسام - وجدت احد المواضيع ، وطبقت ما به ولكن للأسف لا يطلع صوره بجانب القسم ، معنى هذا ان امسار خاطىء



بحثت وفكرت وقمت بقليل من المحاولات حتى نجحت الطريقه

- سهله جدا ولا داعي لأي قوالب أو برودكت


1- نروح لخيار المنتديات والمراقبين
2- نروح لخيار المنتديات ، ونضغط على اسم القسم الذي نريد ان نضع به الصوره

3- عند عنوان القسم ( نجد مثلا - قسم الفوتوشوب )

4- في داخل المربع نضع هذا الكود قبل اسم القسم (

5- ونغير رمز xxx برقم الصوره المراد وضعها

6- عند حفظ الأمر نجد الإسم بجانبه صوره ولكن احتمال ان تأتي بعلامة x اي ان المسار خطأ



هنا حل المشكله

1- الملف المرفق اسمه icons ( نضعه في مجلدين لظهور الصور )

a- داخل المجلد admincp
b- داخل المجلد vb

وهنا تجد الصور موجوده بجانب الأقسام وتستطيع ان تضع ما تشاء من صور