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

[MS HMS]

السلام عليكم ورحمة الله وبركاته

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

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

الطريقه

خطوة (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:
[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:
type="text" name="T1" size="17" class="red" value="



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



كود 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 = أبيض

[فايق ورايق!]

هاك / يعني أخذ الشي بيمناك ؛
لا يا شيخ
درس مفيد وقيم للفاغرين مثلي
أحسنتي

[حنايا الفجر]

سَلِمتَ يُمنَآكِ المُخمليِهَ لِ جلبهآ المُتميزَ
جَزيَلِ شُكِريَ
..ْ~|
:81::58:

[الخل الوفي]

فخاااامة وابداااع
الله يسعد قلبك
يعطيك العافية

[الخل الوفي]

فخاااامة وابداااع
الله يسعد قلبك
يعطيك العافية

[صاحبة السمو]

||~ْ

ابداع في الطرح
يعطيك العافية على ماقدمت
لقلبك السعادة

||~ْ

[كبرياء أنثى]

سلمت أناملك على هذا الجمال ..
فكل الشكر لسموك ..بإنتظآر جديدك بكل شوق ..
لروحك جنآئن الورد و الياسمين

[شموع الحب]

تسلم الآيادي
شكرآ لك على طرحك ومجهودك
الله يعطيك العافية
تحيــــاتي لك

[شموخ وايليه]

,/،
سلمت اناملك ويعطيك الله العافيه على مجهودك
والمزيد من عطائك ومواضيعك الرائعه والجميله
ودائما في إبداع مستمرفي أنتظار المزيد
ربي يحفظك

[MS HMS]

ملكة الاحساس......|
.
.
ولعطرك حضور طااغي

انرتي صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[MS HMS]

الخل الوفي......|
.
.
ولعطرك حضور طااغي

انرت صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[MS HMS]

شموخ وايليه.
.
ولعطرك حضور طااغي

انرتي صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[MS HMS]

شموع الحب......|
.
.
ولعطرك حضور طااغي

انرتي صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[MS HMS]

فايق ورايق......|
.
.
ولعطرك حضور طااغي

انرت صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[MS HMS]

كبرايء انثي......|
.
.
ولعطرك حضور طااغي

انرتي صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[MS HMS]

قناديل الوفاء......|
.
.
ولعطرك حضور طااغي

انرتي صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[MS HMS]

كبرياء انثي......|
.
.
ولعطرك حضور طااغي

انرتي صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[خياط]

,‘*
أختيااار أكـثر من رااائـع ’
وُجودك لـه وآقعٌ مُختلف / وكله تميز ..
شُكراً تمتد عميقاً وتنتشي لك بالورد
|‘,:118:

[الم ونظرة امل]

يعطيك العافيه
لاعدمنـآ هذا الجمال بالطرح..
بإنتظآرجديدك بكل شوق..
ودي وشذى الورد..

[آختناقآت صمآء]

سلمت يمينك النديه بالجمال
على شذرات الحُضور وعبق المنثور ..
يعطيك العافية على ثمرات جهودك ..
شكري وتقديري .

[ضوء القمر]

*,


سلمت الآكف ومَاجلبت
إبداع دآئم وتميز مُستمر
لا عدمنَاك /
:137:

[MS HMS]

ضوء القمر......|
.
.
ولعطرك حضور طااغي

انرتي صفحتي بتواجدك النقي

لاعدمنا اطلالتك الانيقه

وردة1

[سالمين]

طرح رآئع وراقي
تحية عطرة ل روحك الجميلة

[القيصر]

,
















سلمت يداك على الطرح الجميل
ننتظر القادم بكل شوق
ودي وتقديري ,

[حنو]

طرح رآقي گ روحـگ
لآعدمنا جمآل ذآئقتگ
تحية صادقه من الاعماق
وبآنتظار جديد آبداعكگ دائمآ
ودي لگ
http://i.imgur.com/iopMqmx.png