دورة تصميم استايل للجيل الثالث من منتديات vb

[احسـ العالم ـاس]

الان انتقل مباشرة الى القائمة التي تحتها :
الجسم (Customized in this Style)
الوصف
"الجسم" يستعمل للسيطرة على لون حدود الصفحة الخارجية ، ولوضع parameters الأساسية لكل نص والوصلات على كل الصّفحات .
شاهد الصوره لتعرف ماهي منطقة الجسم




المنطقة التي باللون الابيض هي منطقة الجسم
لتغير الوان وخطوط هذه المنطقة عليك اولا ان تعرف كيف تستطيع استدعاء صورة لجعلها خلفية
لجعل الخلفية صوره وليست لونا فقط طبق الكود التالي
(الصورة / مجلد الصورة)url مسافة كود اللون#
الان نحن نريد جعل الصورة التالية هي الخلفية




اذن علينا وضعها اولا في مجلد alfnooon
ولكي نحصل على كود اللون لهذه الصورة افتحها في برنامج الفوتوشوب

[احسـ العالم ـاس]

الان سيكون استدعاء الصورة كالتالي

#F293D1 url(alfnooon/net_25.jpg)

الان بعد وضع الصورة في مجلد alfnooon
قم باستدعاءها عن طريق نسخ الكود السابق ووضعه في خانة الخلفية
في خانة لون الخط ضع الكود التالي #850564 (هذا هو كود اللون العنابي الغامق)
في خانة Extra CSS Attributes ضع margin: 0px 0px 0px 0px;
في خانة حجم الخط دعه كما هو 10pt
في الخانه السفلية خانة الروابط من اليمين لون الرابط قبل الضغط عليه وعند مرور الماوس عليه وعند الضغط غيره كما في الصورة
ثم اختر حفظ من اسفل القائمة
شاهد الصورة



انتقل للقائمة التي تحتها مباشرة
Page Background (Customized in this Style)
وهي خلفية المنتدى
شاهد الصورة لتتعرف على المنطقة المقصودة



لاحظ اني جعلت حجم المنتدى 730 بكسل بدلا من 100% وذلك لكي يتضح لديك الفرق بين منطقة الجسم ومنطقة خلفية المنتدى
الان مثل مافعلنا في منطقة الجسم نستطيع تغير لون الخلفية الى لون او الى صورة سنختار هنا لون فقط
وسيكون لون الخلفية #F9D1EB (تسطيع استدعاء صورة عبارة عن نقش او خلافة لاضافة ملمس لهذه المنطقة كما فعلنا في منتطقة الجسم )
ولون الخط #850564
واختر حفظ من اسفل القائمة

[احسـ العالم ـاس]

الان القائمة التي اسفلها مباشرة هي قائمة <td>, <th>, <p>, <li>
لاتهمنا هذه القائمة ولاتقم بتتغيير فيها
نتوجه للقائمة التي تحتها Table Border (Customized in this Style)
هذه القائمة تختص بجداول وحدود المنتدى ، لاحظ معي ان جداول المنتدى لونها اللون الازرق الغامق
سنحاول تغييرها الى الوان مناسبه للون خلفية المنتدى
انظر الى الصوره لمعرفة المنطقة المقصودة



ضع في خانة لون الخلفية ولون الخط الكود التالي #EB6DC0 ( عبارة عن لون وردي متوسط )
في خانة Extra CSS Attributes ستجد الكود التالي border: 1px solid #0B198C;
استبدل الكود
border: 1px solid #0B198C;
بـ
border: 1px solid #F696D5;

ولمعرفة لون اي كود ضع هذا الكود في صفحة فرونت بيج ولا تنسى مسح كل الاكواد الموجوده في الصفحه الجديده

<p><font color="#F696D5">alfnooon.net</font></p>

ثم استبدل مابين القوسين الصغيرين بالكود الذي تود معرفة لونه على سبيل المثال

<p><font color="#EB6DC0">alfnooon.net</font></p>

