شرح بالصورة كيف تغير جميع الوان اجزاء الإستايل css وإعداد ملف xml

[جليس الذكرى]

كيفية تغير جميع الوان اجزاء الإستايل css وإعداد ملف xml شرح بالصور




شرح تلوين جميع اجزاء الإستايل(css) واعداد ملف(xml)

بسم الله الرحمن الرحيم


السلام عليكم ورحمة الله وبركاتة


درس اليوم اجمل درس في تصميم الاستايلات


تلوين الاستايل واخرج ملف الا**********مل لكي يستفيد الجميع من الاستايل


بعد الدخول للوحة التحكم للمنتدى


نختار التحكم بالاستايلات


http://www.aljawariss.net/upload/Folder-02/1217957889_3_1192280864.gif


تظهر لنا قائمة الاستايلات ونختار متغير CSS





http://www.aljawariss.net/upload/Folder-02/1217958021_3_11922803.gif



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


ثم نبتدي بااول متغير


خلفية المنتدى/Body




http://www.aljawariss.net/upload/Folder-02/1217958250_3_119228111.gif


1- نقوم بمسح محتواة بالكامل واستبدالة بالكود التالي




رمز PHP:

margin:-0px 0px 0px 0px;


رمز PHP:


padding: 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/Folder-02/1217958652_3_1192282617.gif







1- تنيق الوان الاستايل بجيمع تدرجات الالوان






2- نحدد ثم ننسخ الكود ثم نضعه في خيارات واعدادات css







الان نشوف قالب خلفية المنتدى/Body






في الستايل وكيف طلع






http://www.aljawariss.net/upload/Folder-02/1217958887_3_1192282610.gif







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


المتغير الثاني


خلفية الصفحة/Page Background





http://www.aljawariss.net/upload/Folder-02/1217960703_399998y6867.gif


لون ابيض سوف تلاحضونة بجوانب اقسام المنتدى


غيرة الى اللون المستخدم في خلفية الاستايل في نفس القالب الاول البودي


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



المتغير الثالث


, ,
, ( التخصيص في هذا الستايل )






http://www.aljawariss.net/upload/Folder-02/1217961276_39988-01.gif


فقط نقوم بتغيير نوع الخط وحجمه


المتغير الرابع

حدود الجدول



http://www.aljawariss.net/upload/Folder-02/1217961926_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/Folder-02/1217965035_3_1192v.gif



نغير ونصمم من خلاله التدرج


ومن اعتيادي روابط CSS بنفس القالب


نغير لون اسم القسم لون الخط وزي مانعرف اللون الاخير هو عن مرور الماوس علية



نشوف اماكن القالب في المنتدى


http://www.aljawariss.net/upload/Folder-02/1217965101_3_188design009.gif


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


وهذا الرابط تبعه

رمز 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


الان شرح كيفية عمل التدرج


نشوف التدرج


http://sho3a.com/vb/sho3a3/3_1192289192.gif


الطول 200 والعرض 2لانو العرض مايهم


نفتح الفوتوشوب علشان نسوي عمل جديد العرض نخلية مثلا 200


والطول 200 علشان نقدر نعمل التدرج بشكل بسيط مانعقد الامور :cupidarrow: لازم تكون


الوان متناسقه ومناسبة للاستايل





الان نشاهد بعد التعديل كيف صار شكلة القالب




http://www.aljawariss.net/upload/Folder-02/1217966042_3_11922898.gif



التغير في الاستايل



http://www.aljawariss.net/upload/Folder-02/1217966161_99.gif





مشاء الله الاستايل كل شوي وشكله يحلو :clap:


الان بنفس الفكرة ناتي للمتغير الخامس


رأس الجدول/Table Header ( التخصيص في هذا الستايل )


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


لانو معاد يحتاج قبل وبعد التعديل :bleh:




http://www.aljawariss.net/upload/Folder-02/1217966347_99987.gif


لكن المهم نشوف الامكان حق راس الجداول




http://sho3a.com/vb/sho3a3/3_1192289974.gif


ورح نلاقية بشكل عام في كل مكان في المنتدى فية احصئيات

ناتبع والحمد لله للحين واصلين

القالب الثامن

نهاية الجدول/Table Footer

الصورة بعد التعديل علية لازم نسويه نفس قالب رأس الجدول/Table Header ( التخصيص في هذا الستايل )

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




