شرح تركيب هاك الاعضاء بالمربعات والالوان بالصور

[فادي القدس]

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

مثال

http://www.yesmeno.com/sh/alqab/0.jpg

طريقة التركيب :
الخطوة اضف الكود التالي الى جميع ستايلات المنتدى
وهي بالطريقة التالية
نضغط ادارة الاستايلات
http://www.yesmeno.com/sh/alqab/1.jpg
يظهر لنا قائمة الاستايلات
نضغط على قائمة الستايل ونختار منها
css رئيسي
تابع الصورة
http://www.yesmeno.com/sh/alqab/2.jpg
بعد ذلك نذهب الى
تعاريف css الاضافية
ونضيف الأكواد في نهايته
تابع الصورة
http://www.yesmeno.com/sh/alqab/3.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;
}
بعد ذلك نذهب الى
مجموعات الاعضاء >> التحكم بالمجموعات
http://www.yesmeno.com/sh/alqab/4.jpg
نضغط تحرير على المجموعة المطلوبة
http://www.yesmeno.com/sh/alqab/5.jpg
بعد ذلك نضيف الاكواد رقم 1 بمربع النص الأول
والأكواد رقم 2 بمربع النص الثاني
لاحظ الصورة
http://www.yesmeno.com/sh/alqab/6.jpg
الكود الاول
<input type="text" name="T1" size="17" class="red" value="
مهم: يجب تغيير كلمة ( red ) لكل مجموعة
red هي اللون الاحمر
والالوان هي
.red = أحمر - .green = أخضر - .blue = أزرق - .gray = رمادي - .fushia = فوشي
.orang = برتقالي - .brown = بني - .pink = بنفسج - .black = اسود - .white = أبيض
وهذا كود مربع النص الثاني
" readonly style="width: 90">
ثم اضغط زر تحديث بالاسفل
طبعا نكرر العملية على مجموعات الاعضاء الاخرى
ولا ننسى تغيير كلمة (red)
الخطوة الاخيرة هي عمل تحديث للعدادات
نذهب الى الصيانة >> تحديث العدادات
http://www.yesmeno.com/sh/alqab/7.jpg
ونضغط تحديث العدادات
http://www.yesmeno.com/sh/alqab/8.jpg
التعديلات التي يمكنك عملها:
- كود حجم المربع : ( width: 48; )
كود نوع الخط : ( font-family:MS Sans Serif; )
كود لون خلفية المربع : ( background-color:#FFE3DF; )
كود لون النص داخل المربع : ( color:#ffffff; )
كود صورة الخلفية للمربع : ( background-image: url('altaer/color_bg.gif'); )
ارجو ان يكون الشرح مفهوم وواضح

لمشاهدة مثال

www.yesmeno.com (http://www.yesmeno.com)

تحياتي للجميع
Mr.FaDi

[رياح الحب]

وهذا نفس الشرح يا بعدي

http://www.arabwebtalk.com/showthread.php?t=42162

والله يعطيك الف عافيه يا رب