|
شرح بالصور تغير جميع الوان اجزاء الإستايل css وإعداد ملف xml شرح تلوين جميع اجزاء الإستايل(css) واعداد ملف(xml) بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاتة درس اليوم اجمل درس في تصميم الاستايلات تلوين الاستايل واخرج ملف الاكسمل لكي يستفيد الجميع من الاستايل بعد الدخول للوحة التحكم للمنتدى نختار التحكم بالاستايلات http://www.aljawariss.net/upload/Fol...1192280864.gif تظهر لنا قائمة الاستايلات ونختار متغير CSS http://www.aljawariss.net/upload/Fol...3_11922803.gif الان جه وقت التلوين والابداع ناخذ اداة القطاره بالفوتوشوب ونشرب كاس شاي ثم نبتدي بااول متغير خلفية المنتدى/Body http://www.aljawariss.net/upload/Fol..._119228111.gif 1- نقوم بمسح محتواة بالكامل واستبدالة بالكود التالي كود PHP: margin:-0px 0px 0px 0px; 2- لون خلفية المنتدى حسب لون خلفية تصميم الاستايل الي احنا مسوينة 3- حجم الخط للي يريد يسوي نفس الخط الي احنا مسوينا في الموقع يسوي 8pt 4-نوع الخط للي يريد يكون كل الخطوط في موقعه خط ثوما الانيق والصغير يغيرة بهذا كود PHP: tahoma,MS Sans Serif,verdana,arial,helvetica,sans-serif 5- تلوين اسامي الاقسام واخر المشاراكات باللون الي يكون مناسب للتصميم واللون الاحمر عند المرور على اسم القسم نغيرة للون برضو الي ينسبنا توضيح بسيط كيف نأخذ الالوان من التصميم ونركبها في الاعدادات نروح لااداة القطاره توضيح بسيط كيف نأخذ الالوان من التصميم ونركبها في الاعدادات نروح لااداة القطاره http://sho3a.com/vb/sho3a3/3_1192282478.gif ثم تطلع لنا لوحة الالوان http://www.aljawariss.net/upload/Fol...1192282617.gif 1- تنيق الوان الاستايل بجيمع تدرجات الالوان 2- نحدد ثم ننسخ الكود ثم نضعه في خيارات واعدادات css الان نشوف قالب خلفية المنتدى/Body في الستايل وكيف طلع http://www.aljawariss.net/upload/Fol...1192282610.gif والى هنا ننتهي من شرح اهم النقاط في التلوين وكيفة الاعداد المتغير الثاني او اترركوة واذا تريدو حذفة من متغيرات الاستيال ثاني خيار اجعلوه 0 اول بالحجم المناسب خلفية الصفحة/Page Background http://www.aljawariss.net/upload/Fol...99998y6867.gif لون ابيض سوف تلاحضونة بجوانب اقسام المنتدى غيرة الى اللون المستخدم في خلفية الاستايل في نفس القالب الاول البودي المتغير الثالث ( التخصيص في هذا الستايل ) فقط نقوم بتغيير نوع الخط وحجمه http://www.aljawariss.net/upload/Fol...39988-2111.gifالمتغير الرابع حدود الجدول اللون الاصفر لون الحد الدخلي نقوم بتغييرة الى اللون المناسب اللون الاحمر الحد الخاري فقط نغير كود اللون باللون المناسب صورة من الاستايل لمكان الحدود قبل التعديل http://sho3a.com/vb/sho3a3/3_1192286897.gif صورة بعد التعديل http://sho3a.com/vb/sho3a3/3_1192287126.gif المتغير الخامس الأقسام الرئيسية/Category Strips http://www.aljawariss.net/upload/Fol...35_3_1192v.gif نغير ونصمم من خلاله التدرج ومن اعتيادي روابط CSS بنفس القالب نغير لون اسم القسم لون الخط وزي مانعرف اللون الاخير هو عن مرور الماوس علية نشوف اماكن القالب في المنتدى http://www.aljawariss.net/upload/Fol...8design009.gif معنا التدرج اللوني الي محدده باللون الاحمر وهذا الرابط تبعه كود PHP: #F7E3A5 url(design009/back0.gif) repeat-x top left design009 ملف الاستايل نعدله على اسم استيلنا ( على حسب المثال ) back0.gif اسم التدرج اللوني والصية لاننسها ( على حسب المثال ) يجب ان تكون صيغى الصورة gif الان شرح كيفية عمل التدرج نشوف التدرج http://sho3a.com/vb/sho3a3/3_1192289192.gif الطول 200 والعرض 2لانو العرض مايهم نفتح الفوتوشوب علشان نسوي عمل جديد العرض نخلية مثلا 200 والطول 200 علشان نقدر نعمل التدرج بشكل بسيط مانعقد الامور http://www.support-ar.com/vb/images/...cupidarrow.gif لازم تكون الوان متناسقه ومناسبة للاستايل الان نشاهد بعد التعديل كيف صار شكلة القالب http://www.aljawariss.net/upload/Fol...3_11922898.gif التغير في الاستايل http://www.aljawariss.net/upload/Fol...7966161_99.gif مشاء الله الاستايل كل شوي وشكله يحلو http://www.support-ar.com/vb/images/smilies/clap.gif الان بنفس الفكرة ناتي للمتغير الخامس رأس الجدول/Table Header ( التخصيص في هذا الستايل ) صورة القالب بعد التعديل ماتشووفو كيف صار لون الاكود كله احمر يعني تم التعديل لانو معاد يحتاج قبل وبعد التعديل http://www.support-ar.com/vb/images/smilies/bleh.gif http://www.aljawariss.net/upload/Fol...6347_99987.gif لكن المهم نشوف الامكان حق راس الجداول http://sho3a.com/vb/sho3a3/3_1192289974.gif ورح نلاقية بشكل عام في كل مكان في المنتدى فية احصئيات ناتبع والحمد لله للحين واصلين القالب الثامن نهاية الجدول/Table Footer الصورة بعد التعديل علية لازم نسويه نفس قالب رأس الجدول/Table Header ( التخصيص في هذا الستايل ) علشان يكون في الاستايل تناسق ويطلع بشكله الجميل لكن المبعدين في انتقا وتنويع الالون يقدرو يغيرو براحتهم http://www.aljawariss.net/upload/Fol...3498_3_998.gif صورة لمكان القالب http://www.aljawariss.net/upload/Fol...97_3_99987.gif نقدر نسوي بدل التدرج لون وعلى حسب مانشوفه في عمل الاستايل ولي رح يحط لون يكون نفس لون خلفية الاستايل في اول قالب القالب التاسع لون التوزيع الأول/First Alternating Color صورة للقالب http://www.aljawariss.net/upload/Fol..._99987_987.gif مكان التوزيع الاول + مكان التوزيع الثاني http://www.aljawariss.net/upload/Fol..._99987_980.gif الان نشاهد قالب التوزيع الاول بعد التعديل والتوضيح علية http://www.aljawariss.net/upload/Fol...99987_9812.gif القالب العاشر لون التوزيع الثاني/Second Alternating Color نقوم بعمل نفس التعديل كما عملنا في القالب في التوز يع الاول ولكن هنا نقوم بتغيير لون الخلفية للتوزيع الثاني بلون اخر الكل رح يقول كيف نقدر نختار لو ن الخلفية للتوزيع الاول والتويز الثاني الطريقة كثيره سهله نستوحي اللونين من لون الاستايل الى جانب لون التوزيع الاول للخلفية يكون فاتح والتوزيع الثاني اغمق قليلا http://www.aljawariss.net/upload/Fol...09_5_99987.gif الان نشاهد صورة للتوزيعين بعد التعديل عليهما http://www.aljawariss.net/upload/Fol...mar_design.gif الى هنا انتيهنا من تلوين قالب التوزيعين واهم شي هذولا القالبين http://www.support-ar.com/vb/images/...cupidarrow.gif علشان العمل يطلع جميل القالب العاشر محرر WYSIWYG (يجب أن يكون عادةً متماثل مع 'لون التوزيع الأول/First Alternating Color' أو 'خلفية الكتابة/Input Fields') صورة توضيحية للقالب وكيف تم اضافة لون للخلفية الرقم1 وتغيير نوع وحجم الخط ولونه في اللون رقم2 http://www.aljawariss.net/upload/Fol...1193666415.gif صورة توضيحية لمكان القالب في الاستايل ونتيجة التعديل علية http://www.aljawariss.net/upload/Fol...3_3_119398.gif القالب هو لتغيير لون خلفية وخط لوحت كتابة الموضوع وعنون الموضوع ---------- القالب الحادي عشر مساعدة خلفية الكتابة/Input Fields هو نفس القالب العاشر ولكن هذا مختص بتغيير لون خلفية ونوع الخط في الرد السريع صورة لتعديل القالب http://www.aljawariss.net/upload/Fol...19398kijjh.gif صورة توضيحية لمكان القالب والتطبيق http://www.aljawariss.net/upload/Fol...3_37omar87.gif القالب الثاني عشر مساعدة الأزرار/Buttons نقوم بتطبيق التالي على القالب فقط نقوم بتغيير نوع الخط وحجمه http://www.aljawariss.net/upload/Fol...34_3_1193d.gif -------------------- المتغير الثالث عشر مساعدة قوائم فقط نقوم بتغيير نوع الخط وحجمه المتغير يتحكم بلون خلفية القوائم المنسدلة ولون الخط 1-قائمة تبديل الاستايل http://www.aljawariss.net/upload/Fol...1193omaaaa.gif 2-قائمة خيارات عرض المواضيع http://sho3a.com/vb/sho3a3/3_1193667246.gif 3قائمة الانتقال السريع http://sho3a.com/vb/sho3a3/3_1193667215.gif القالب الرابع عشر لون الوقت فقط نقوم نقوم بتغيير لون ونوع الخط وحجمه في المتغير http://www.aljawariss.net/upload/Fol..._3_1193825.gif اماكن الوقت في الاستايل تسجيل دخول العضو اعلى الفوتور في رئيسة المنتدى في خانة اخر المشاركات اعلى المواضيع صور توضحية لاهم للوقت http://sho3a.com/vb/sho3a3/3_1193667622.gif http://sho3a.com/vb/sho3a3/3_1193667652.gif ------------------------------- المتغير الخامس عشر مساعدة نص شريط العنوان/Navbar Text ( التخصيص في هذا الستايل ) في هذا المتغير فقط نقوم بتغيير لون الخط ونوعه وحجمه فقط http://www.aljawariss.net/upload/Fol...9380000000.gif صورة توضيحية لمكان المتغير على الاستايل http://www.aljawariss.net/upload/Fol...1193877000.gif تغير لون اسم القسم بعد الدخول عليه وبرز باللون الاسود ----------------------------- المتغير السادس عشر مساعدة الخط المبرز /Highlighted نقوم بتركه كما هواء ولا نغير شي المتغير السابع عشر مساعدة إبراز عنصر السطر الإداري/Inline Moderation Element Highlight لايتم تغيير اي شي فيه http://www.aljawariss.net/upload/Fol...3_119g8700.gif |
| الساعة الآن 11:21 AM |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By
Almuhajir