ابن النيل و الفرات
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

ابن النيل و الفراتدخول
مرحب شهر الصوم

العديد من الخدمات للمواقع و المنتديات


وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية

power_settings_newقم بتسجيل الدخول للرد

15052014
وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية

وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية -_online


اقدم لكم اليوم شرح مبسط بلغة الاكواد الانسيابية " لغة المظهر"   او  (CSS) وهذا الشرح يتضمن وضع اطار حول عارضة اعلى المنتدى , وانتم مخيرين بوضع هذا الاطار اسفل العارضة فقط او اعلى العارضة فقط او على الجانبين .  

# ملاحظة : اضغط على رؤية تكبير الصورة او رؤية الصورة بالابعاد الاصلية او افتحها في صفحة جديدة لرؤية واضحة للصور المدرجة في الشرح 

ندخل في الشرح :  


المتطلبات :  


1-اكيد منتدى تابع لاحلى منتدى .  

2- متصفح وافضل استخدام متصفح (Google Chrome) بدل المتصفحات الاخرى (ولمن ليس لديه هذا المتصفح هذا رابط التحميل اضغط هنا) .  

3-      الصبر + استكان شاي او فنجان قهوه  يبتسم .  



الان لخطوات العمل :  



1-      نقوم بالضغط زر الفأرة الايمن على منطقة عارضة المنتدى واختيار خيار (Inspect Element) او بالعربي (عرض العنصر) كما في الصورة ادناه :  


وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 816pw4
 


2-      سوف يظهر اسفل المتصفح المستطيل الخاص بمحرر الاكواد البرمجية من خلاله نعرف وسم HTML الخاص بعارضة اعلى المنتدى وفي حالة نسخة هذا المنتدى (المشروح عليه) وذو النسخة الثانية لاحلى منتدى فان عارضة اعلى المنتدى تحمل الاسم (id=”fa_toolbar”)  , الصورة ادناه تبين شكل محرر الاكواد البرمجية ومكان ظهور اسم وسم عارضة اعلى المنتدى :  


[justify][center]وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 5NAidS

الان نفصل معنى وسم عارضة اعلى المنتدى (id=”fa_toolbar”) وطريقة كتابته بلغة الاكواد الانسيابية CSS :
 

أ‌-        Id  : وتعني المعرف الخاص بوسم معين وفي حالتنا هذه فان عارضة اعلى المنتدى   اعطت بـ Id الذي يحتوي اسمها الثابت في كل المنتدى وهو fa_toolbar .  


ب‌-    Fa_toolbar : الاسم الخاص بعارضة اعلى المنتدى وفي حالتنا هذه (فهو الاسم الخاص بنسخة المنتدى رقم 2 التابعة لخدمة احلى منتدى , قد يختلف الاسم في النسخ الاخرى ) .  


اذن بما ان اسم عارضة اعلى المنتدى هي Id فما يكافيء الـ Id  في لغة الاكواد الانسيابية هو # (الهاش او الشباك) .  

اذن يكون الكود الخاص بلغة الاكواد الانسيابية لعارضة اعلى المنتدى كالتالي :  

وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 4NPYq5

3-      نتوجه الى مكان كتابة الاكواد الانسيابية لمعاينتها والتلاعب بها حسب ما نراه مناسب للمنتدى في الصورة التالية ومن ثم ننقل هذه الاكواد الى ورقة الاكواد الانسيابية في لوحة ادارة المنتدى  :
 


[justify][center]وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية ZajGUc
 

ونكتب الاكواد التالية :  

وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية 8B35NJ
 


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

وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية Lkc87X
 

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

  لوحة الادارة <<<<<< مظهر المنتدى <<<<<<< الصور والالوان <<<<<<<<< الالوان >>>>>>>  ورقة تصميم CSS  >>>>>>> ومن ثم الضغط على زر قدم .  

وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية LYT8So
 
الان الشكل النهائي :

وضع اطار حول عارضة اعلى المنتدى بالـ CSS لغة الاكواد الانسيابية Zsivei

يمكن زيادة سمك الاطار بتغيير الرقم 3 الى اي رقم تراه مناسب و كذلك يمكن تغيير اللون الاحمر الى اي لون يعجبكم فقط نضغط على اللون الاحمر و ستظهر لوحة الالوان التي نختار منها اللون المناسب وننقل كود اللون الى باقي الجوانب , كما يمكنكم حذف اي جانب والابقاء على جوانب معينه كحذف الجانب الاعلى والابقاء على الجانب الاسفل واليمين و اليسار او كما تراه انت مناسب للمنتدى .  


كلمة :  
! important  

تعني اذا وجد هذا الكود سابقاً في المنتدى (اي من الاصل) واردنا اضافة نفس الكود ولكن بالوان وعرض جديد فاننا لا نستطيع حذف الكود الموجود اصلا والذي تكون الاولوية له وليس لكودنا الجديد حيث فقط نضيف كلمة  
! important  
في اخر كودنا الجديد لاعطاء الاولوية لكودنا بدل الكود الاصلي . يغمز



الى هنا ينتهي شرحنا هذا واعتذر للاطالة وتفصيلي بالشرح هو لصالحكم .  
عند النقل الى المنتديات الاخرى يرجى ذكر حقوق شبكة ابن النيل والفرات .  
[/center]
[/justify]
[/center]
[/justify]


عدل سابقا من قبل T4RE9 في الخميس مايو 15, 2014 10:35 pm عدل 1 مرات (السبب : خطأ)

تعاليق

keko_ferkeko
تسلم إيدك على المجهود المتميز...
خالص تحياتي و تقديري يبتسم
T4RE9
منور الموضوع , مشكور على المرور والرد .
keko_ferkeko
العفو.. تم التطبيق  يغمز 
power_settings_newقم بتسجيل الدخول للرد
remove_circleمواضيع مماثلة
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى