إحصائية العضو
لسلام عليكم نسبة لكثرة الطلب على هذا الهاك، حبيت اشارك ولو ببسيط فيه. قمت بإجراء بعض التعديلات على هذا الهاك وهي : 1- يكون اسم العضو داخل مربع وبلونه المخصص في أي مكان يظهر فيه اسمه في المنتدى 2- عمل خلفية صور موحدة للمربعات أو تحديد خلفيات مختلفة لكل مجموعة 3- تحديد لون مخصص لكل مجموعة 4- يمكن إضافته بسهولة لكل استايل جديد هذه بعض الصور للتوضيح: 1- صورة للذين تواجدوا اليوم : 2- للمتواجدين الآن: 3- صورة لعرض المشرفين : أرجو الفائدة للجميع واشكر صديقي عبد الله الزهراني لمعاونته لي في هذا المجال طريقة التركيب خطوة (1) إضافة الكود التالي لجميع الاستايلات في المنتدى 1- اذهب لخيار ( الستايلات & القوالب ) ثم (ضبط الستايلات ) - صورة (1) صورة (1) 2- أضغط ( اذهب ) على خيار ( خيارات جميع الستايلات ) - صورة (2) صورة (2) 3- اسفل الخيارات عند ( تعريف CSS إضافي ) وفي نهايته أضف الكود التالي: - صورة (3) صورة (3) .red { margin: 0px 0px 0px 0px; width:48; border: 2px solid #FF1515; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#FF1515; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .green { margin: 0px 0px 0px 0px; width:48; border: 2px solid #006600; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#006600; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .blue { margin: 0px 0px 0px 0px; width:48; border: 2px solid #0000FF; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#0000FF; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .gray { margin: 0px 0px 0px 0px; width:48; border: 2px solid #CCCCCC; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#CCCCCC; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .fushia { margin: 0px 0px 0px 0px; width:48; border: 2px solid #FF66CC; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#FF66CC; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .orang { margin: 0px 0px 0px 0px; width: 48; border: 2px solid #FF9900; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#FF9900; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center } .teal { margin: 0px 0px 0px 0px; width: 48; border: 2px solid #008080; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#008080; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .brown { margin: 0px 0px 0px 0px; width: 48; border: 2px solid #BF0000; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#BF0000; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .pink { margin: 0px 0px 0px 0px; width: 48; border: 2px solid #CC33FF; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#CC33FF; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .black { margin: 0px 0px 0px 0px; width: 48; border: 2px solid #000000; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#000000; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } .white { margin: 0px 0px 0px 0px; width: 48; border: 2px solid #ffffff; cursor: pointer; font-family:MS Sans Serif; font-size:10px; vertical-align:middle; letter-spacing:0; color:#ffffff; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; background-color:#FFE3DF; background-image: url('altaer/color_bg.gif'); ....-align:center; } ثم أعمل حفظ من اسفل - صورة (4) صورة (4) خطوة (2) 1- اذهب لخيار ( المجموعات ) ثم ( ضبط إعدادات مجموعة الأعضاء ) - صورة (5) صورة (5) 2- أضغط ( اذهب ) على خيار ( تعديل المجموعة ) - صورة (6) صورة (6) 3- اضف الكود التالي على مرحلتين - صورة (7) صورة (7) ضع code1 في مربع النص الأول - صورة (7) code1: [ مهم: يجب تغيير كلمة ( red ) لكل مجموعة مثال (green - blue - pink ) ] <input type="...." name="T1" size="17" class="red" value=" code2 في مربع النص الثاني - صورة (7) code2 " readonly style="width: 90"> ثم أضغط على زر ( تحديث ) في الاسفل - صورة (8) صورة (8) خطوة (3) 1- عمل تحديث للعدادات كما هو موضح في صورة (9) وصورة (10) وصورة (11) صورة (9) صورة (10) صورة (11) التعديلات التي يمكنك عملها: صورة (12) صورة (13) - كود حجم المربع : ( width: 48; ) - صورة (12) تحديد (1) 1- كود نوع الخط : ( font-family:MS Sans Serif; ) - صورة (12) تحديد (2) 3- كود لون خلفية المربع : ( background-color:#FFE3DF; ) - صورة (12) تحديد (3) 4- كود لون النص داخل المربع : ( color:#ffffff; ) - صورة (12) تحديد (4) 5- كود صورة الخلفية للمربع : ( background-image: url('altaer/color_bg.gif'); ) - صورة (12) تحديد (5) 6- كود اللون الخاص بالمجموعة في خطوة (2) مهم جدا : ( class="red" ) صورة (13) تحديد (1) استبداله باسم المجموعة الخاصة بالكود المراد استخدامه لمجموعة المستخدمين في خطوة (2) عند ( code1 ) --------------------- ملحوظة : مجموعات الألوان كالتالي: .red = أحمر - .green = أخضر - .blue = أزرق - .gray = رمادي - .fushia = فوشي .orang = برتقالي - .brown = بني - .pink = بنفسج - .black = اسود - .white = أبيض ---------------------