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

MafiawwY

Designer
10 مارس 2008
206
15
18
Mansoura
www.support-ar.com

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

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


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


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


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


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


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


1217957889_3_1192280864.gif



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





1217958021_3_11922803.gif




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


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


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




1217958250_3_119228111.gif



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





كود:
margin:-0px 0px 0px 0px;  [/code[/LEFT]


[/SIZE][/CENTER]
 [/LEFT]

[SIZE=4][COLOR=#8b0000]2- لون خلفية المنتدى حسب[/COLOR][/SIZE][/SIZE] لو[SIZE=4][SIZE=4][COLOR=#8b0000]ن خلفية تصميم الاستايل الي احنا مسوينة 




[/COLOR][/SIZE]
[CENTER][FONT=Arial][SIZE=4][COLOR=#8b0000][B]3- حجم الخط للي يريد يسوي نفس الخط الي احنا مسوينا في الموقع يسوي 8pt[/B][/COLOR][/SIZE][/FONT]






[SIZE=4][FONT=Arial][COLOR=darkred][B]4-نوع الخط للي يريد يكون كل الخطوط في موقعه خط ثوما الانيق والصغير يغيرة بهذا [/B][/COLOR][/FONT][/SIZE][/CENTER]




[/SIZE][SIZE=4][LEFT][code]tahoma,MS Sans Serif,verdana,arial,helvetica,sans-serif

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




المرور على اسم القسم نغيرة للون برضو الي ينسبنا







توضيح بسيط كيف نأخذ الالوان من التصميم ونركبها في الاعدادات







نروح لااداة القطاره






توضيح بسيط كيف نأخذ الالوان من التصميم ونركبها في الاعدادات






نروح لااداة القطاره






3_1192282478.gif







ثم تطلع لنا لوحة الالوان






1217958652_3_1192282617.gif








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






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







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






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






1217958887_3_1192282610.gif








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

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


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





1217960703_399998y6867.gif



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


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


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



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


<td>, <th>, <p>, <li> ( التخصيص في هذا الستايل )





1217961276_39988-01.gif



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


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

حدود الجدول



1217961926_39988-2111.gif



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

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

صورة من الاستايل لمكان الحدود

قبل التعديل

3_1192286897.gif


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

3_1192287126.gif


المتغير الخامس



الأقسام الرئيسية/Category Strips





1217965035_3_1192v.gif




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


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


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



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


1217965101_3_188design009.gif



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


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


كود:
869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left


كود:
#F7E3A5 url(design009/back0.gif) repeat-x top left


design009 ملف الاستايل نعدله على اسم استيلنا ( على حسب المثال )



back0.gif اسم التدرج اللوني والصية لاننسها ( على حسب المثال ) يجب ان تكون صيغى الصورة gif


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


نشوف التدرج


3_1192289192.gif



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


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


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


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





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




1217966042_3_11922898.gif




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



1217966161_99.gif




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


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


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


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


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




1217966347_99987.gif



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




3_1192289974.gif



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

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

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

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

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

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




1218103498_3_998.gif



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




1218103697_3_99987.gif




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

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


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

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

صورة للقالب





1218103982_3_99987_987.gif



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


1218104121_3_99987_980.gif


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



1218105245_3_99987_9812.gif




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

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

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

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

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

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




1218105409_5_99987.gif



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

1218105525_5_omar_design.gif


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

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


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


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

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




1218106229_3_1193666415.gif




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


1218106343_3_119398.gif



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

----------

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

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

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

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




1218106565_3_119398kijjh.gif



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



1218106117_3_37omar87.gif



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

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

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

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





1218106816_3_omar12321111.gif



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

1218107034_3_1193d.gif




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

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

مساعدة قوائم <select>


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

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

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

1218107125_3_1193omaaaa.gif


2-قائمة خيارات عرض المواضيع

3_1193667246.gif


3قائمة الانتقال السريع

3_1193667215.gif



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

لون الوقت

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




1218107394_3_1193825.gif




اماكن الوقت في الاستايل

تسجيل دخول العضو

اعلى الفوتور في رئيسة المنتدى

في خانة اخر المشاركات

اعلى المواضيع

صور توضحية لاهم للوقت

3_1193667622.gif


3_1193667652.gif






-------------------------------
المتغير الخامس عشر

مساعدة نص شريط العنوان/Navbar Text ( التخصيص في هذا الستايل )

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




1218107533_3_119380000000.gif



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



1218107606_3_1193877000.gif




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


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

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

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

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



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

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

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




1218107936_3_119g8700.gif




منقول للإفادة
 
التعديل الأخير:

MafiawwY

Designer
10 مارس 2008
206
15
18
Mansoura
www.support-ar.com
تكملة كيفية تغير جميع الوان اجزاء الإستايل css وإعداد ملف xml شرح بالصور

تكملة الموضوع 👏


المتغير

محيط اللوحة/Panel Surround

صورة المتغير بعد التعديل علية




3_1194184049.gif



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


خلفية الرد السريع

3_1194184098.gif



خلفية الوضع المتقدم وعند كتابة الموضوع

3_1194184134.gif



خلفية الخيارات الاضافية

3_1194184177.gif


المتغير

اللوحة (الأشكال)/Panel Forms

وهو لتغيير خلفية المحرر للرد السريع وكتابة موضوع جديد والوضع المتقدم

والخيارات الاضافية عكس الخيارا الاول




3_1194184403.gif



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

3_1194184453.gif



الكود المستخد



كود:
padding: 10px; 
border: 2px outset;
المتغير

مساعدة <legend>

صورة للتعديل على المتغير




3_1194184527.gif


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


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



ويتواجد الخيارا في

1-تعديل الملف الشخصي

2- تعديل الخياراة

يعني مهم ويجب نختار لون منسق ومناسب

المتغير

التحكم بالقوائم المنبثقة/Popup Menu Controls


يجب ان يكون المتغير بنفس متغير (الأقسام الرئيسية/Category Strips )

كما شرحنا في المتغير الخامس هنا

صورة للمتغير بعد التعديل علية










صورة المتغير على الاستايل




3_1194184931.gif


صورة المتغير في قالب الفورم ديسبلي



المتغير

مساعدة جسم قائمة الإنبثاق/Popup Menu Body


صورة المتغير والتعديل عليه فقط هو لون الاطار الدخلي والخارجي

للقوائم المنبثقه




3_1194185205.gif



المتغير على شريط NAVBAR

صورة التعديل وكيف صار المتغير

3_1194185325.gif



الان ستفكر على اي اساس قمنا بتلوين المتغير بسيطه

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

المتغير

مساعدة خيار صف قائمة الإنبثاق/Popup Menu Option Row

لنفس الخيارا الي قبله بس هاذي المره يغير خلفية الخيار ولون الخط




3_1194185531.gif


1- خلفية الخيار

2- لون الخط

صورة توضيحية

3_1194185639.gif


المتغير

مساعدة خيار سطوع القوائم المنبثقة/Popup Menu Highlighted Option

برضو تابع للخيار الي قبله والي قبله حلوه صح

صورة للتعديل على المتغير




3_1194185760.gif



المتغير يقوم بتغيير لون خلفية القائمة المنسدله اثنا المرور عليها وابراز الخط




لاحضو كيف تغير لون الخلفية وبرز الخط وصار ابيض

المتغير الاخير خلاص الحمد لله خلصنا الشغل

مساعدة قائمة الانتقال السريع

صورة للتعديل على الخيار




3_1194185885.gif


صورة توضيح للخيار بعد التعديل وكيف تغير





وباقي خيارات الانتقال السريع واجب



الان بفضل الله تم الانتهاء من درس اعداد ملف الاكسمل

وتلوين الاستايل

بعض النقط المهمه

النقطه الاولى

بعض الاسئلة قد تدور في ذهن مصمم الاستايلات والي يريد يطلع بعمل جميل وتلوين احترافي

كيف يتم اختيار الالون ؟؟

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


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

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

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

انتهي . . . . 💘


 

DxTeAm

عضو جديد
2 سبتمبر 2008
10
0
0
جزاك الله عنا خير الجزاء
 
التعديل الأخير بواسطة المشرف:

مـــــراد.

عضو جديد
22 يناير 2010
14
0
0
شكرا لك

بس اخوي بدي اطلب طلب اذا ممكن يا ريت الي بعرف يساعدني

انا عندي منتدى والرد السريع عندي لما الواحد يكتب مشاركة بالرد السريع

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

لما ينتقل للرد المطور بيكون مكتوب فوق

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

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

وبعدين رحت على العدد الادنى لعدد احرف المشاركة وعملتها 0 وجربت اعملها 1 وكما عملتها 10000 وما زبط معي شي

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

h@mza_39

عضو جديد
1 أغسطس 2009
1
0
0
هايل هايل هايل
يعطيك العافية شكرا

 

Ficen

عضو جديد
22 يناير 2009
80
1
0
Makkah
الله يعطيك العافية على الشرح