شرح مصور لتصميم ستايل متعدد الالوان

!!!ADO!!! · #1 02-20-2011, 06:37 AM

شرح مصور لتصميم ستايل متعدد الالوان
شرح مصور لتصميم ستايل متعدد الالوان

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

أو

مثال للنتيجة

شرح مصور لتصميم ستايل متعدد الالوان

1-
حفظ أنماط css بشكل منفصل أي في ملف خارجي لنستطيع التحكم بها بكل حرية

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

images/Color/green.css
images/Color/red.css
images/Color/purple.css
images/Color/blue.css
المرحلة الثانية :ربط ملفات css بالجافا سكريبت التي تعرف ب stylesheetswitcher

نرفع ملف الجافا styleswitch.JavaScript من هذا الموقع
http://www.dynamicdrive.com/dynamici...etswitcher.htm

او حمل من هنا كليك يمين .. حفظ باسم

نحفظه في هذا المسار مثلا

images/Color/styleswitch.JavaScript

المرحلة الثالثة :

لوحة تحكم المنتدى / التحكم بالستايلات / القوالب الشائعة

في قالب headinclude
ابحث عن
رمز Code:

كود:

$style[css]

واستبدله ب
رمز Code:

كود:

<link rel="stylesheet" type="text/css" href="http://6smem.com/vBulletin/images/color/Blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Green-theme" href="http://6smem.com/vBulletin/images/color/Green.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="Red-theme" href="http://6smem.com/vBulletin/images/color/Red.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="purple-theme" href="http://6smem.com/vBulletin/images/color/purple.css" />

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

رمز Code:

كود:

<script type='text/javascript' src="http://6smem.com/vBulletin/images/color/styleswitch.JavaScript"></script>

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

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

انا اخترت خيار الصور والتعديل سيكون في navbar
في اول navbar أضف

رمز Code:
<br />

كود:

لوّن صفحتك<b>
<a href="javascript:chooseStyle('none', 60)" checked="checked"><img alt="" src="http://6smem.com/vBulletin/images/Color/blue.gif" border="0" width="20" height="20" /></a>
<a href="javascript:chooseStyle('Green-theme', 60)"><img alt="" src="http://6smem.com/vBulletin/images/Color/green.gif" border="0" width="20" height="20" /></a>
<a href="javascript:chooseStyle('Red-theme', 60)"><img alt="" src="http://6smem.com/vBulletin/images/Color/red.gif" border="0" width="20" height="20" /></a>
<a href="javascript:chooseStyle('purple-theme', 60)"><img alt="" src="http://6smem.com/vBulletin/images/Color/purple.gif" border="0" width="20" height="20" /></a>

مثال ستايل متعدد الالوان للتحميل من تصميم هنــــــــــــــــــا
شرح مصور لتصميم ستايل متعدد الالوان

ساعد في نشر والارتقاء بنا عبر مشاركة رأيك في الفيس بوك

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري