اقدم لكم اليوم شرح مبسط بلغة الاكواد الانسيابية " لغة المظهر" او (CSS) وهذا الشرح يتضمن وضع اطار حول عارضة اعلى المنتدى , وانتم مخيرين بوضع هذا الاطار اسفل العارضة فقط او اعلى العارضة فقط او على الجانبين .
# ملاحظة : اضغط على رؤية تكبير الصورة او رؤية الصورة بالابعاد الاصلية او افتحها في صفحة جديدة لرؤية واضحة للصور المدرجة في الشرح
# ملاحظة : اضغط على رؤية تكبير الصورة او رؤية الصورة بالابعاد الاصلية او افتحها في صفحة جديدة لرؤية واضحة للصور المدرجة في الشرح
ندخل في الشرح :
المتطلبات :
1-اكيد منتدى تابع لاحلى منتدى .
2- متصفح وافضل استخدام متصفح (Google Chrome) بدل المتصفحات الاخرى (ولمن ليس لديه هذا المتصفح هذا رابط التحميل اضغط هنا) .
3- الصبر + استكان شاي او فنجان قهوه .
3- الصبر + استكان شاي او فنجان قهوه .
الان لخطوات العمل :
1- نقوم بالضغط زر الفأرة الايمن على منطقة عارضة المنتدى واختيار خيار (Inspect Element) او بالعربي (عرض العنصر) كما في الصورة ادناه :
أ- Id : وتعني المعرف الخاص بوسم معين وفي حالتنا هذه فان عارضة اعلى المنتدى اعطت بـ Id الذي يحتوي اسمها الثابت في كل المنتدى وهو fa_toolbar .
ب- Fa_toolbar : الاسم الخاص بعارضة اعلى المنتدى وفي حالتنا هذه (فهو الاسم الخاص بنسخة المنتدى رقم 2 التابعة لخدمة احلى منتدى , قد يختلف الاسم في النسخ الاخرى ) .
الان الشكل النهائي :
2- سوف يظهر اسفل المتصفح المستطيل الخاص بمحرر الاكواد البرمجية من خلاله نعرف وسم HTML الخاص بعارضة اعلى المنتدى وفي حالة نسخة هذا المنتدى (المشروح عليه) وذو النسخة الثانية لاحلى منتدى فان عارضة اعلى المنتدى تحمل الاسم (id=”fa_toolbar”) , الصورة ادناه تبين شكل محرر الاكواد البرمجية ومكان ظهور اسم وسم عارضة اعلى المنتدى :
[justify][center]
[justify][center]
الان نفصل معنى وسم عارضة اعلى المنتدى (id=”fa_toolbar”) وطريقة كتابته بلغة الاكواد الانسيابية CSS :
أ- Id : وتعني المعرف الخاص بوسم معين وفي حالتنا هذه فان عارضة اعلى المنتدى اعطت بـ Id الذي يحتوي اسمها الثابت في كل المنتدى وهو fa_toolbar .
ب- Fa_toolbar : الاسم الخاص بعارضة اعلى المنتدى وفي حالتنا هذه (فهو الاسم الخاص بنسخة المنتدى رقم 2 التابعة لخدمة احلى منتدى , قد يختلف الاسم في النسخ الاخرى ) .
اذن بما ان اسم عارضة اعلى المنتدى هي Id فما يكافيء الـ Id في لغة الاكواد الانسيابية هو # (الهاش او الشباك) .
اذن يكون الكود الخاص بلغة الاكواد الانسيابية لعارضة اعلى المنتدى كالتالي :
3- نتوجه الى مكان كتابة الاكواد الانسيابية لمعاينتها والتلاعب بها حسب ما نراه مناسب للمنتدى في الصورة التالية ومن ثم ننقل هذه الاكواد الى ورقة الاكواد الانسيابية في لوحة ادارة المنتدى :
[justify][center]
[justify][center]
ونكتب الاكواد التالية :
تعمدت لعدم كتابتي الكود بشكل نصي هنا وذلك لتعويدكم على كتابته بايديكم وفهم هذه الاكواد وليس فقط نسخ ولصق .
الان ننقل هذا الكود الى صفحة الالوان الخاصة بالاكواد الانسيابية وللدخول لهذه الصفحة نتبع المسار التالي :
لوحة الادارة <<<<<< مظهر المنتدى <<<<<<< الصور والالوان <<<<<<<<< الالوان >>>>>>> ورقة تصميم CSS >>>>>>> ومن ثم الضغط على زر قدم .
الان الشكل النهائي :
يمكن زيادة سمك الاطار بتغيير الرقم 3 الى اي رقم تراه مناسب و كذلك يمكن تغيير اللون الاحمر الى اي لون يعجبكم فقط نضغط على اللون الاحمر و ستظهر لوحة الالوان التي نختار منها اللون المناسب وننقل كود اللون الى باقي الجوانب , كما يمكنكم حذف اي جانب والابقاء على جوانب معينه كحذف الجانب الاعلى والابقاء على الجانب الاسفل واليمين و اليسار او كما تراه انت مناسب للمنتدى .
كلمة :
! important
تعني اذا وجد هذا الكود سابقاً في المنتدى (اي من الاصل) واردنا اضافة نفس الكود ولكن بالوان وعرض جديد فاننا لا نستطيع حذف الكود الموجود اصلا والذي تكون الاولوية له وليس لكودنا الجديد حيث فقط نضيف كلمة
! important
في اخر كودنا الجديد لاعطاء الاولوية لكودنا بدل الكود الاصلي .
الى هنا ينتهي شرحنا هذا واعتذر للاطالة وتفصيلي بالشرح هو لصالحكم .
عند النقل الى المنتديات الاخرى يرجى ذكر حقوق شبكة ابن النيل والفرات .
[/justify]
[/center]
[/justify]
خالص تحياتي و تقديري
keko_ferkekoالخميس مايو 15, 2014 11:52 pm