الدرس الاول كيفية تصميم الاستايل بالفوتوشب

بسم الله الرحمن الرحيم
درس اليوم هو تغيير جميع الالوان بمايتوافق مع لون الهيدر والفوتر
نبدى في تلوين الجسم
ندخل على لوحة تحكم المنتدى
ومنها ننتقل الى ستايلات & القوالب
ونختارمنها : Style Manager

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وشو المطلوب منا بعد ماخلصنا الهيدر والفوتر وركبناها ؟
اللي نبي نسويه هو تلوين الخلفيه
فبعد ان ضغطنا على كلمة اذهب
نروح وندور على المتغير Body
نشوف الصوره اللي محدد باللون الاحمر هو المطلوب

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

مشكله [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] ؟؟؟؟؟

وشلون نخلي لون الخلفيه مطابق للهيدر والفوتر ويكون المنتدى منسق؟؟

الحل الوحيد نعمل برنت اسكنر
(نروح للمنتدى واما نطلع للهيدر او ننزل للفوتر ونضغط من الكي بورد على كلمة Print Screen)

ورحنا للفوتوشوب ونضغط على كلمة Fill ونفتح عمل جديد وراح يطلع لنا
مقاسات الصفحه اللي سوينا لها تصوير بـ Print Screen
طيب انفتح لنا العمل الجديد وبالمقاسات المصوره من الشاشه (وكلاً على حسب قياس شاشته)
نلصق التصوير بالضغط على الكي بورد (Ctrl + V)

مثل مانا سويت (نشوف الصوره)

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