http://www.aljawariss.net/upload/Folder-02/1218103498_3_998.gif


صورة لمكان القالب




http://www.aljawariss.net/upload/Folder-02/1218103697_3_99987.gif



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

يكون نفس لون خلفية الاستايل في اول قالب

القالب التاسع

لون التوزيع الأول/First Alternating Color

صورة للقالب





http://www.aljawariss.net/upload/Folder-02/1218103982_3_99987_987.gif


مكان التوزيع الاول + مكان التوزيع الثاني


http://www.aljawariss.net/upload/Folder-02/1218104121_3_99987_980.gif

الان نشاهد قالب التوزيع الاول بعد التعديل والتوضيح علية



http://www.aljawariss.net/upload/Folder-02/1218105245_3_99987_9812.gif



القالب العاشر

لون التوزيع الثاني/Second Alternating Color

نقوم بعمل نفس التعديل كما عملنا في القالب في التوز يع الاول

ولكن هنا نقوم بتغيير لون الخلفية للتوزيع الثاني بلون اخر

الكل رح يقول كيف نقدر نختار لو ن الخلفية للتوزيع الاول والتويز الثاني الطريقة كثيره سهله

نستوحي اللونين من لون الاستايل الى جانب لون التوزيع الاول للخلفية يكون فاتح والتوزيع الثاني اغمق قليلا




http://www.aljawariss.net/upload/Folder-02/1218105409_5_99987.gif


الان نشاهد صورة للتوزيعين بعد التعديل عليهما

http://www.aljawariss.net/upload/Folder-02/1218105525_5_omar_design.gif

الى هنا انتيهنا من تلوين قالب التوزيعين واهم شي هذولا القالبين :cupidarrow: علشان العمل يطلع جميل


القالب العاشر


محرر WYSIWYG (يجب أن يكون عادةً متماثل مع 'لون التوزيع الأول/First Alternating Color' أو 'خلفية الكتابة/Input Fields')


صورة توضيحية للقالب وكيف تم اضافة لون للخلفية الرقم1

وتغيير نوع وحجم الخط ولونه في اللون رقم2




http://www.aljawariss.net/upload/Folder-02/1218106229_3_1193666415.gif



صورة توضيحية لمكان القالب في الاستايل ونتيجة التعديل علية


http://www.aljawariss.net/upload/Folder-02/1218106343_3_119398.gif


القالب هو لتغيير لون خلفية وخط لوحت كتابة الموضوع وعنون الموضوع

----------

القالب الحادي عشر

مساعدة خلفية الكتابة/Input Fields

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

صورة لتعديل القالب




http://www.aljawariss.net/upload/Folder-02/1218106565_3_119398kijjh.gif


صورة توضيحية لمكان القالب والتطبيق



http://www.aljawariss.net/upload/Folder-02/1218106117_3_37omar87.gif



القالب الثاني عشر

مساعدة الأزرار/Buttons

نقوم بتطبيق التالي على القالب

فقط نقوم بتغيير نوع الخط وحجمه




http://www.aljawariss.net/upload/Folder-02/1218106816_3_omar12321111.gif


صورة توضح االازرار ومكان توجدها

http://www.aljawariss.net/upload/Folder-02/1218107034_3_1193d.gif



--------------------

المتغير الثالث عشر

مساعدة قوائم


فقط نقوم بتغيير نوع الخط وحجمه

المتغير يتحكم بلون خلفية القوائم المنسدلة ولون الخط

1-قائمة تبديل الاستايل

http://www.aljawariss.net/upload/Folder-02/1218107125_3_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/Folder-02/1218107394_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/Folder-02/1218107533_3_119380000000.gif


صورة توضيحية لمكان المتغير على الاستايل



http://www.aljawariss.net/upload/Folder-02/1218107606_3_1193877000.gif



تغير لون اسم القسم بعد الدخول عليه وبرز باللون الاسود


-----------------------------

المتغير السادس عشر

مساعدة الخط المبرز /Highlighted

نقوم بتركه كما هواء ولا نغير شي




المتغير السابع عشر

مساعدة إبراز عنصر السطر الإداري/Inline Moderation Element Highlight

لايتم تغيير اي شي فيه




http://www.aljawariss.net/upload/Folder-02/1218107936_3_119g8700.gif

منقول للفائدة