الان شاهد التغيرات على جداول المنتدى
الان ننتقل للقائمة التي تحتها مباشرة
تصنيف السكربتات (Customized in this Style)
وهي خانة الاقسام الرئيسية للمنتدى ( العامة ، الادبية ، التقنية) لاحظ المناطق المظللة باللون الاحمر الشفاف في الصورة التالية:



ستجد بان كود الخلفية #FFFFFF اي اللون الابيض غيره بالكود التالي #F575C9 اي اللون الوردي
ستجد ان كود لون الخط هو#000000 وهو اللون الاسود غيره بالكود التالي #C00F77 اي اللون العنابي
ضع في Normal روابط CSS الكود التالي #850564 (لون عنابي)
كرر هذا الكود مع كلا من Visitedروابط CSS و Hover روابط CSS
لاحظ انا لم نغير شي في خانة شكل الخط وحجمه وتستطيع تغير شكل الخط الى مسطر او عادي او مائل او عريض

[احسـ العالم ـاس]

الان انتقل لقائمة Table Header (Customized in this Style
شاهد الصورة الخانات التي باللون الازرق الشفاف هي المناطق المعنية:


في خانة الخلفية سنقوم باستدعاء الصورة التالية



ضع الكود التالي في خانة الخلفية

#F5A9DA url(alfnooon/net_16.jpg)

في خانة لون الخط ضع الكود التالي #C00F77
جم الخط وشكله دعهما كما هما
الروابط ضع في خاناتهم الكود التالي #6A1D44
الان انتقل الى القائمة التالية
Table Footer (Customized in this Style
شاهد المناطق الملونه باللون الازرق الشفاف في الصورة للتعرف على المنطقة المنشودة



في الخلفية سنقوم باستدعاء الصورة التالية


وسيكون الكود كالتالي

#F5A9DA url(alfnooon/net_17.jpg)

لون الخط ضع الكود التالي #C00F77
في الروابط ضع الكود التالي في جميع الخانات #6A1D44

[احسـ العالم ـاس]

الان ننتقل الى القائمة التي تحتها مباشرة
First Alternating Color (Customized in this Style
وتحتها مباشرة قائمة
Second Alternating Color (Customized in this Style
شاهد الصورة للتعرف على القائمتين



المنطقة الملونه باللون البنفسجي الشفاف هي منطقة First Alternating Color (Customized in this Style
ضع في الخلفية الكود التالي #F8BDE4
ضع في لون الخط التالي #C00F77
المطقة الملونه باللون البرتقالي الشفاف هي منطقةSecond Alternating Color (Customized in this Style
ضع في الخلفية الكود التالي #F7A3DA
وضع في لون الخط التالي #C00F77
لانسى تحميل استايل الفنون الوردي من قسم تطوير المنتديات ثم استبدل مجلد alfnooon الي عندك بمجلد alfnooon
الي موجود مع الاستايل حتى تحصل على جميع الصور والايقونات التي استدعيناها
في الختام تقبلوا تحيات اخوكم

<-------------- نهاية الدرس الثالث \------------------>

اتمنى ان يستفيد الجميع من هذا الشرح ونشوف استايلات الرائديه الجميله منكم

تحيـــــاتي

احســ العالم ــاس

[حزن]

[align=center] يعطيك العافيه احساس العالم على الموضوع الرائع

اتمنى يستفيد منه الجميع

وان شاء الله تشوف التطبيقات قريبا

حزن [/align]

[أبو رائد]

الله يعطيك العافية يا احساس العالم

كعادتك التي اعتدنا عليها ...


متميز في كل شيء



الله يبارك فيك وإن شاء الله نشاهد تطبقيات

الجادين في تعلم تصميم الاستايل

[احسـ العالم ـاس]

ح ـزن شاكر لك مرورك

وإن شاء الله نشوف ابداعك وذوقك الجميل في الاستايلات

<----- اول زبون بيشتري منك استايل

تحيــــاتي

[احسـ العالم ـاس]

ابو رائد

شرف لى مرورك على موضوعي واسعدني ردك جداً

شاكر لك ونتمنى نشوف استايلات الرائديه من كل الاعضاء

تحيـــاتي لك

[طفلة المطر]

يعطيك العافيه احساس

وانتظر التطبيق

طفلونه