اللحين لصقنا العمل (طيب وشو اللون اللي راح نختاره؟) [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طبعاً نشوف وش راح يناسب الصفحه من حيث التناسق .. فراح يكون مثل مافي الصوره
شوف اللي محاط باللون الاحمر

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طيب كيف يتم اختيار هاللون وباي اداة من الفوتوشوب ؟

نروح للادوات ونفتح على علبة الالوان

بالضغط على هذه الاداه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

اللحين راح يفتح لنا مربع او علبة الالوان

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

في نفس اللحظه نروح للصوره ومربع الالوان مفتوح (مهمه)


نمر بالماوس على المنطقه اللي ابغى اخذ منها اللون

فراح تطلع لك اداة تساعدك بالمهمه وهي هذه الاداه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

بمجرد مرور الماوس على اللون راح يطلع لك الدرجه حقة اللون

شوف الصوره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نروح نضلل اللون و وبطرف الماوس الايمن نضغط
راح يطلع لنا مربع حوار (ننسخه )

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

نسخنا اللون زين

نروح نلصقه الان في خلفية المنتدى بس مانمسح علامة المربع (#) واللي بيمسحها الله يعينها يكتبها
بس ابي اريحكم
لصقنا اللون ... طيب وين save css ... اضغطه عليها من غير ماتشاور

مثل كذا

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

روح حدث صفحة المنتدى وشوف صار شئ ؟؟؟

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




نروح اللحين للمتغير الثاني اللي هو
:: Page Background ::
وهذا للتلوين الداخلي (مثل مافهمتك في دروس الاعدادات)

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

طبعاً ان ثقلنا اللون فراح يتشوه الاستايل وان خففناه فراح ماله اثر وان طابقناه مع خلفية المنتدى فراح يمشي تمام

في حاله وحده تخالفه

انك تحط في مربع Extra CSS Attributes هذا الامر

border: 1px solid #0B198C;

مع تغيير اللون هذا 0B198C بما يناسبك

بحيث يكون بين الجزء الخاجري والداخلي حد لتفرقة اللون

بالنسبه لي فانا طابقت نفس لون الخلفيه (العالم مزاجات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] )

نشوف الصوره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

اللحين نقدر نقول لكم عليه
زوين وماشي حاله

بس باقي ... ورانا خـــــــــــــط [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


نروح اللحين للمتغير الثالث اللي هو
:: <td>, <th>, <p>, <li>::
وهذا للتلوين مناطق جزئيه داخله بالجداول
ومثل ماهو موضوع بالصوره انصح بعدم استخدامه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

::Table Border::

التحديد الكلي للمنتدي
يوجد بهذا المتغير تحديد داخلي وتحديد خارجي

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وعشانك مسوي استايل وش كبره وش عرضه

فلابد تتماشى مع التحديد اللي بديت منه

وعشان تعرف درجه التحديد

تروح تاخذ اي جزء في المنتدى

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

وتلصقه بالفوتوشوب

وتاخذ الدرجه مثل كذا

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

فالتحديد الخارجي يسبب تفخيم ليس جيد والخط لا وجود له

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]






نروح اللحين للمتغير الخامس اللي هو
:: Category Strips ::
وهذا خاص بلون الخلفيه اللي موجوده تحت مسميات الاقسام
نشوف الصوره

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وهذا شكلها بالمنتدى

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وعشان تعمل توافق مع الاستايل

فعندك في المتغير هذا الكود

#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left

معناته لازم تصمم خلفيه عرضها لايهم بس اهم شئ الطول يكون مابين 28 الى 30 بيالكلمة وسخة ولا يسمح المنتدى بها###ل

وانا افضل 30

واللحين صممت انا هذي


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

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

body

تعالوا نشوف كيف وضعها بالكود

#5C7099 url(images/test/body.jpg) repeat-x top left

طيب لون خلفيتها ماتغير

لازم نغيره بحيث يتوافق مع لون الاستايل

وشو لون الاستايل الرئيسي ؟

اكيد الاصفر

طيب ناخذ من درجاته

وانا اخذت هاللون EEDFA1

طيب ننسخ هاللون ونحطه في الكود ويصبح معنا بالشكل هذا

#EEDFA1 url(images/test/body.jpg) repeat-x top left


ويصبح خلفيه الاقسام بهذا الشكل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


ملاحظه :: الخطوط واحجامها راح نرجع لها
كل القصد الان هو تصميم استايل وتهيئة اللوانه وفي النهايه نعدل الخطوط ولون الخطوط واحجامها ونوعها




نروح اللحين للمتغير السادس اللي هو
:: Table Header::
وهذا خاص بلون الأرضية اللي موجوده تحت مسميات المنتدى + المواضيع والمشاركات والمراقبين

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وهذا شكلها بالمنتدى

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

مثل ماوضحت في الرد السابق


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

#5C7099 url(images/gradients/gradient_thead.gif) repeat-x top left

من الافضل تنسخ الكود اللي في المتغير الخامس

:: Category Strips ::

اللي هو هذا الكود

#EEDFA1 url(images/test/body.jpg) repeat-x top left

وتريح نفسك

لاحظ المنتدى الان بعد التغيير

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



الان المتغير السابع
وهو Table Footer= القسم السفلي للمنتدى
وهو خاص بلون الارضيه الموجوده في جزء محدد اسفل المنتدى ونشاهد الصوره انه بلون سماوي على موف

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ولمشاهدة المتغير بيكون بهذا الشكل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

اللحين نبي نوحد الخلفيه بدل ماهي سماويه نخليها صفراء مثل خلفيه المنتدى

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


نروح ناخذ درجه لون خلفيه المنتدى من المتغير Body

ونحطها في المربع الخاص بالارضيه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


نشاهد التغير كيف صار

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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





اللحين نتطرق للمتغيرين الثامن والتاسع المهمين في المنتدى وهما
First Alternating Color

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

Second Alternating Color

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وموقعهما في المنتدى

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


هذا كيف ناخذ اللوانها

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

ونشوف هنا كيف اخذنا لونينن متدرجه من لون خلفيه المنتدى


هذا رقم واحد

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

هذا رقم اثنين

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

للمعلوميه هذان المتعيران راح تغير اشياء كثيره في المنتدى

مثل المواضيع والردود والاقسام .. الخ





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

المتغير العــاشر وهو مخصص لتغير خلفية ولون صندوق المشاركات المطور WYSIWYG Editor

WYSIWYG Editor (Should usually be the same as 'First Alternating Color' or 'Input Fields')

الان سوف نقوم بأضافة لون لخلفية المحرر الطور وايضاً لون للخط المستخدم فيه

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

المتغير الحادي عشر Input Fields (Customized in this Style)

وهو مختص بتغير خلفية ولون الرد السريع ..وأخرى كما سوف تشاهدون بالصورة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

موقعه بالمنتدى

اولاً /


[1]خلفية عنوان الموضوع كما هو محدد بالون الاحمر .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثانياً /

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثالثاً /

خلفية محرك البحث .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]




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

المتغير الحادي عشر .

الأزرار (Customized in this Style)

وهذا المتغير خاص بالازره والخط المستخدم على الزر ..

وايضاً بأمكانك وضع خلفية لهذه الازره ....

اولاً سوف نشاهد موقع هذا المتغير بالمنتدى ..

المربع المحد باللون الاحمر يوضح الاماكن الذي تخص هذا المتغير


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

1/ زر وخلفية تسجيل الدخول .
2/ زر البحث في المنتدى في اي صفحه .
3/ الازره الخاصه بأعتماد المشاركه او المشاهده سواء بصندوق المشاركات او بالرد السريع .
4/ خلفية زر عرض المواضيع الموجود بداخل الاقسام .
5/ زر التحكم بالمرفقات .

بالاضافة ايضاً الي زر الانتقال السريع كما هو موضح في الصورة الثالثه .


--------
سوف نقوم الان بأضافة لون لخلفية الزر .

