أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

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

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



27-07-2011 12:17 مساءً
معلومات الكاتب ▼
انضم في : 19-03-2010
رقم العضوية : 425
المشاركات : 3,236
الجنس :
الدعوات : 5
قوة السمعة : 9,882

الأوسمة: 1
وسام التكريم والتقدير
وسام التكريم والتقدير

الموضوع سهل وهو كالتالي:

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

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

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



أضف بعده

CODE
<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. يمكنك تغيير ذلك وتغيير المسار في الكود.
الملف مرفق إذا ليس لديك) وعليك ارفاقه في الإستايل الذي تنوي تصميمه.

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

CODE
<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 وضع فيه الكود التالي:

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

CODE
<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

وهذا كود قائمة اختيارات.
CODE
<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 مرات التحميل :(189)
الحجم :(25.989) KB

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

look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
  27-07-2011 12:26 مساءً   [1]
معلومات الكاتب ▼
انضم في : 03-11-2009
رقم العضوية : 188
المشاركات : 2,152
الدولة : مصر Egypt
الجنس :
تاريخ الميلاد : 26-10-1994
الدعوات : 4
قوة السمعة : 5,518
موقعي : زيارة موقعي
رائع أخي الكريم .. جزاكم الله خيراً

look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
  27-07-2011 02:33 مساءً   [2]
معلومات الكاتب ▼
انضم في : 19-07-2009
رقم العضوية : 11
المشاركات : 4,342
الدولة : Egypt
الجنس :
تاريخ الميلاد : 13-7-1993
الدعوات : 10
قوة السمعة : 12,687
موقعي : زيارة موقعي
جميل جداً و إن شاء الله أعمل تصميم متعدد الألوان فى الفترة القادمة


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


look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
  27-07-2011 03:03 مساءً   [3]
معلومات الكاتب ▼
انضم في : 31-10-2010
رقم العضوية : 901
المشاركات : 1,155
الدولة : مصر
الجنس :
تاريخ الميلاد : 20-2-1990
الدعوات : 1
قوة السمعة : 3,272
موقعي : زيارة موقعي
هو دا الكلام..100%

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

look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
  27-07-2011 03:09 مساءً   [4]
معلومات الكاتب ▼
انضم في : 17-08-2009
رقم العضوية : 82
المشاركات : 1,066
الدولة : فلسطين
الجنس :
تاريخ الميلاد : 3-9-1993
الدعوات : 5
قوة السمعة : 4,254
موقعي : زيارة موقعي
شرح اكثر من رائع

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

look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
  27-07-2011 05:13 مساءً   [5]
معلومات الكاتب ▼
انضم في : 19-03-2010
رقم العضوية : 425
المشاركات : 3,236
الجنس :
الدعوات : 5
قوة السمعة : 9,882
العفو ... بارك الله فيكم جميعاً.

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

look/images/icons/i1.gif شرح طريقة عمل ستايل متعدد الألوان
  05-08-2011 05:29 مساءً   [7]
معلومات الكاتب ▼
انضم في : 17-01-2011
رقم العضوية : 1,202
المشاركات : 303
الدولة : تونس
الجنس :
تاريخ الميلاد : 18-7-1990
قوة السمعة : 156
موقعي : زيارة موقعي
مشكور الاخ Emovip
و الله كل مرة ازيد تقدير لك
كلمة الشكر تعجز عن رد الجميل شكرا

رد جديد موضوع جديد



المواضيع المتشابهه
عنوان الموضوع الكاتب الردود الزوار آخر رد
اريد طريقة تعديل address bar بحيث يتم اظهار جميع المنتديات الفرعية عند الضغط على منتدى فرعي جنرال الحب
3 62 Soliman
طلب شرح طريقة رفع صوره الرمزية للمنتدى  علاء الجوهرى
4 119 علاء الجوهرى
نجوم رتب الاعضاء من المطور العربي شجع اعضائك حتى الوصول إلى اخر نجمة بطريقة احترافية ابو عبد الله
12 4836 علاء الجوهرى
ارجو شرح طريقة ضبط نموذج التسجيل للاعضاء الجدد في ستايل اوركيد الجديد للنسخة 3.0.4 على الجوال جنرال الحب
2 125 جنرال الحب
هل يمكن تقصير الروابط للمواضيع بطريقة اخرى غير طريقة تحويلها الى html جنرال الحب
6 150 جنرال الحب

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









الساعة الآن 11:01 PM