[فادي القدس]

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

مثال



طريقة التركيب :
الخطوة اضف الكود التالي الى جميع ستايلات المنتدى
وهي بالطريقة التالية
نضغط ادارة الاستايلات

يظهر لنا قائمة الاستايلات
نضغط على قائمة الستايل ونختار منها
css رئيسي
تابع الصورة

بعد ذلك نذهب الى
تعاريف css الاضافية
ونضيف الأكواد في نهايته
تابع الصورة

ونضغط حفظ بالاسفل
طبعا نكرر العملية على جميع الاستايلات
هذي هي الاكواد

.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;
}

بعد ذلك نذهب الى
مجموعات الاعضاء >> التحكم بالمجموعات

نضغط تحرير على المجموعة المطلوبة

بعد ذلك نضيف الاكواد رقم 1 بمربع النص الأول
والأكواد رقم 2 بمربع النص الثاني
لاحظ الصورة

الكود الاول

<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)
الخطوة الاخيرة هي عمل تحديث للعدادات
نذهب الى الصيانة >> تحديث العدادات

ونضغط تحديث العدادات

التعديلات التي يمكنك عملها:
- كود حجم المربع : ( width: 48; )
كود نوع الخط : ( font-family:MS Sans Serif; )
كود لون خلفية المربع : ( background-color:#FFE3DF; )
كود لون النص داخل المربع : ( color:#ffffff; )
كود صورة الخلفية للمربع : ( background-image: url('altaer/color_bg.gif'); )
ارجو ان يكون الشرح مفهوم وواضح

لمشاهدة مثال

www.yesmeno.com

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