ضع إعلانك هنا

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف T4RE9 في الخميس مايو 15, 2014 9:55 pm



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

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

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


المتطلبات :  


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

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

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



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



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



 


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


[justify][center]

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

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


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


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

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



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


[justify][center]
 

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


 


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


 

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

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


 
الان الشكل النهائي :


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


كلمة :  
! important  

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



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


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

T4RE9
عضو جديد
عضو جديد

البلد :
السن : 26
تاريخ التسجيل : 13/03/2014
المشاركات : 15
الوظيفة : لا توجد

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف keko_ferkeko في الخميس مايو 15, 2014 11:52 pm

تسلم إيدك على المجهود المتميز...
خالص تحياتي و تقديري يبتسم

________________________________________
.::الَّلهُمَّـ اجعَلْـ عَمَلَنَا خَالِصًا لِوَجهَكَـ الكَرِيمِـ::.


keko_ferkeko
عضو محترف
عضو محترف

البلد :
السن : 24
تاريخ التسجيل : 16/08/2007
المشاركات : 3254
الاهتمامات : القراءة-التصميم-بناء المواقع-النت
الوظيفة : طالب جامعي
الأوسمة :


معاينة صفحة البيانات الشخصي للعضو http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف T4RE9 في الجمعة مايو 16, 2014 9:52 am

منور الموضوع , مشكور على المرور والرد .

________________________________________

T4RE9
عضو جديد
عضو جديد

البلد :
السن : 26
تاريخ التسجيل : 13/03/2014
المشاركات : 15
الوظيفة : لا توجد

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة من طرف keko_ferkeko في السبت مايو 17, 2014 10:11 am

العفو.. تم التطبيق  يغمز 

________________________________________
.::الَّلهُمَّـ اجعَلْـ عَمَلَنَا خَالِصًا لِوَجهَكَـ الكَرِيمِـ::.


keko_ferkeko
عضو محترف
عضو محترف

البلد :
السن : 24
تاريخ التسجيل : 16/08/2007
المشاركات : 3254
الاهتمامات : القراءة-التصميم-بناء المواقع-النت
الوظيفة : طالب جامعي
الأوسمة :


معاينة صفحة البيانات الشخصي للعضو http://nf-son.forumotion.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى