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

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

http://www.sa-web.net/swalif/mrb3at/stat_today.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; }

</div>

ثم أعمل حفظ من اسفل - صورة (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 ) ]

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

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

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

ودمتم سالمين