شرح بالصورة كيف تغير جميع الوان اجزاء الإستايل css وإعداد ملف xml

[size=16]شرح تلوين جميع اجزاء الإستايل(css)
واعداد ملف(xml)

بسم الله
الرحمن الرحيم

السلام عليكم
ورحمة الله وبركاتة

درس اليوم
اجمل درس في تصميم الاستايلات

تلوين
الاستايل واخرج ملف الا**********مل لكي يستفيد الجميع من الاستايل

بعد الدخول
للوحة التحكم للمنتدى

نختار التحكم
بالاستايلات

تظهر لنا
قائمة الاستايلات ونختار متغير CSS

الان جه وقت
التلوين والابداع ناخذ اداة القطاره بالفوتوشوب ونشرب كاس شاي

ثم نبتدي
بااول متغير

خلفية
المنتدى/Body

1- نقوم بمسح
محتواة بالكامل واستبدالة بالكود التالي

رمز PHP:
margin:-0px 0px 0px 0px;

رمز PHP:
[center]padding: 0px;

[/center]

2- لون خلفية المنتدى حسب لون خلفية
تصميم الاستايل الي احنا مسوينة

3- حجم الخط للي يريد يسوي نفس الخط الي احنا مسوينا في
الموقع يسوي 8pt

4-نوع الخط
للي يريد يكون كل الخطوط في موقعه خط ثوما الانيق والصغير يغيرة بهذا

رمز PHP:
tahoma,MS Sans Serif,verdana,arial,helvetica,sans-serif

5- تلوين اسامي
الاقسام واخر المشاراكات باللون الي يكون مناسب للتصميم واللون الاحمر عند

المرور على اسم القسم نغيرة للون
برضو الي ينسبنا

توضيح بسيط كيف نأخذ الالوان من
التصميم ونركبها في الاعدادات

نروح لااداة القطاره

توضيح بسيط
كيف نأخذ الالوان من التصميم ونركبها في الاعدادات

نروح لااداة
القطاره

ثم تطلع لنا
لوحة الالوان

1- تنيق الوان
الاستايل بجيمع تدرجات الالوان

2- نحدد ثم
ننسخ الكود ثم نضعه في خيارات واعدادات css

الان نشوف
قالب خلفية المنتدى/Body

في الستايل
وكيف طلع

والى هنا
ننتهي من شرح اهم النقاط في التلوين وكيفة الاعداد

المتغير الثاني

خلفية الصفحة/Page Background

لون ابيض سوف
تلاحضونة بجوانب اقسام المنتدى

غيرة الى
اللون المستخدم في خلفية الاستايل في نفس القالب الاول البودي

او اترركوة
واذا تريدو حذفة من متغيرات الاستيال ثاني خيار اجعلوه 0 اول بالحجم
المناسب

المتغير
الثالث

, ,
, ( التخصيص في هذا
الستايل )

فقط نقوم بتغيير نوع الخط وحجمه

المتغير الرابع

حدود الجدول

اللون الاصفر لون الحد الدخلي نقوم بتغييرة الى اللون
المناسب

اللون الاحمر الحد الخاري فقط نغير كود اللون باللون المناسب

صورة من الاستايل لمكان الحدود

قبل التعديل

صورة بعد التعديل

المتغير الخامس

الأقسام الرئيسية/Category Strips

[size=16]

نغير ونصمم من
خلاله التدرج

ومن اعتيادي
روابط CSS بنفس القالب

نغير لون اسم
القسم لون الخط وزي مانعرف اللون الاخير هو عن مرور الماوس علية

نشوف اماكن
القالب في المنتدى

معنا التدرج
اللوني الي محدده باللون الاحمر

وهذا الرابط تبعه

رمز PHP:
869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left

رمز PHP:
#F7E3A5 url(design009/back0.gif) repeat-x
top left

design009
ملف الاستايل نعدله على اسم استيلنا ( على حسب المثال )

[center]back0.gif
اسم التدرج اللوني والصية لاننسها ( على حسب المثال ) يجب
ان تكون صيغى الصورة gif

الان شرح كيفية
عمل التدرج

نشوف التدرج

الطول 200 والعرض
2لانو العرض مايهم

نفتح الفوتوشوب
علشان نسوي عمل جديد العرض نخلية مثلا 200

والطول 200 علشان
نقدر نعمل التدرج بشكل بسيط مانعقد الامور :cupidarrow: لازم تكون

الوان متناسقه
ومناسبة للاستايل

الان نشاهد بعد
التعديل كيف صار شكلة القالب

