تلوين جميع اجزاء الاستايل باكمله

[هاجس ليل]

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-1.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-2.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-3.jpg

مشكله :164: ؟؟؟؟؟

وشلون نخلي لون الخلفيه مطابق للهيدر والفوتر ويكون المنتدى منسق؟؟

الحل الوحيد نعمل برنت اسكنر
(نروح للمنتدى واما نطلع للهيدر او ننزل للفوتر ونضغط من الكي بورد على كلمة Print Screen)

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

مثل مانا سويت (نشوف الصوره)

http://www.traidnt.net/vb/images/Style/dros/body/manger-4.jpg


اللحين لصقنا العمل (طيب وشو اللون اللي راح نختاره؟) :49_:

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-5.jpg

طيب كيف يتم اختيار هاللون وباي اداة من الفوتوشوب ؟

نروح للادوات ونفتح على علبة الالوان

بالضغط على هذه الاداه

http://www.traidnt.net/vb/images/Style/dros/body/manger-6.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-7.jpg

في نفس اللحظه نروح للصوره ومربع الالوان مفتوح (مهمه)


نمر بالماوس على المنطقه اللي ابغى اخذ منها اللون

فراح تطلع لك اداة تساعدك بالمهمه وهي هذه الاداه

http://www.traidnt.net/vb/images/Style/dros/body/manger-8.jpg

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

شوف الصوره

http://www.traidnt.net/vb/images/Style/dros/body/manger-9.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-10.jpg

نسخنا اللون زين

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

مثل كذا

http://www.traidnt.net/vb/images/Style/dros/body/manger-11.jpg

روح حدث صفحة المنتدى وشوف صار شئ ؟؟؟


شاهد الصوره بعد التغيير ... يعني السالفه ماهي قصيره ... يبيلها بعد

http://www.traidnt.net/vb/images/Style/dros/body/manger-12.jpg

[هاجس ليل]

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-13.jpg

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

في حاله وحده تخالفه

انك تحط في مربع Extra CSS Attributes هذا الامر




border: 1px solid #0B198C;



مع تغيير اللون هذا 0B198C بما يناسبك

بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون

بالنسبه لي فانا طابقت نفس لون الخلفيه (العالم مزاجات :46_: )

نشوف الصوره

http://www.traidnt.net/vb/images/Style/dros/body/manger-14.jpg

اللحين نقدر نقول لكم عليه
زوين وماشي حاله

بس باقي ... ورانا خـــــــــــــط :65_:

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-15.jpg

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

::Table Border::
بالغة العربي
حدود الجدول

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-16.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-17.jpg

[هاجس ليل]

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-13.jpg

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

في حاله وحده تخالفه

انك تحط في مربع Extra CSS Attributes هذا الامر




border: 1px solid #0B198C;



مع تغيير اللون هذا 0B198C بما يناسبك

بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون

بالنسبه لي فانا طابقت نفس لون الخلفيه (العالم مزاجات :46_: )

نشوف الصوره

http://www.traidnt.net/vb/images/Style/dros/body/manger-14.jpg

اللحين نقدر نقول لكم عليه
زوين وماشي حاله

بس باقي ... ورانا خـــــــــــــط :65_:

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-15.jpg

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

::Table Border::
بالغة العربي
حدود الجدول

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-16.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-17.jpg

[هاجس ليل]

وعشانك مسوي استايل وش كبره وش عرضه

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

وعشان تعرف درجه التحديد

تروح تاخذ اي جزء في المنتدى

عندك يالفوتر او الهيدر وتعمل تصوير مثل ماوضحت باول الدرس

وتلصقه بالفوتوشوب

وتاخذ الدرجه مثل كذا

http://www.traidnt.net/vb/images/Style/dros/body/manger-18.jpg

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

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

فالتحديد الخارجي يسبب تفخيم ليس جيد والخط لا وجود له

http://www.traidnt.net/vb/images/Style/dros/body/manger-19.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-20.jpg


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

http://www.traidnt.net/vb/images/Style/dros/body/manger-21.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-22.jpg

وعشان تعمل توافق مع الاستايل

فعندك في المتغير هذا الكود

#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left

معناته لازم تصمم خلفيه عرضها لايهم بس اهم شئ الطول يكون مابين 28 الى 30 بيكسل

وانا افضل 30

واللحين صممت انا هذي


http://www.traidnt.net/vb/images/Style/dros/body/manger-23.jpg

