هاك المتواجدون بالمربعات والالوان

[القــناص]

هاك المتواجدون بالمربعات والالوان
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');  
text-align:center; 
} 

.green 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 1px solid #008000; 
cursor: pointer; 
font-family:MS Sans Serif;  
font-size:10px;  
vertical-align:middle;  
letter-spacing:0;  
color:#008000;  
padding-left:0;  
padding-right:0;  
padding-top:0;  
padding-bottom:0;  
background-color:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
} 

.blue 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
} 

.gray 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
} 

.fushia 
{ 
margin: 0px 0px 0px 0px; 
width:48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
} 

.orang 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center 
} 

.teal 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
} 

.brown 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
} 

.pink 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
} 

.black 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
} 

.white 
{ 
margin: 0px 0px 0px 0px; 
width: 48; 
border: 1px 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:#F0FFFF; 
background-image: url('altaer/color_bg.gif');  
text-align:center; 
}

ثم أعمل حفظ من اسفل - صورة (4)
صورة (4)


خطوة (2)
1- اذهب لخيار ( المجموعات ) ثم ( ضبط إعدادات مجموعة الأعضاء ) - صورة (5)
صورة (5)


- اضف الكود التالي على مرحلتين - صورة (7)
صورة (7)

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



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

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

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

" readonly style="width: 90">

ثم أضغط على زر ( تحديث ) في الاسفل - صورة (8)
صورة (8)

[اسير الحب]

يعطيك العافيه اخوي

مشكور على الشرح الرائع والوافي

ومنك نستفيد ان شاء الله

[القــناص]

العفو الغالي هذا واجبي لاني ابن شبوووة

[شرطان الذهب]

الف شكر حبيبي على الشرح ما قصرت

جزاك الله خير