تلوين ستايل واحد بأكثر من لون .بحيث تترك للأعضاء باختيار اللون المفضل ..

بعدما تم ايضاح طريقة حفظ ملفات css بشكل منفصل
وكذلك ايضاح الطرق المختلفة لتعديل الروابط
وكذلك ايضاح أهم الفئات والاكواد و الالوان في الستايل
ندخل مرحة التطبيق
المرحلة الاولى : نبدأ بتكوين 7 ملفات css بألوان مختلفة .و أتقانها يعتمد على شطارتك في لغة css
نضعها مثلا بهذا المسار مثلا

كود

images/colorstyle/1.css images/colorstyle/2.css images/colorstyle/3.css images/colorstyle/4.css images/colorstyle/5.css images/colorstyle/6.css images/colorstyle/7.css

المرحلة الثانية :
ربط ملفات css بالجافا سكريبت التي تعرف ب stylesheetswitcher
نرفع ملف الجافا styleswitch.js من هذا الموقع
http://www.dynamicdrive.com/dynamici...etswitcher.htm
او حمل من هنا كليك يمين ..حفظ باسم[/url]
نحفظه في هذا المسار مثلا

كود

images/colorstyle/styleswitch.js

المرحلة الثالثة :
لوحة تحكم المنتدى / التحكم بالستايلات / القوالب الشائعة
في قالب headinclude
ابحث عن

كود

$style[css]

واستبدله ب

كود

<link rel="stylesheet" type="text/css" href="images/colorstyle/7.css" title="default"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-1" href="images/colorstyle/1.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-2" href="images/colorstyle/2.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-3" href="images/colorstyle/3.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-4" href="images/colorstyle/4.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-5" href="images/colorstyle/5.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-6" href="images/colorstyle/6.css"/> <link rel="alternate stylesheet" type="text/css" media="screen" title="style-7" href="images/colorstyle/7.css"/>

في نفس القالب اضف في آخره

كود

<****** type="text/java******" src="images/colorstyle/styleswitch.js?v=$vboptions[simpleversion]"></******>

احفظ العمل
انتهينا من تعريف ملفات css وملف الجافا للستايل

بقي لنا وصع خيار تلوين للأعضاء .
لدينا خيار اضافته في اي قالب مناسب لتضمن ظهور وشكل أفضل
القوالب مثل
header
navbar
footer
أو يكنكم استغلال أحد قوالب مكان الاعلان الفارغة
ad_header_logo
ad_header_end
ad_navbar_below
ad_footer_end
ad_footer_start
ولدينا أشكال مختلف لادراج الخيار (صور) او (قائمة منسدلة) او (أزرار راديو) او (كتابة)
مثال وضع خيار الصور

كود

<!---خيار الصور بداية هاك تغيير الألوان --> <b> <font color="#FF0000">اختر لون صفحتك</font></b> : <a href="java******:chooseStyle('style-1',60)"> <img src="images/colorstyle/Turquoise.gif" alt="تركواز" width="12" height="12" border="0"/></a> <a href="java******:chooseStyle('style-2', 60)"> <img src="images/colorstyle/Violet.gif" alt="بنفسجي" width="12" height="12" border="0"/></a> <a href="java******:chooseStyle('style-3',60)"> <img src="images/colorstyle/Pink.gif" alt="وردي" width="12" height="12" border="0"/></a> <a href="java******:chooseStyle('style-4',60)"> <img src="images/colorstyle/Red.gif" alt="احمر " width="12" height="12" border="0"/></a> <a href="java******:chooseStyle('style-5',60)"> <img src="images/colorstyle/Brown.gif" alt="بني" width="12" height="12" border="0"/></a> <a href="java******:chooseStyle('style-6',60)"> <img src="images/colorstyle/Green.gif" alt="اخضر" width="12" height="12" border="0"/></a> <a href="java******:chooseStyle('style-7',60)"> <img src="images/colorstyle/Default.gif" alt="إفتراضي" width="12" height="12" border="0"/></a> <!--خيار الصور-نهاية هاك تغيير الألوان -->

مثال خيار أزرار راديو

كود

<!--خيار أزرار راديو بداية هاك تغيير الألوان --> <b> <font color="#FF0000">اختر لون صفحتك</font></b> : <form id="switchform"> <input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">أزرق افتراضي<br /> <input type="radio" name="choice" value="style-1" onClick="chooseStyle(this.value, 60)">تركواز<br /> <input type="radio" name="choice" value="style-2" onClick="chooseStyle(this.value, 60)">بنفسجي<br /> <input type="radio" name="choice" value="style-3" onClick="chooseStyle(this.value, 60)">وردي<br /> <input type="radio" name="choice" value="style-4" onClick="chooseStyle(this.value, 60)">احمر<br /> <input type="radio" name="choice" value="style-5" onClick="chooseStyle(this.value, 60)">بني<br /> <input type="radio" name="choice" value="style-6" onClick="chooseStyle(this.value, 60)">اخضر<br /> </form> <!--خيار أزرار راديو نهاية هاك تغيير الألوان -->

مثال خيار قائمة منسدلة

كود

<!-- خيار قائمة منسدلة بداية هاك تغيير الألوان --> <form id="switchform"> <select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)"> <option value="none" selected="selected">أزرق افتراضي</option> <option value="style-1">تركواز</option> <option value="style-2">بنفسجي</option> <option value="style-3">وردي</option> <option value="style-4">أحمر</option> <option value="style-5">بني</option> <option value="style-6">أخضر</option> </select> </form> <!-- خيار قائمة منسدلة نهاية هاك تغيير الألوان -->

مثال خيارالكتابة

كود

<!--خيارالكتابة بداية هاك تغيير الألوان --> <b> <font color="#FF0000">اختر لون صفحتك</font></b> : <a href="java******:chooseStyle('style-7',60)" checked="checked">أزرق</a>| <a href="java******:chooseStyle('style-1',60)">تركواز</a>| <a href="java******:chooseStyle('style-2', 60)">بنفسجي</a>| <a href="java******:chooseStyle('style-3',60)">وردي</a>| <a href="java******:chooseStyle('style-4',60)">احمر </a>| <a href="java******:chooseStyle('style-5',60)">بني</a>| <a href="java******:chooseStyle('style-6',60)">اخضر</a> <!--خيارالكتابة نهاية هاك تغيير الألوان -->