جليس الذكرى
04-30-2010, 01:00 AM
بسم الله الرحمن الرحيم
تغيير جميع الالوان بمايتوافق مع لون الهيدر والفوتر
تلوين الجسم
ندخل على لوحة تحكم المنتدى
ومنها ننتقل الى ستايلات & القوالب
ونختارمنها : 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
نشوف الصوره اللي محدد باللون الاحمر هو المطلوب
http://www.traidnt.net/vb/images/Style/dros/body/manger-3.jpg
مشكله http://www.traidnt.net/vb/images/smilies/crazy.gif ؟؟؟؟؟
وشلون نخلي لون الخلفيه مطابق للهيدر والفوتر ويكون المنتدى منسق؟؟
الحل الوحيد نعمل برنت اسكنر
(نروح للمنتدى واما نطلع للهيدر او ننزل للفوتر ونضغط من الكي بورد على كلمة Print Screen)
ورحنا للفوتوشوب ونضغط على كلمة Fill ونفتح عمل جديد وراح يطلع لنا
مقاسات الصفحه اللي سوينا لها تصوير بـ Print Screen
طيب انفتح لنا العمل الجديد وبالمقاسات المصوره من الشاشه (وكلاً على حسب قياس شاشته)
نلصق التصوير بالضغط على الكي بورد (Ctrl + V)
مثل مانا سويت (نشوف الصوره)
http://www.traidnt.net/vb/images/Style/dros/body/manger-4.jpg
اللحين لصقنا العمل (طيب وشو اللون اللي راح نختاره؟) http://www.traidnt.net/vb/images/smilies/nosweat.gif
طبعاً نشوف وش راح يناسب الصفحه من حيث التناسق .. فراح يكون مثل مافي الصوره
شوف اللي محاط باللون الاحمر
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
نسخنا اللون زين
نروح نلصقه الان في خلفية المنتدى بس مانمسح علامة المربع (#) واللي بيمسحها الله يعينها يكتبها
بس ابي اريحكم
لصقنا اللون ... طيب وين save css ... اضغطه عليها من غير ماتشاور
مثل كذا
http://www.traidnt.net/vb/images/Style/dros/body/manger-11.jpg
روح حدث صفحة المنتدى وشوف صار شئ ؟؟؟
http://www.traidnt.net/vb/index.php?s=&styleid=1
شاهد الصوره بعد التغيير ... يعني السالفه ماهي قصيره ... يبيلها بعد
http://www.traidnt.net/vb/images/Style/dros/body/manger-12.jpg
نروح اللحين للمتغير الثاني اللي هو
:: Page Background ::
وهذا للتلوين الداخلي (مثل مافهمتك في دروس الاعدادات)
http://www.traidnt.net/vb/images/Style/dros/body/manger-13.jpg
طبعاً ان ثقلنا اللون فراح يتشوه الاستايل وان خففناه فراح ماله اثر وان طابقناه مع خلفية المنتدى فراح يمشي تمام
في حاله وحده تخالفه
انك تحط في مربع Extra CSS Attributes هذا الامر
border: 1px solid #0B198C;
مع تغيير اللون هذا 0B198C بما يناسبك
بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون
بالنسبه لي فانا طابقت نفس لون الخلفيه (العالم مزاجات http://www.traidnt.net/vb/images/smilies/nosweat.gif )
نشوف الصوره
http://www.traidnt.net/vb/images/Style/dros/body/manger-14.jpg
اللحين نقدر نقول لكم عليه
زوين وماشي حاله
بس باقي ... ورانا خـــــــــــــط http://www.traidnt.net/vb/images/smilies/icon31.gif
نروح اللحين للمتغير الثالث اللي هو
:: <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
للمعلوميه هذان المتعيران راح تغير اشياء كثيره في المنتدى
مثل المواضيع والردود والاقسام .. الخ
تغيير جميع الالوان بمايتوافق مع لون الهيدر والفوتر
تلوين الجسم
ندخل على لوحة تحكم المنتدى
ومنها ننتقل الى ستايلات & القوالب
ونختارمنها : 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
نشوف الصوره اللي محدد باللون الاحمر هو المطلوب
http://www.traidnt.net/vb/images/Style/dros/body/manger-3.jpg
مشكله http://www.traidnt.net/vb/images/smilies/crazy.gif ؟؟؟؟؟
وشلون نخلي لون الخلفيه مطابق للهيدر والفوتر ويكون المنتدى منسق؟؟
الحل الوحيد نعمل برنت اسكنر
(نروح للمنتدى واما نطلع للهيدر او ننزل للفوتر ونضغط من الكي بورد على كلمة Print Screen)
ورحنا للفوتوشوب ونضغط على كلمة Fill ونفتح عمل جديد وراح يطلع لنا
مقاسات الصفحه اللي سوينا لها تصوير بـ Print Screen
طيب انفتح لنا العمل الجديد وبالمقاسات المصوره من الشاشه (وكلاً على حسب قياس شاشته)
نلصق التصوير بالضغط على الكي بورد (Ctrl + V)
مثل مانا سويت (نشوف الصوره)
http://www.traidnt.net/vb/images/Style/dros/body/manger-4.jpg
اللحين لصقنا العمل (طيب وشو اللون اللي راح نختاره؟) http://www.traidnt.net/vb/images/smilies/nosweat.gif
طبعاً نشوف وش راح يناسب الصفحه من حيث التناسق .. فراح يكون مثل مافي الصوره
شوف اللي محاط باللون الاحمر
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
نسخنا اللون زين
نروح نلصقه الان في خلفية المنتدى بس مانمسح علامة المربع (#) واللي بيمسحها الله يعينها يكتبها
بس ابي اريحكم
لصقنا اللون ... طيب وين save css ... اضغطه عليها من غير ماتشاور
مثل كذا
http://www.traidnt.net/vb/images/Style/dros/body/manger-11.jpg
روح حدث صفحة المنتدى وشوف صار شئ ؟؟؟
http://www.traidnt.net/vb/index.php?s=&styleid=1
شاهد الصوره بعد التغيير ... يعني السالفه ماهي قصيره ... يبيلها بعد
http://www.traidnt.net/vb/images/Style/dros/body/manger-12.jpg
نروح اللحين للمتغير الثاني اللي هو
:: Page Background ::
وهذا للتلوين الداخلي (مثل مافهمتك في دروس الاعدادات)
http://www.traidnt.net/vb/images/Style/dros/body/manger-13.jpg
طبعاً ان ثقلنا اللون فراح يتشوه الاستايل وان خففناه فراح ماله اثر وان طابقناه مع خلفية المنتدى فراح يمشي تمام
في حاله وحده تخالفه
انك تحط في مربع Extra CSS Attributes هذا الامر
border: 1px solid #0B198C;
مع تغيير اللون هذا 0B198C بما يناسبك
بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون
بالنسبه لي فانا طابقت نفس لون الخلفيه (العالم مزاجات http://www.traidnt.net/vb/images/smilies/nosweat.gif )
نشوف الصوره
http://www.traidnt.net/vb/images/Style/dros/body/manger-14.jpg
اللحين نقدر نقول لكم عليه
زوين وماشي حاله
بس باقي ... ورانا خـــــــــــــط http://www.traidnt.net/vb/images/smilies/icon31.gif
نروح اللحين للمتغير الثالث اللي هو
:: <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
للمعلوميه هذان المتعيران راح تغير اشياء كثيره في المنتدى
مثل المواضيع والردود والاقسام .. الخ