بسم الله الرحمن الرحيم
درس اليوم هو تغيير جميع الالوان بمايتوافق مع لون الهيدر والفوتر
نبدى في تلوين الجسم
ندخل على لوحة تحكم المنتدى
ومنها ننتقل الى ستايلات & القوالب
ونختارمنها : Style Manager

i

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

i

وشو المطلوب منا بعد ماخلصنا الهيدر والفوتر وركبناها ؟
اللي نبي نسويه هو تلوين الخلفيه
فبعد ان ضغطنا على كلمة اذهب
نروح وندور على المتغير Body
نشوف الصوره اللي محدد باللون الاحمر هو المطلوب

i

وشلون نخلي لون الخلفيه مطابق للهيدر والفوتر ويكون المنتدى منسق؟؟ الحل الوحيد نعمل برنت اسكنر
(نروح للمنتدى واما نطلع للهيدر او ننزل للفوتر ونضغط من الكي بورد على كلمة Print Screen) ورحنا للفوتوشوب ونضغط على كلمة Fill ونفتح عمل جديد وراح يطلع لنا
مقاسات الصفحه اللي سوينا لها تصوير بـ Print Screen
طيب انفتح لنا العمل الجديد وبالمقاسات المصوره من الشاشه (وكلاً على حسب قياس شاشته)
نلصق التصوير بالضغط على الكي بورد (Ctrl + V) مثل مانا سويت (نشوف الصوره)

i

اللحين لصقنا العمل (طيب وشو اللون اللي راح نختاره؟) طبعاً نشوف وش راح يناسب الصفحه من حيث التناسق .. فراح يكون مثل مافي الصوره
شوف اللي محاط باللون الاحمر

i

طيب كيف يتم اختيار هاللون وباي اداة من الفوتوشوب ؟ نروح للادوات ونفتح على علبة الالوان بالضغط على هذه الاداه

i

اللحين راح يفتح لنا مربع او علبة الالوان

i

في نفس اللحظه نروح للصوره ومربع الالوان مفتوح (مهمه)
نمر بالماوس على المنطقه اللي ابغى اخذ منها اللون فراح تطلع لك اداة تساعدك بالمهمه وهي هذه الاداه

i

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

i

نروح نضلل اللون و وبطرف الماوس الايمن نضغط
راح يطلع لنا مربع حوار (ننسخه )

i

نسخنا اللون زين نروح نلصقه الان في خلفية المنتدى بس مانمسح علامة المربع (#) واللي بيمسحها الله يعينها يكتبها
بس ابي اريحكم
لصقنا اللون ... طيب وين save css ... اضغطه عليها من غير ماتشاور مثل كذا

i

روح حدث صفحة المنتدى وشوف صار شئ ؟؟؟ شاهد الصوره بعد التغيير ... يعني السالفه ماهي قصيره ... يبيلها بعد

i

نروح اللحين للمتغير الثاني اللي هو
:: Page Background ::
وهذا للتلوين الداخلي (مثل مافهمتك في دروس الاعدادات)

i

طبعاً ان ثقلنا اللون فراح يتشوه الاستايل وان خففناه فراح ماله اثر وان طابقناه مع خلفية المنتدى فراح يمشي تمام في حاله وحده تخالفه انك تحط في مربع Extra CSS Attributes هذا الامر
border: 1px solid #0B198C;

مع تغيير اللون هذا 0B198C بما يناسبك بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون بالنسبه لي فانا طابقت نفس لون الخلفيه نشوف الصوره

i

نروح اللحين للمتغير الثالث اللي هو
:: <td>, <th>, <p>, <li>::
وهذا للتلوين مناطق جزئيه داخله بالجداول
ومثل ماهو موضوع بالصوره انصح بعدم استخدامه

i

نجي للمتغير الرابع اللي هو ::Table Border:: التحديد الكلي للمنتدي
يوجد بهذا المتغير تحديد داخلي وتحديد خارجي

i

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

i

وعشانك مسوي استايل وش كبره وش عرضه فلابد تتماشى مع التحديد اللي بديت منه وعشان تعرف درجه التحديد تروح تاخذ اي جزء في المنتدى عندك يالفوتر او الهيدر وتعمل تصوير مثل ماوضحت باول الدرس وتلصقه بالفوتوشوب وتاخذ الدرجه مثل كذا

i

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

i

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

i

نروح اللحين للمتغير الخامس اللي هو
:: Category Strips ::
وهذا خاص بلون الخلفيه اللي موجوده تحت مسميات الاقسام
نشوف الصوره

i

وهذا شكلها بالمنتدى

i

فعندك في المتغير هذا الكود
#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left
معناته لازم تصمم خلفيه عرضها لايهم بس اهم شئ الطول يكون مابين 28 الى 30 بيكسل وانا افضل 30 واللحين صممت انا هذي

i

ترفعها الى مجلد الصور الخاص بالاستايل اللي انت جالس تصممه وانا رفعتها على مجلد الصور الخاص بهذا الاستايل واسم الاستايل هذا test وسميت الصوره body تعالوا نشوف كيف وضعها بالكود
#5C7099 url(images/test/body.jpg) repeat-x top left
طيب لون خلفيتها ماتغير لازم نغيره بحيث يتوافق مع لون الاستايل وشو لون الاستايل الرئيسي ؟ اكيد الاصفر طيب ناخذ من درجاته وانا اخذت هاللون EEDFA1 طيب ننسخ هاللون ونحطه في الكود ويصبح معنا بالشكل هذا
#EEDFA1 url(images/test/body.jpg) repeat-x top left

ويصبح خلفيه الاقسام بهذا الشكل

i

نروح اللحين للمتغير السادس اللي هو
:: Table Header::
وهذا خاص بلون الأرضية اللي موجوده تحت مسميات المنتدى + المواضيع والمشاركات والمراقبين

i

وهذا شكلها بالمنتدى

i

مثل ماوضحت في الرد السابق يوجد الكود في الأرضية وهذي الأرضية لابد تتناسق مع لون المنتدى
#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left
من الافضل تنسخ الكود اللي في المتغير الخامس :: Category Strips :: اللي هو هذا الكود
#EEDFA1 url(images/test/body.jpg) repeat-x top left
وتريح نفسك لاحظ المنتدى الان بعد التغيير

i

الان المتغير السابع
وهو Table Footer القسم السفلي للمنتدى
وهو خاص بلون الارضيه الموجوده في جزء محدد اسفل المنتدى ونشاهد الصوره انه بلون سماوي على موف

i

ولمشاهدة المتغير بيكون بهذا الشكل

i

اللحين نبي نوحد الخلفيه بدل ماهي سماويه نخليها صفراء مثل خلفيه المنتدى

i

نروح ناخذ درجه لون خلفيه المنتدى من المتغير Body ونحطها في المربع الخاص بالارضيه

i

نشاهد التغير كيف صار

i

اللحين نتطرق للمتغيرين الثامن والتاسع المهمين في المنتدى وهما
First Alternating Color

i

Second Alternating Color

i

وموقعهما في المنتدى

i

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

i

هذا رقم اثنين

i

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

i

للمعلوميه هذان المتعيران راح تغير اشياء كثيره في المنتدى مثل المواضيع والردود والاقسام .. الخ
عدد المقيّمين 1 وإجمالي التقييمات 5
12345