التغير في
الاستايل

مشاء الله الاستايل كل شوي وشكله يحلو :clap:

الان بنفس الفكرة
ناتي للمتغير الخامس

رأس الجدول/Table Header ( التخصيص في هذا الستايل )

صورة القالب بعد
التعديل ماتشووفو كيف صار لون الاكود كله احمر يعني تم التعديل

لانو معاد يحتاج
قبل وبعد التعديل :bleh:

لكن المهم نشوف
الامكان حق راس الجداول

ورح نلاقية بشكل
عام في كل مكان في المنتدى فية احصئيات

ناتبع والحمد لله للحين واصلين

القالب الثامن

نهاية الجدول/Table Footer

الصورة بعد التعديل علية لازم نسويه نفس قالب رأس الجدول/Table Header ( التخصيص في هذا
الستايل )

علشان يكون في الاستايل تناسق ويطلع بشكله الجميل لكن المبعدين في انتقا
وتنويع الالون يقدرو يغيرو براحتهم

صورة لمكان القالب

نقدر نسوي بدل
التدرج لون وعلى حسب مانشوفه في عمل الاستايل ولي رح يحط لون

يكون نفس لون خلفية الاستايل في اول قالب

القالب التاسع

لون التوزيع الأول/First Alternating Color

صورة للقالب

مكان التوزيع الاول + مكان التوزيع الثاني

الان نشاهد قالب التوزيع الاول بعد التعديل والتوضيح علية

القالب العاشر

لون التوزيع الثاني/Second Alternating Color

نقوم بعمل نفس التعديل كما عملنا في القالب في التوز يع
الاول

ولكن هنا نقوم بتغيير لون الخلفية للتوزيع الثاني بلون اخر

الكل رح يقول كيف نقدر نختار لو ن الخلفية للتوزيع الاول والتويز الثاني
الطريقة كثيره سهله

نستوحي اللونين من لون الاستايل الى جانب لون التوزيع الاول للخلفية يكون
فاتح والتوزيع الثاني اغمق قليلا

الان نشاهد صورة للتوزيعين
بعد التعديل عليهما

الى هنا انتيهنا من تلوين قالب التوزيعين واهم شي هذولا القالبين
:cupidarrow: علشان العمل يطلع جميل

[center][b]القالب العاشر

محرر WYSIWYG (يجب أن يكون عادةً متماثل مع 'لون التوزيع
الأول/First Alternating Color' أو 'خلفية الكتابة/Input Fields')

صورة توضيحية للقالب وكيف تم اضافة لون للخلفية الرقم1

وتغيير نوع وحجم الخط ولونه في اللون رقم2

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

القالب هو لتغيير لون خلفية وخط لوحت كتابة الموضوع
وعنون الموضوع

----------

القالب الحادي عشر

مساعدة خلفية الكتابة/Input Fields

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

صورة لتعديل القالب

صورة توضيحية لمكان القالب والتطبيق

[center]القالب الثاني عشر

مساعدة الأزرار/Buttons

نقوم بتطبيق التالي على القالب

فقط نقوم بتغيير نوع الخط وحجمه

صورة توضح االازرار ومكان توجدها

--------------------

المتغير الثالث عشر

مساعدة قوائم

فقط نقوم بتغيير نوع الخط وحجمه

المتغير يتحكم بلون خلفية القوائم المنسدلة ولون الخط

1-قائمة تبديل الاستايل

2-قائمة خيارات عرض المواضيع

3قائمة الانتقال السريع

[b][size=16]القالب الرابع عشر

لون الوقت

فقط نقوم نقوم بتغيير لون ونوع الخط وحجمه في المتغير

اماكن الوقت في الاستايل

تسجيل دخول العضو

اعلى الفوتور في رئيسة المنتدى

في خانة اخر المشاركات

اعلى المواضيع

صور توضحية لاهم للوقت

-------------------------------
المتغير الخامس عشر

مساعدة نص شريط العنوان/Navbar Text ( التخصيص في هذا
الستايل )

في هذا المتغير فقط نقوم بتغيير لون الخط ونوعه وحجمه فقط

صورة توضيحية لمكان المتغير على الاستايل

تغير لون اسم القسم بعد الدخول عليه وبرز باللون الاسود

-----------------------------

المتغير السادس عشر

مساعدة الخط المبرز /Highlighted

نقوم بتركه كما هواء ولا نغير شي

المتغير السابع عشر

مساعدة إبراز عنصر السطر
الإداري/Inline Moderation Element Highlight

لايتم تغيير اي شي فيه

منقول للفائدة