وفي حالة رغبتك بأضافة خلفية عبارة عن صورة لهذا الزر يتم وضع الكود التالي .

#FBEDD6; background-image: url("Rwabe/body.jpg")

في المتغير Extra CSS Attributes مع تغيير امتداد الصورة في الاستايل .

الصورة التاليه توووضح ااكثر .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وبعد ذالك اخــتر حفظ وشاهد التغير .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

للمعلوميه هذان المتعيران راح تغير اخرى مثل الازرار في تعديل التوقيع

كمشاهدة التوقيع واعتماد التوقيع وايضاً في جميع ازرار الانتقال كــ ,,, الانتقال الي مجلد الوارد او .... الخ




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

المتغير الثاني عشر / select> Menus

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

• قائمة تبديل الاستايل .
  
• قائمة خيارات عرض المواضيع .
  
• قائمة الانتقال السريع .
  

الاماكن التي تتأثر بهذا المتغير هي كما بالصورة .

اولاً / قائمة تبديل الاستايل .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثانياً / خلفية وخط خيارات عرض المواضيع

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

*******************************
الان سوف نقوم بأضافة لون للخلفية وايضاً لون للخط ويجب ان تكون الالوان متناسقه مع لون الاستايل .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان سوف نشاهد التغيرات التي حصلت .

قائمة تبديل الاستايل بعد التعديل /

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

قائمة خيارات عرض المواضيع بعد التعديل /

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


وبالتوفيق ان شاء الله ..






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

المتغير الثالث عشر / خط صغير Fonts

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

ـــــــــــــــــــــــــــــــــــــ
سوف نشاهد الان الامكان التي يؤثر فيها هذا المتغير .
فقط قمنا بتغير لون الخط .

اولاً / عبارة الترحيب بدخول العضو للمنتدى
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثانياً / الوصف الموجود تحت اسم المنتدى
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثالثاً / لون خط احصائيات المنتدى
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

رابعاً / لون خط وصف الصور المستخدمة في المنتدى مثل ــ الصورة الدالة على وجود مشاركة جديده بهذا القسم ــ موضوع شعبي .. الخ
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

خامساً / تغير لون خط عبارة التوقيت بدون تغير لون الساعة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

سادساً / تغير لون خط حقوق استخدام البرنامج
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

سابعاً / تغير لون الخط الصغير المستخدم في قائمة قوانين المشاركه .
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ثامناً / لون خط مسى العضو و عنوان الموضوع
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ملاحظة / هذا المتغير يقوم بتغير الخطوط الصغيرة المستخدمة في المنتدى
وهناك تغيرات اخرى مثل ــ اسم كاتب الموضوع ــ عبارة الانتقال السريع ــ
تاريخ التسجيل وعدد المشاركات ـ



المتغير الخاص بتغير لون الوقت Time Color

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

لا حظ اننا قمنا فقط بأضافة لون خط الساعة ولم نقم بأضافة لون للخلفية ..
الخلفية لاتقم بأضافة اي لون لها كما في الصورة التالية ..

نلاحظ الان الاماكن التي تم تغير اللون فيها وهذا المتغير يقوم بتغير لون الساعة في جميع صفحات المنتدى كمثال ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

لاحظ لون الساعة باللون الاحمر هو التغير الذي قمنا به .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

ايضاً توقيت أخر مشاركة

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وايضاً التوقيت العام للمنتدى






المتغير الخاص بنص الناف بار Navbar-Text

يقوم هذا المتغير بتغير لون خلفية النص في الناف بار وايضاً لون النص النشط في الناف بار ..

لاتقم بوضع خلفية لهذا المتغير حفاظاً على تناسق الشكل .

في حالة رغبتك في تغير لون النص النشط يمكنك تغيرة او تركه فارغاً .

سنقوم الان بتغير لون خط الرابط النشط في Navbar-Text الناف بار .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

لاحظ قيامنا فقط بتغير لون الخط .

توضيح للأماكن التي يتم التغير فيها .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

لاحظ لون الخط لأسم المنتدى .

وعند فتحنا اي من الاقسام ستلاحظ التالي .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

كما تلاحظ عند فتحنا لقسم ما تغير لون رابط هذا القسم في الناف بار الي اللون الاسود الذي اخترناه .



Highlighted Font = الخط المبرز

وهو لإبراز كلمات البحث في نتائج البحث .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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

الان لو قمنا مثلاً بالبحث في المنتدى عن عبارة الأسباب سوف تظهر نتائج البحث وتكون عبارة الاسباب باللون الذي حددناه اللون الاحمر .

شاهد نتيجة البحث .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

كما تلاحظون ان متغير Highlighted Font يهتم فقط بالخطوط المبرزه في نتائج البحث .



