هاك تلوين المسميات في مربعات شرح كامل

[عذب القوافي]

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


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

.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 ) ]

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

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

" 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
[RIGHT]
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 = أبيض
---------------------
منقول للفائده

[حلم الخيال]

للرفع لكثرة الطلب من الاعضاء

[ظنــانـي الشــوق]

عذب القوافي



تسلم والله يعطيك العافيه

[كروز]

عذب القوافي
تسلم على الشرح المميز وتم اتباعه نفس الخطوات
والحمد لله كل شيء تمام التمام .
ولكن سؤال:
لو اردت وضع لون مثل :
darkblue
واستخدامه للمشرفين بدلا من blue لوحده
كيف يتم ؟
تحياااتي

[الإبتسـامه الدامعـه]

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







تحيتي

[شقاوي الليل]

تسلم يا الغالي عذب القوافي

على الشرح

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

[نايف العنزي]

عذب القوافي
تسلم على الشرح المميز وتم اتباعه نفس الخطوات
والحمد لله كل شيء تمام التمام .
ولكن سؤال:
لو اردت وضع لون مثل :
darkblue
واستخدامه للمشرفين بدلا من blue لوحده
كيف يتم ؟
تحياااتي

هلا أخــوي
اذا تبي تغيــر للون اتبع الطريـقه ..
<input type="text" name="T1" size="17" class="blue" value="



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

^
^
لاحظ نفس الشئ الرابطيـــن بس اذا بغيت تغير لون تغير اللي حاطهم لــك بلون الاحمــر

للون الي يعجبــك يعني ماتغير شئ غيرهــا طبعا تحطها باول مستطيل

وان شالله وصلــت المعلومه خيو :poster_baaa[1]:

[mamoon]

الله يعطيك الف عافية

شرح مبسط وسهل

دائما انت مبدع


تحياتي

[جنتل]

تسلم اخوي عذب القوافي

على الشرح

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

خالص تحياتي لك
اخوك جنتل

[عذب القوافي]

شكرا للجميع على المرور

اخوي كروز للتحكم اكثر بلون المسميات وان رغبت بلون لم تجده

غير من هنا

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

حط لون الكود واسمه غيره من المجموعه ليطابق

بالتوفيق

[@الساحر@]

اخوي عذب

عندي مشكلة بتركيب هذا الهاك

تطلع الكتابة مثلا عذب القوافي ملطوشة على اليمين من المستطيل

هاي شلون؟

[almbd3]

مشكوور وجزاك الله خير

[سام جدا]

يعطيك العافية اخوي عذوووووووووب

لكن اذا جيت اسوي حفظ يطلعني برا لوحةالتحكم


ايش الحل

[الزعيم كووول]

اخي شرح رائع بس المشكله عندي الاسم ما جاء في نصف المربع الاسم


كيف بدي اوسط الاسم في المربع جاي في طرف المربع

انظر

http://www.dreeim.info/vb/index.php

[ملك الغرام]

5- كود صورة الخلفية للمربع : ( background-image: url('altaer/color_bg.gif'); ) - صورة (12) تحديد (5)

الرابط حق الكود فين اجـده
altaer/color_bg.gif

لأنه كل شوي يجلس يحمل واتبعت الرابط ولم اجد له اي صورة وقمت بلغيه حذفه ولازال يحمل ولكن برابط المنتدى الأساسي مما سبب لي بطي كبير

[الساحر الحزين]

مشكور اخى العزيز


وجارى التجربة


تحياتى

[§العاشق المجروح§]

شكرا اخى الغالى عذب القوافى

[الشهيد المصري]

اخى عذب القواقى

تسلم اخى على هذا المجهود الجبار

[الصفر الجارح]

عذب القوافي
تسلم على الشرح المميز وتم اتباعه نفس الخطوات
والحمد لله كل شيء تمام التمام .

[شبكة الأثير]

مشكور

[أبوفيصل]

عذب القوافي

مشكور والله يعطيك العافية

أجمل تحية

[رونـــا]

مره حلو

مشكوووور