![]() |
شرح كامل لكيفية تغيير الوان الاستايل Css وإعداد ملف Xml لمنتدي Vb
شرح تلوين جميع اجزاء الإستايل(css) واعداد ملف(xml) بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاتة درس اليوم اجمل درس في تصميم الاستايلات تلوين الاستايل واخرج ملف الاكسمل لكي يستفيد الجميع من الاستايل بعد الدخول للوحة التحكم للمنتدى نختار التحكم بالاستايلات Download23379 تظهر لنا قائمة الاستايلات ونختار متغير CSS Download55407 الان جه وقت التلوين والابداع ناخذ اداة القطاره بالفوتوشوب ونشرب كاس شاي ثم نبتدي بااول متغير خلفية المنتدى/Body Download65542 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- تلوين اسامي الاقسام واخر المشاراكات باللون الي يكون مناسب للتصميم واللون الاحمر عند المرور على اسم القسم نغيرة للون برضو الي ينسبنا توضيح بسيط كيف نأخذ الالوان من التصميم ونركبها في الاعدادات نروح لااداة القطاره توضيح بسيط كيف نأخذ الالوان من التصميم ونركبها في الاعدادات نروح لااداة القطاره Download27794 ثم تطلع لنا لوحة الالوان Download71265 1- تنيق الوان الاستايل بجيمع تدرجات الالوان 2- نحدد ثم ننسخ الكود ثم نضعه في خيارات واعدادات css الان نشوف قالب خلفية المنتدى/Body في الستايل وكيف طلع Download56811 والى هنا ننتهي من شرح اهم النقاط في التلوين وكيفة الاعداد المتغير الثاني خلفية الصفحة/Page Background Download60071 لون ابيض سوف تلاحضونة بجوانب اقسام المنتدى غيرة الى اللون المستخدم في خلفية الاستايل في نفس القالب الاول البودي او اترركوة واذا تريدو حذفة من متغيرات الاستيال ثاني خيار اجعلوه 0 اول بالحجم المناسب المتغير الثالث <td>, <th>, <p>, <li> ( التخصيص في هذا الستايل ) Download34872 فقط نقوم بتغيير نوع الخط وحجمه المتغير الرابع حدود الجدول Download39492 اللون الاصفر لون الحد الدخلي نقوم بتغييرة الى اللون المناسب اللون الاحمر الحد الخاري فقط نغير كود اللون باللون المناسب صورة من الاستايل لمكان الحدود قبل التعديل Download26692 صورة بعد التعديل Download55338 المتغير الخامس الأقسام الرئيسية/Category Strips Download74234 نغير ونصمم من خلاله التدرج ومن اعتيادي روابط CSS بنفس القالب نغير لون اسم القسم لون الخط وزي مانعرف اللون الاخير هو عن مرور الماوس علية نشوف اماكن القالب في المنتدى Download65837 معنا التدرج اللوني الي محدده باللون الاحمر وهذا الرابط تبعه رمز PHP: 869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left رمز PHP: #F7E3A5 url(design009/back0.gif) repeat-x top left design009 ملف الاستايل نعدله على اسم استيلنا ( على حسب المثال ) back0.gif اسم التدرج اللوني والصية لاننسها ( على حسب المثال ) يجب ان تكون صيغى الصورة gif الان شرح كيفية عمل التدرج نشوف التدرج Download37359 الطول 200 والعرض 2لانو العرض مايهم نفتح الفوتوشوب علشان نسوي عمل جديد العرض نخلية مثلا 200 والطول 200 علشان نقدر نعمل التدرج بشكل بسيط مانعقد الامور Download81734 لازم تكون الوان متناسقه ومناسبة للاستايل الان نشاهد بعد التعديل كيف صار شكلة القالب Download50057 التغير في الاستايل Download51613 مشاء الله الاستايل كل شوي وشكله يحلو Download26658 الان بنفس الفكرة ناتي للمتغير الخامس رأس الجدول/Table Header ( التخصيص في هذا الستايل ) صورة القالب بعد التعديل ماتشووفو كيف صار لون الاكود كله احمر يعني تم التعديل لانو معاد يحتاج قبل وبعد التعديل Download32192 Download63145 لكن المهم نشوف الامكان حق راس الجداول Download58808 ورح نلاقية بشكل عام في كل مكان في المنتدى فية احصئيات ناتبع والحمد لله للحين واصلين القالب الثامن نهاية الجدول/Table Footer الصورة بعد التعديل علية لازم نسويه نفس قالب رأس الجدول/Table Header ( التخصيص في هذا الستايل ) علشان يكون في الاستايل تناسق ويطلع بشكله الجميل لكن المبعدين في انتقا وتنويع الالون يقدرو يغيرو براحتهم Download74629 صورة لمكان القالب Download88932 نقدر نسوي بدل التدرج لون وعلى حسب مانشوفه في عمل الاستايل ولي رح يحط لون يكون نفس لون خلفية الاستايل في اول قالب القالب التاسع لون التوزيع الأول/First Alternating Color صورة للقالب Download21238 مكان التوزيع الاول + مكان التوزيع الثاني Download74183 الان نشاهد قالب التوزيع الاول بعد التعديل والتوضيح علية Download35935 القالب العاشر لون التوزيع الثاني/Second Alternating Color نقوم بعمل نفس التعديل كما عملنا في القالب في التوز يع الاول ولكن هنا نقوم بتغيير لون الخلفية للتوزيع الثاني بلون اخر الكل رح يقول كيف نقدر نختار لو ن الخلفية للتوزيع الاول والتويز الثاني الطريقة كثيره سهله نستوحي اللونين من لون الاستايل الى جانب لون التوزيع الاول للخلفية يكون فاتح والتوزيع الثاني اغمق قليلا Download34607 الان نشاهد صورة للتوزيعين بعد التعديل عليهما Download78420 الى هنا انتيهنا من تلوين قالب التوزيعين واهم شي هذولا القالبين :icon26: علشان العمل يطلع جميل القالب العاشر منقول للإفادة :009:محرر WYSIWYG (يجب أن يكون عادةً متماثل مع 'لون التوزيع الأول/First Alternating Color' أو 'خلفية الكتابة/Input Fields') صورة توضيحية للقالب وكيف تم اضافة لون للخلفية الرقم1 وتغيير نوع وحجم الخط ولونه في اللون رقم2 Download40269 صورة توضيحية لمكان القالب في الاستايل ونتيجة التعديل علية Download82681 القالب هو لتغيير لون خلفية وخط لوحت كتابة الموضوع وعنون الموضوع ---------- القالب الحادي عشر مساعدة خلفية الكتابة/Input Fields هو نفس القالب العاشر ولكن هذا مختص بتغيير لون خلفية ونوع الخط في الرد السريع صورة لتعديل القالب Download30446 صورة توضيحية لمكان القالب والتطبيق Download53648 القالب الثاني عشر مساعدة الأزرار/Buttons نقوم بتطبيق التالي على القالب فقط نقوم بتغيير نوع الخط وحجمه Download48088 صورة توضح االازرار ومكان توجدها Download85989 -------------------- المتغير الثالث عشر مساعدة قوائم <select> فقط نقوم بتغيير نوع الخط وحجمه المتغير يتحكم بلون خلفية القوائم المنسدلة ولون الخط 1-قائمة تبديل الاستايل Download71442 2-قائمة خيارات عرض المواضيع Download29352 3قائمة الانتقال السريع Download52799 القالب الرابع عشر لون الوقت فقط نقوم نقوم بتغيير لون ونوع الخط وحجمه في المتغير Download41513 اماكن الوقت في الاستايل تسجيل دخول العضو اعلى الفوتور في رئيسة المنتدى في خانة اخر المشاركات اعلى المواضيع صور توضحية لاهم للوقت Download54224 Download82292 ------------------------------- المتغير الخامس عشر مساعدة نص شريط العنوان/Navbar Text ( التخصيص في هذا الستايل ) في هذا المتغير فقط نقوم بتغيير لون الخط ونوعه وحجمه فقط Download58205 صورة توضيحية لمكان المتغير على الاستايل Download19562 تغير لون اسم القسم بعد الدخول عليه وبرز باللون الاسود ----------------------------- المتغير السادس عشر مساعدة الخط المبرز /Highlighted نقوم بتركه كما هواء ولا نغير شي المتغير السابع عشر مساعدة إبراز عنصر السطر الإداري/Inline Moderation Element Highlight لايتم تغيير اي شي فيه Download66526 |
تغيير الوان استايل Css كاملاً
المتغير محيط اللوحة/Panel Surround صورة المتغير بعد التعديل علية Download34041 صور توضيح مكان المتغير والتعديل على الاستايل خلفية الرد السريع Download46922 خلفية الوضع المتقدم وعند كتابة الموضوع Download58259 خلفية الخيارات الاضافية Download74099 المتغير اللوحة (الأشكال)/Panel Forms وهو لتغيير خلفية المحرر للرد السريع وكتابة موضوع جديد والوضع المتقدم والخيارات الاضافية عكس الخيارا الاول Download88535 صورة توضح مكانة في الاستايل وهو نفس المتغير الي قبله يعني عكس Download74918 الكود المستخد كود:
padding: 10px; مساعدة <legend> صورة للتعديل على المتغير Download16290 تنبية بسيط لانقوم بعمل لون للخلفية فقط نغير لون الخط وحجمه ونوعة صورة توضح مكان الخيارا على الاستايل Download61679 ويتواجد الخيارا في 1-تعديل الملف الشخصي 2- تعديل الخياراة يعني مهم ويجب نختار لون منسق ومناسب |
[b]المتغير التحكم بالقوائم المنبثقة/Popup Menu Controls يجب ان يكون المتغير بنفس متغير (الأقسام الرئيسية/Category Strips ) كما شرحنا في المتغير الخامس هنا صورة للمتغير بعد التعديل علية Download43725 صورة المتغير على الاستايل Download80919 صورة المتغير في قالب الفورم ديسبلي Download60611 المتغير مساعدة جسم قائمة الإنبثاق/Popup Menu Body صورة المتغير والتعديل عليه فقط هو لون الاطار الدخلي والخارجي للقوائم المنبثقه Download54963 المتغير على شريط NAVBAR صورة التعديل وكيف صار المتغير Download65102 الان ستفكر على اي اساس قمنا بتلوين المتغير بسيطه كل ماعليك تطبق فقط مثل ماسوينا في المتغير حدود الجداول للاستايل المتغير مساعدة خيار صف قائمة الإنبثاق/Popup Menu Option Row لنفس الخيارا الي قبله بس هاذي المره يغير خلفية الخيار ولون الخط Download86546 1- خلفية الخيار 2- لون الخط صورة توضيحية Download79571 المتغير مساعدة خيار سطوع القوائم المنبثقة/Popup Menu Highlighted Option برضو تابع للخيار الي قبله والي قبله حلوه صح صورة للتعديل على المتغير Download53521 المتغير يقوم بتغيير لون خلفية القائمة المنسدله اثنا المرور عليها وابراز الخط Download36815 لاحضو كيف تغير لون الخلفية وبرز الخط وصار ابيض وبالتوفيق يارب للجميع وكل شي يكون بسيط وسهل |
المتغير الاخير خلاص الحمد لله خلصنا الشغل مساعدة قائمة الانتقال السريع صورة للتعديل على الخيار Download72252 صورة توضيح للخيار بعد التعديل وكيف تغير Download73968 وباقي خيارات الانتقال السريع واجب الان بفضل الله تم الانتهاء من درس اعداد ملف الاكسمل وتلوين الاستايل بعض النقط المهمه النقطه الاولى بعض الاسئلة قد تدور في ذهن مصمم الاستايلات والي يريد يطلع بعمل جميل وتلوين احترافي كيف يتم اختيار الالون ؟؟ بسيطه جدا كلنا نعرف انو اللون الاسود والابيض والرصاصي بجميع تدرجاته تتناسب مع جميع الالون النقطه الثانية قبل تصميم الاستايل نفكر بنوع الاستايل هل سيكون الاستايل دجتل او استايل لمنتدى اسلامي او رياضي بعدها نقوم بكتابة الافكار في ورقة علشان وقت العمل ماتشتت افكارك وتتعقد بعد مانسوي التصميم ونجي للتلوين نقوم بااخذ القطاره ومن التصميم نفسه ناخذ الوان الاستايل بجميع تدرجاته لنحصل على استايل منسق |
| الساعة الآن 07:36 AM. |
Powered by vBulletin Version 3.8.11
Copyright ©2000 - 2026, Jelsoft Enterprises Ltd
استضافة
,
دعم فنى