ملتقى قبيلة حرب الرسمي - هاك المتواجدون بالمربعات والالوان الجديد

السلام عليكم
نسبة لكثرة الطلب على هذا الهاك، حبيت اشارك ولو ببسيط فيه.
قمت بإجراء بعض التعديلات على هذا الهاك وهي :
1- يكون اسم العضو داخل مربع وبلونه المخصص في أي مكان يظهر فيه اسمه في المنتدى
2- عمل خلفية صور موحدة للمربعات أو تحديد خلفيات مختلفة لكل مجموعة
3- تحديد لون مخصص لكل مجموعة
4- يمكن إضافته بسهولة لكل استايل جديد
هذه بعض الصور للتوضيح:
1- صورة للذين تواجدوا اليوم :

http://www.sa-web.net/swalif/mrb3at/stat_today.jpg

2- للمتواجدين الآن:

http://www.sa-web.net/swalif/mrb3at/stat_header.jpg

3- صورة لعرض المشرفين :

http://www.sa-web.net/swalif/mrb3at/mod_col.jpg

أرجو الفائدة للجميع
واشكر صديقي عبد الله الزهراني لمعاونته لي في هذا المجال

طريقة التركيب

خطوة (1) إضافة الكود التالي لجميع الاستايلات في المنتدى

1- اذهب لخيار ( الستايلات & القوالب ) ثم (ضبط الستايلات ) - صورة (1)
صورة (1)
http://www.sa-web.net/swalif/mrb3at/01.jpg

2- أضغط ( اذهب ) على خيار ( خيارات جميع الستايلات ) - صورة (2)
صورة (2)
http://www.sa-web.net/swalif/mrb3at/02.jpg

3- اسفل الخيارات عند ( تعريف CSS إضافي ) وفي نهايته أضف الكود التالي: - صورة (3)
صورة (3)
http://www.sa-web.net/swalif/mrb3at/03.jpg

كود PHP:


		
			


.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'); 

text-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'); 

text-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'); 

text-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'); 

text-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'); 

text-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'); 

text-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'); 

text-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'); 

text-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'); 

text-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'); 

text-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'); 

text-align:center;

}

ثم أعمل حفظ من اسفل - صورة (4)
صورة (4)
http://www.sa-web.net/swalif/mrb3at/04.jpg

====================
خطوة (2)
1- اذهب لخيار ( المجموعات ) ثم ( ضبط إعدادات مجموعة الأعضاء ) - صورة (5)
صورة (5)
http://www.sa-web.net/swalif/mrb3at/05.jpg

2- أضغط ( اذهب ) على خيار ( تعديل المجموعة ) - صورة (6)
صورة (6)
http://www.sa-web.net/swalif/mrb3at/06.jpg

3- اضف الكود التالي على مرحلتين - صورة (7)
صورة (7)
http://www.sa-web.net/swalif/mrb3at/07.jpg

ضع code1 في مربع النص الأول - صورة (7)

code1: [ مهم: يجب تغيير كلمة ( red ) لكل مجموعة مثال (green - blue - pink ) ]

كود PHP:


		
			
<input type="text" name="T1" size="17" class="red" value="

code2 في مربع النص الثاني - صورة (7)

code2:

كود PHP:


		
			
" readonly style="width: 90">

ثم أضغط على زر ( تحديث ) في الاسفل - صورة (8)
صورة (8)
http://www.sa-web.net/swalif/mrb3at/08.jpg

===================
خطوة (3)
1- عمل تحديث للعدادات كما هو موضح في صورة (9) وصورة (10) وصورة (11)
صورة (9)
http://www.sa-web.net/swalif/mrb3at/09.jpg

صورة (10)
http://www.sa-web.net/swalif/mrb3at/10.jpg

صورة (11)
http://www.sa-web.net/swalif/mrb3at/11.jpg

===================
التعديلات التي يمكنك عملها:
صورة (12)
http://www.sa-web.net/swalif/mrb3at/12.jpg

صورة (13)
http://www.sa-web.net/swalif/mrb3at/13.jpg

1- كود حجم المربع : ( 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 = أبيض
---------------------

مع تحياتي

منقول للفائده