المتغير Panel Surround

وهو متغير يختص بلون الخلفية الخارجيه في محرر النصوص سواء في الرد السريع او الرد على موضوع وايضاً خيارات الموضوع

شكل المتغير كما بصورة .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

قما بأضافة اللون البني للخلفية الخارجية للمحرر والخيارات الاضافية .

شاهد نتائج التغير .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

تغير لون الخلفية الخارجية لمحرر الرد السريع .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

تغير لون الخلفية الخارجية للمحرر في الرد على الموضوع + تغير لون الخلفية الخارجية لخيارات الموضوع .




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

المتغير (Panel (Forms)

وهو المتغير الخاصه بتغير لون الخلفية الداخلية للمحرر وخيارات الموضوع . بعالكلمة وسخة ولا يسمح المنتدى بها### الخيار السابق والذي كان للون الخلفية الخارجيه .

نشاهد الان شكل المتغير سوف نقوم بتغير لون الخلفية الداخلية الي لون بني خفيف .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

لاحظ وجود كود في خانة Extra CSS Attributes

وهذا الكود خاص بحجم الحواف التي تفصل بين الخلفية الخارجيه والخلفية الداخلية للمحرر كما تشاهد بالصورة التالية .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وهذا هو الكود
رمز:padding: 10px;
border: 2px outset;

الان وبعد ان قمنا بتغير لون الخلفية الداخلية للمحرر نشاهد معاً نتائج هذا التغير .

1/ الخلفية الداخلية للمحرر في الرد السريع .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

2/ تغير لون الخلفية الداخلية للمحر في الرد على موضوع وايضاً في خيارات الموضوع ..

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]


المتغير legend

هذا المتغير خاص بلون العبارة الموجودة على حوالف جداول وصف البيانات .

وهذا مثال لمعرفة المقصود بجداول البيانات .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

تلاحظون الخط الاحمر اسفل عبارة الخيارات وهذا مايهمنا في درسنا اليوم هذه العبارة .


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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الاماكن التي يتم التأثير عليها بهذا المتغير .

جميع جداول وصف البيانات تتأثر بهذا المتغير سواء في لوحة التحكم او في الرد على موضوع او اي خانه اخرى في المنتدى .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



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

المتغير Popup Menu Controls

هذا المتغير يفضل ان يكون مطابق تماماً للمتغير Category Strips

كما تم شرحه سابقاً من الاخ تركي الودعاني هــنا

المتغير Popup Menu Controls والاماكن التي تتأثر بتغيره .

شكل المتغير .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وكما تشاهدون وجود الكود الخاص بالشد مهم جداً .
رمز:white-space: nowrap;

سنقوم الان بعمل تغير على المتغير Popup Menu Controls بحيث يكون متطابق مع المتغير Category Strips .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

قمنا بأضافة الكود الخاص بالصورة .
#EEDFA1 url(images/test/body.jpg) repeat-x top left
كما تم عملها سابقاً .


الان نشاهد المواقع التي تأثرت بهذا التغير .

1/

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

2/

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

يهمنا في الصورة السابقه المحدد باللون الاحمر فقط .

3/

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



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

المتغير Popup-Menu-Body

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

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

لملاحظة وتميز التحديد الداخلي والخارجي شاهد الصورة .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]



طبعاً قائمة الروابط السريعه و ايضاً خيارات الموضوع وخيارات المنتدى .





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

قربنا ننتهي بأذن الله تعالى .

المتغير Popup Menu Option Row

تلاحظون ان الدرسين السابقين وهذا الدرس والدرس القادم ايضاً جميعها تتعلق بالقائمة Popup القائمة المنسدلة بالمنتدى وخياراتها .

المتغير Popup Menu Option Row

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

قمنا بأضافة لون للخلفية وايضاً لون الخط بما يتناسب مع الاستايل .

شاهد الان التغير .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

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



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

المتغير Popup Menu Highlighted Option

وهذا المتغير كما ذكرنا في المتغير الذي قبله بأنه يتبع لمتغيرات القائمة Popup

وهو المتغير الاخير الذي يخص قائمة Popup .

ويهتم هذا المتغير بتغير لون خلفية القائمة المنسدلة اثناء مرور زر الماوس [ الفأرة ] على اي من

الخيارات الموجودة في القائمة .

سوف نقوم الان بتغير لون الخلفية لهذا المتغير وايضاً تغير لون الخط كما بالصورة .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان بعد ان قمنا بتغير الخلفية والون الخط للمتغير شاهد نتيجة عملك وذالك بتمرير مؤشر الفأرة
على اي من الخيارات في القائمة السريعة .

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

وبالتوفيق ان شاء الله تعالى

يسلمووووووووووووو ع الطرح ما ننحرم ياارب

مشكووووووووووووووووور جداً