ترفعها الى مجلد الصور الخاص بالاستايل اللي انت جالس تصممه

وانا رفعتها على مجلد الصور الخاص بهذا الاستايل واسم الاستايل هذا test وسميت الصوره

body

تعالوا نشوف كيف وضعها بالكود

#5C7099 url(images/test/body.jpg) repeat-x top left

طيب لون خلفيتها ماتغير

لازم نغيره بحيث يتوافق مع لون الاستايل

وشو لون الاستايل الرئيسي ؟

اكيد الاصفر

طيب ناخذ من درجاته

وانا اخذت هاللون EEDFA1

طيب ننسخ هاللون ونحطه في الكود ويصبح معنا بالشكل هذا

#EEDFA1 url(images/test/body.jpg) repeat-x top left


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

http://www.traidnt.net/vb/images/Style/dros/body/manger-24.jpg


ملاحظه :: الخطوط واحجامها راح نرجع لها
كل القصد الان هو تصميم استايل وتهيئة اللوانه وفي النهايه نعدل الخطوط ولون الخطوط واحجامها ونوعها

[هاجس ليل]

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-26.jpg

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

http://www.traidnt.net/vb/images/Style/dros/body/manger-25.jpg

مثل ماوضحت في الرد السابق


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

#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left

من الافضل تنسخ الكود اللي في المتغير الخامس

:: Category Strips ::

اللي هو هذا الكود

#EEDFA1 url(images/test/body.jpg) repeat-x top left

وتريح نفسك

لاحظ المنتدى الان بعد التغيير

http://www.traidnt.net/vb/images/Style/dros/body/manger-27.jpg

[هاجس ليل]

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

http://www.traidnt.net/up/traidnt/TableFooter-2.jpg

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

http://www.traidnt.net/up/traidnt/TableFooter-1.jpg

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

http://www.traidnt.net/up/traidnt/TableFooter-3.jpg


نروح ناخذ درجه لون خلفيه المنتدى من المتغير Body

ونحطها في المربع الخاص بالارضيه

http://www.traidnt.net/up/traidnt/TableFooter-4.jpg


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

http://www.traidnt.net/up/traidnt/TableFooter-5.jpg

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

[هاجس ليل]

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

http://www.traidnt.net/up/traidnt/Alternating-2.jpg

Second Alternating Color

http://www.traidnt.net/up/traidnt/Alternating-3.jpg

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

http://www.traidnt.net/up/traidnt/Alternating-1.jpg


هذا كيف ناخذ اللوانها

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

ونشوف هنا كيف اخذنا لونينن متدرجه من لون خلفيه المنتدى


هذا رقم واحد

http://www.traidnt.net/up/traidnt/Alternating-4.jpg

هذا رقم اثنين

http://www.traidnt.net/up/traidnt/Alternating-5.jpg

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

http://www.traidnt.net/up/traidnt/Alternating-6.jpg

للمعلوميه هذان المتعيران راح تغير اشياء كثيره في المنتدى

مثل المواضيع والردود والاقسام .. الخ

[ضياءالامل]

يسلمــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــوا اياديك
ومايعدمووووووووووووووووووووووا يارب




شرح وافي وكافي



وهذا رابط لموقع ادوبي لمزج الالوان يمكن ينفع البعض على طريقة شرحك\\\

http://www.s44m.net/vb/showthread.php?t=21393

يrl]

[البتول]

تسلم يمييينك اخوي
شرح رااائع.. وكل شيء موضح بالتفصيل
نسأل الله لك التوفيق ف الدنيا والآخرة
قوااك الله يالغلااا

[ضياءالامل]

واللحين صممت انا هذي


http://www.traidnt.net/vb/images/style/dros/body/manger-23.jpg
http://www.traidnt.net/vb/images/style/dros/body/manger-23.jpg

ترفعها الى مجلد الصور الخاص بالاستايل اللي انت جالس تصممه





اخوي هاجس هذا الصورة وين مكانها؟

بنفس مكان صور الهيدر والفوتر؟؟؟

صممت وحدة وحطيتها وماظهرت بالاستايل؟؟؟

[هاجس ليل]

خيه يرجى مراعات المواضيع اي مشكله افتح موضوع جديد يمنع طرح مشكله داخل الموضوع
نحن لا نريد نشتت افكار الاعضاء

[ضياءالامل]

العذر اخوي

كان مجرد سؤال صغير عن مسار الصورة في مجلد الصور لااكثر