ان كنت استفدت من محتوى المنتدى فاضغط على الاعلانات..

جافاسكربت + Css لتغير لون خلفية مثبت واعلانات وغيرها

  افضل مساهمة1
new.moon
[size=32]جافاسكربت + Css لتغير لون خلفية مثبت واعلانات وغيرها [/size]



هذه الدرس التعليمي التالي سوف يسمح لك لعرض لون محدد لالمثبتة والاعلانات فى منتدى الخاصة بك. بهذه الطريقة سيتم تسليط الضوء رسائل مهمة في الاقسام الفرعيه الخاص بك.

كما تم تفعيلها على المركز التقني لاحلى منتدى والمشاهده التاليه

كما تلاحظون اصدقائي اخترت ايقونه تم الحل ووضع خلفيه بالكامل لها ..

هذه الدرس ينطبق على نسخ المنتديات التاليه : phpbb2, phpbb3, punbb, invision

قبل إجراء أية تغييرات، تأكد من أن منتداكم يلبي الشروط التالية:
- تنشيط رموز جافا سكريبت

 1- الجافاسكربت












لوحة الأداره >> عناصر اضافية >> HTML و JAVASCRIPT >> اداره اكواد javascript >> انشاء كود جديد +



يجب أختيار : المنتديات الثانوية


أذا كنت تستخدم النسخ التالية phpbb2, punbb, أو invision  أضف هذه الكود

الكود:
$(function() {
  /* أضافة الى الأعلانات */
  $('img[src="http://url_image_annonce.jpg"]').closest('tr').addClass('annonce');
  /* اضافه الى المثبت */
  $('img[src="http://url_image_Note.jpg"]').closest('tr').addClass('Note');
});

أذا كنت تستخدم النسخة phpbb3 أستخدم الكود التالي


الكود:
$(function() {
  /* أضافة الى الأعلانات */
  $("dl.icon[style*='http://url_image_annonce.jpg']").addClass("annonce");
  /* اضافه الى المثبت */
  $("dl.icon[style*='http://url_image_Note.jpg']").addClass("Note");
});


معلومات حول الأكواد:











في كل من الأكواد أعلى، تأكد من تغيير عناوين الصورة مع تلك التي تستخدمها على الموضوع الخاص بك:- http://url_image_annonce.jpg : هذه الصورة تستبدل بصورة الأعلانات 
http://url_image_Note.jpg : هذه الصورة تستبدل بصورة المثبتة

عند الأنتهاء تأكد من حفظ الكود. 


2- أضافة كود CSS












بعد الأنتهاء من تركيب الجافاسكربت يجب أضافة أكواد CSS التالية لتنسيخ خلايه الكود

أذهب الى لوحة الأدارة>> مظهر المنتدى >> اللوان >> ورقة CSS وضع الكود الذي يتناسب مع نسخه منتداك ..

كود التالي يتناسب مع phpBB2, punBB , Invision  




الكود:
tr.annonce td {background-color:#COLOR!important;} /* أضافة لون خلفيه للأعلانات*/
 tr.Note td {background-color:#COLOR!important;} /* أضافة لون خلفية للمثبت */


كود للنسخه phpBB3

الكود:
dl.annonce {background-color:#COLOR!important;} /* أضافة لون خلفيه للأعلانات*/ 
dl.Note {background-color:#COLOR!important;} /* أضافة لون خلفية للمثبت */

معلومات مهمه :

- يجب تغير كلمه COLOR الى اللون الذي تريده للخفيه ضع رمز اللون فقط
- الموقع التالي يساعدك http://www.colorpicker.com/

ملاحظة - اذا كنت تعرف طريقة استخدام CSS يمنكك ايضا وضع اكواد css تأثيرات اضافية وخط وحجم وغيرها للاعلانات والمثبت

جاري تحظير الشرح التالي لأضافتها لباقي الصور مثل تم حل الموضوع وايقونات اخرى 





m13
  افضل مساهمة2
كود مفيد جدا

شكرا جزيلا لك
  افضل مساهمة3

شكرا جزيلا لك
  افضل مساهمة4
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة 
إنـجاز أكثر رائــــــع 
لكن أرجو منكَ عدم التوقف عند هذا الحد 
مـنتظرين ابداعتــــــك 
دمتـ ودام تألقـك 
تحياتــي
لاتستطيع الرد على المواضيع في هذا المنتدى