ABO Deema
23-02-2007, 01:08
قبل كل شيء احب ان انوه ان الكود مجرب من قبلي مع العلم ان الاصدار التي تم التجريب عليه هو 3.6.4
وهذا مثال عليه
http://www.alchaam.com/pic/colormember.GIF
طريقة التركيب :
الخطوة اضف الكود التالي الى جميع ستايلات المنتدى
.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;
}
وهي بالطريقة التالية
نضغط ادارة الاستايلات ثم التحكم بالستايلات ومن ثم نختار خيارات القوالب ونختار بعد ذلك من متغيرات الستايل CSS الرئيسي
بعد ذلك نذهب الى
تعاريف css الاضافية
ونضيف الأكواد التي أضفتها في أول الموضوع في نهايته ونضغط حفظ بالاسفل
طبعا نكرر العملية على جميع الاستايلات
بعد ذلك نذهب الى
مجموعات الاعضاء >> التحكم بالمجموعات
ونختار المجموعات بالتتالي ولنفرض نختار بالاول مجموعة الأعضاء ونختار تعديل ومن ثم اذهب
شتظهر لنا صفحة تراخيص مجموعة الاعضاء وعند خيار اسم العضو بصيغة HTML ستجد مستطيلين نضغ في المستطيل الأول هذا الكود
<input type="text" name="T1" size="17" class="red" value="
مهم: يجب تغيير كلمة ( red ) لكل مجموعة على حسب اختيارك للون كل مجموعة فمثلا لو أحببت ان تكون مجموعة المشرفين باللون الأخضر تغيير كلمة red ونضع بدلا منها كلمة green ليصبح لون مجموعة المشرفين باللون الأخضر
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'); )
ارجو ان يكون الشرح مفهوم وواضح
وهذا مثال عليه
http://www.alchaam.com/pic/colormember.GIF
طريقة التركيب :
الخطوة اضف الكود التالي الى جميع ستايلات المنتدى
.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;
}
وهي بالطريقة التالية
نضغط ادارة الاستايلات ثم التحكم بالستايلات ومن ثم نختار خيارات القوالب ونختار بعد ذلك من متغيرات الستايل CSS الرئيسي
بعد ذلك نذهب الى
تعاريف css الاضافية
ونضيف الأكواد التي أضفتها في أول الموضوع في نهايته ونضغط حفظ بالاسفل
طبعا نكرر العملية على جميع الاستايلات
بعد ذلك نذهب الى
مجموعات الاعضاء >> التحكم بالمجموعات
ونختار المجموعات بالتتالي ولنفرض نختار بالاول مجموعة الأعضاء ونختار تعديل ومن ثم اذهب
شتظهر لنا صفحة تراخيص مجموعة الاعضاء وعند خيار اسم العضو بصيغة HTML ستجد مستطيلين نضغ في المستطيل الأول هذا الكود
<input type="text" name="T1" size="17" class="red" value="
مهم: يجب تغيير كلمة ( red ) لكل مجموعة على حسب اختيارك للون كل مجموعة فمثلا لو أحببت ان تكون مجموعة المشرفين باللون الأخضر تغيير كلمة red ونضع بدلا منها كلمة green ليصبح لون مجموعة المشرفين باللون الأخضر
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'); )
ارجو ان يكون الشرح مفهوم وواضح