اليوم سنقدم لكم شرح تغير واضافة ألوان جديدة لصندوق الرد
حيث
سينتقل من

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



إلى

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


وبالطبع الفرق واضح فدل من 15 لون
أصبح لديك جميع الألوان بجميع درجاتها

والأن الشرح

أولاً إنشاء صفحة html

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] لوحة الأدارة
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] عناصر أضافية
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] html
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] إدارة صفحات الـhtml
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] انشاء صفحة جديدة

الشرح بالصور




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]




[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]






[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]






[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

1/ ضع أى عنوان
2/ لاتسخدم أعى وأسفل صفحة منتداك
3/ لاتضعها صفحة رئيسية
4/ تأكد من أن الـhtml باللون الأخضر
4/ ضع الكود
5/ أضفط قدم


وهذا هو الكود

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

أو بالضغط على هذا الرابط

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

6/ نحفظ رقم الصفحة اللى وضعنا بها الكود






[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

ثم نذهب إلى

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

الشرح بالصور






[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]


وضع به هذا الكود
مع تبديل علامة ال # برقم الصفحة التى قمت بوضع الكود بها

الكود هو

الكود: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]






الأن الخطوة الأخيرة وهى تعميم الكود على المنتدى

نذهب إلى

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

الشرح بالصور






[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

وهذا هو كود الـcss
الكود: [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}



تنبيه هاماً
فى بعض الأحيان لا يتغير الصندوق
ومن يحدث معه ذلك فقط يقوم
بأعادة وضع كود صفحة الـHTML
مرة أخرى وسيعمل بنجاح


ملحوظة
الكود نقلآ من منتدى الدعم الفرنسى
للعضوEtana



تم الشرح عن طريقى
francaaa