جليس الذكرى
04-23-2010, 11:39 PM
كيفية تغير جميع الوان اجزاء الإستايل 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
منقول للفائدة
شرح تلوين جميع اجزاء الإستايل(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
منقول للفائدة