logo

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

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

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





27-07-2011 12:17 مساءً
معلومات الكاتب ▼
تاريخ الإنضمام : 19-03-2010
رقم العضوية : 425
المشاركات : 3236
الجنس :
الدعوات : 5
قوة السمعة : 9882
موقعي : زيارة موقعي

الأوسمة: 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
المشاركات : 2152
الدولة : مصر Egypt
الجنس :
تاريخ الميلاد : 26-10-1994
الدعوات : 4
قوة السمعة : 5518
موقعي : زيارة موقعي
رائع أخي الكريم .. جزاكم الله خيراً

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


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


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

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

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

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

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

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

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

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



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

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









الساعة الآن 07:57 AM