شرح طريقة عمل ستايل متعدد الألوان

الموضوع سهل وهو كالتالي: تعمل نسخة من ملف الإستايل style.css مثلا style1.css وتضعه في نفس المجلد css عدل على الملف الجد ..


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


27-07-2011 12:17 مساء
PhpMax
عضو سوبر ستار
rating
العضو غائب وآخر دعواهم أن الحمد لله رب العالمين
معلومات الكاتب ▼
تاريخ الإنضمام : 19-03-2010
رقم العضوية : 425
المشاركات : 3236
الجنس : ذكر
الدعوات : 4
يتابعهم : 0
يتابعونه : 4
قوة السمعة : 9822
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
الموضوع سهل وهو كالتالي:

تعمل نسخة من ملف الإستايل style.css مثلا style1.css وتضعه في نفس المجلد css
عدل على الملف الجديد كما تريد من حيث الالوان والصور ....

عدل على ملف headinclud.tpl بالبحث عن

<link rel="stylesheet" href="{$style_path}" type="text/css" />



أضف بعده

<link rel="alternate stylesheet" type="text/css" media="screen" title="style1" href="look/styles/forum/main/css/style1.css" />

<script src="look/styles/forum/main/styleswitch.js" type="text/javascript"></script>


لاحظ وجود ملف سكربت هو المسئول عن تغيير الستايل وحفظ بالكوكيز.
ستحتاج للملف styleswitch.js ولاحظ مكان وجوده في نفس مجلد main. يمكنك تغيير ذلك وتغيير المسار في الكود.
الملف مرفق إذا ليس لديك) وعليك ارفاقه في الإستايل الذي تنوي تصميمه.

ولإضافة تصميم بلون آخر كرر ما سبق وسيصبح الكود كالتالي:

<link rel="alternate stylesheet" type="text/css" media="screen" title="style1" href="look/styles/forum/main/css/style1.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="style2" href="look/styles/forum/main/css/style2.css" />
<script src="look/styles/forum/main/styleswitch.js" type="text/javascript"></script>


الان وقت وضع كود استدعاء التصميم للمستخدم. يمكن عملها بقائمة اختيار او رابط على صورة او مجرد رابط نصي كالتالي.

اختر القالب المناسب مثلا header.tpl وضع فيه الكود التالي:

رابط نصي سيظهر

<a href="javascript:chooseStyle('style1', 60)">Style1</a>
<a href="javascript:chooseStyle('style2', 60)">Style2</a>
<a href="javascript:chooseStyle('none', 60)">Default</a>


Style1 Style2 Default

وهذا كود قائمة اختيارات.
<select onchange="chooseStyle(this.value, 60)">
<option value="none">default</option>
<option value="style1">style1</option>
<option value="style2">style2</option>
</select>



احفظ القوالب وارفع ملف السكربت مرفق ملف للتطبيق.


الملف المرفق تطبيق ما سبق على الإستايل الإفتراضي
تم فقط تغيير لون الخلفية في كل ملف ستايل
 
 
  main_pbb214_up.zip   تحميل zip مرات التحميل :(185)
الحجم :(25.989) KB



تم تحرير الموضوع بواسطة :emovip
بتاريخ:27-07-2011 05:14 مساء


27-07-2011 12:26 مساء
مشاهدة مشاركة منفردة [1]
isma3eliano
عضـو ستـار
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 03-11-2009
رقم العضوية : 188
المشاركات : 2152
الدولة : مصر Egypt
الجنس : ذكر
تاريخ الميلاد : 26-10-1994
الدعوات : 4
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 5518
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
رائع أخي الكريم .. جزاكم الله خيراً

27-07-2011 02:33 مساء
مشاهدة مشاركة منفردة [2]
ezzeldean
عضو سوبر ستار
rating
العضو غائب العمل على الإصدار 1.1 من قالب Elites
معلومات الكاتب ▼
تاريخ الإنضمام : 19-07-2009
رقم العضوية : 11
المشاركات : 4342
الدولة : Egypt
الجنس : ذكر
تاريخ الميلاد : 13-7-1993
الدعوات : 10
يتابعهم : 1
يتابعونه : 3
قوة السمعة : 12627
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.1
 offline 
look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
جميل جداً و إن شاء الله أعمل تصميم متعدد الألوان فى الفترة القادمة


تم تحرير المشاركة بواسطة :ezzeldean
بتاريخ:27-07-2011 07:52 مساء


27-07-2011 03:03 مساء
مشاهدة مشاركة منفردة [3]
محمد الصاوي
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 31-10-2010
رقم العضوية : 901
المشاركات : 1155
الدولة : مصر
الجنس : ذكر
تاريخ الميلاد : 20-2-1990
الدعوات : 1
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3272
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
هو دا الكلام..100%

cool والاجمل اني عرفت ان ممكن ملف الجافا يقوم بعمل الكوكيز..<جديدة عليَّ>

27-07-2011 03:09 مساء
مشاهدة مشاركة منفردة [4]
moad
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 17-08-2009
رقم العضوية : 82
المشاركات : 1064
الدولة : فلسطين
الجنس : ذكر
تاريخ الميلاد : 3-9-1993
الدعوات : 4
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 4154
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
شرح اكثر من رائع

سيتم تطبيق الدرس على الاستايلات القادمة

27-07-2011 05:13 مساء
مشاهدة مشاركة منفردة [5]
PhpMax
عضو سوبر ستار
rating
العضو غائب وآخر دعواهم أن الحمد لله رب العالمين
معلومات الكاتب ▼
تاريخ الإنضمام : 19-03-2010
رقم العضوية : 425
المشاركات : 3236
الجنس : ذكر
الدعوات : 4
يتابعهم : 0
يتابعونه : 4
قوة السمعة : 9822
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.4
 offline 
look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
العفو ... بارك الله فيكم جميعاً.

27-07-2011 11:01 مساء
مشاهدة مشاركة منفردة [6]
نجم الويب
عضو سوبر ستار
rating
العضو غائب بلاكهرباء حتى اشعار آخر ,والمعذرة على الغياب المتكررلأسباب وظروف ولله الحمد , دعواتكم لبلادي وبلاد المسلمين ..
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2010
رقم العضوية : 599
المشاركات : 3734
الدولة : أمي اليمن
الجنس : ذكر
تاريخ الميلاد : 4-3-1987
الدعوات : 1
يتابعهم : 2
يتابعونه : 1
قوة السمعة : 8237
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
دائما تعود لنا بأشياء جميلة ورائعة اخي
تابع ابداعاتك


الصفحة 1 من 2 < 1 2 > الأخيرة »

المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
اتمنى شرح طريقة تركب الصور بصيغة img AngeLi
2 32 AngeLi
طريقة عمل و تركيب منتدى PBBoard thegenius
5 77 thegenius
طريقة تغير استايل منتدى PBBoard الجيل الثالث thegenius
1 20 thegenius
[طريقة] تغير الماوس للمنتدى عبدالاله الهذلي
1 176 عبدالاله الهذلي
طريقة تغيير rocketscript إلى javascript ridouane
3 129 نوارة

الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 11:11 مساء