دروس CSS
التحكم في عارضة المنتديات
-----------------
Control casual forums
-----------------
السلام عليكم و رحمة الله
تعالى و بركاته اخواني اخواتي الكرام متتبعي مدونة لمتخصص
و زوار قناة المتخصص
و مدونة قناة المتخصص
اهلا
و سهلا بكم في هذا لشرح ، حيث سنقوم بشرح اوامر CSS التي تتحكم بعارضة
منتداكم بكل حرية ...........
اذا كنت تمتلك منتدى على
الانترنت فيمكنك التحكم بكل عارضة المنتدى من : (ازرار مواقع التواصل الاجتماعي،
الاشعارات، المعاينات ...) عن طريق اكواد CSS التي سنقوم بشرحها لكم في
هذا الدرس فتابعونا على بركة الله ...............
اخي الكريم لا تنسى المشاركة معنا ببريدك على
هذه المدونة ، ليصلك كل جديد الموقع ، ضع بريدك على مدونتنا ...........
و
لأي استفسار قم بطرحه على مدونتنا من اسفل التعاليق ........
سنبدأ
الشرح لهذا اطلب منك قليل من التركيز فقط ، لان الامر ليس صعب بل يتطلب منك الفهم
و التركيز فقط ..............
ادخل
من خلال لوحة الادارة الخاصة بمنتداك، ثم اختر ورقة تصميم CSS كما يلي:
و
منها اختر مظهر المنتدى او Style
بعدها اختر الصور و الالوان
ثم
اختر لالوان ، ثم ورقة تصميم CSS
و
بهذا سنبدأ باظافة مجموعة من الاكواد الخاصة بازرار مواقع التواصل الاجتماعي في
اعلى صفحة المنتدى كما يلي:
لاضافة
هذة الازرار نقوم بادخال كود CSS التالي بداخل ورقة تصميم CSS :
div#fa_toolbar{
background-color: #24384c;
border-radius: 0 0 50px 50px;
box-shadow: 0 0 5px #000000;
margin: auto;
width: 90%;
}
div#fa_toolbar div,
div#fa_toolbar span {
margin: 0 15px;
}
سنقوم
بشرح الكود السابق بالتفصيل:
من
العبارة background-color نقوم بتغيير لون خلفية الازرار كما نشاء عن طريق
تغيير ارقام الملونة بالاصفر التالية: #24384c
من
العبارة border-radius نقوم بتغيير حواف عارضة
المنتدى عن طريق تغيير ارقام ابعاد الحواف الملونة بالاخضر التالية: 0
50px 50px
من
العبارة box-shadow نقوم بوضع ضل للعارضة عن طريق تغيير الارقام
الملونة بالاحمر التالية: 0 0 5px #000000
العبارة margin تعني توسيط عارضة المنتدى ، نحن نتركها بضكل آلي (auto)
العبارة width نحدد بها طول العارضة و نحن سنحدد طولها ب 90 %
اما
الكود التالي من قائمة السابقة:
div#fa_toolbar div,
div#fa_toolbar span {
margin: 0 15px
فنقوم
بوضعه قصد ظهور العارضة المنتدى بشكل سليم و صحيح
ملاحظة
مهمة: كود الذي يتحكم
بالعارظة الكلية هو div#fatoolbar
======================================
*******************************************
======================================
ملاحظة
جد مهمة : اليكم
قائمة بالاكواد او بدلالات او بالخصائص التي تتحكم في عدة خصائص من المنتى و نقوم
بوضعها مكان الخاصية div#fatoolbar من الكود السابق و هي كما يلي:
01- الخاصية div#fa_search او div#fa_textareaهذه لخاصية للتحكم بشريط البحث
02 - الخاصية div#fa_share هذه الخاصية للتحكم بازرار مواقع التواصل
الاجتماعي الافقية
03- الخاصية span#fa_share_text للتحكم بشكل الكتابة التي
تظهر امام ازرار التحكم.
04- الخاصية a#fa_fb للتحكم في خصائص زر ايقونة الفايسبوك facsbook
05- الخاصية a#fa_twitter للتحكم في خصائص زر
ايقونة التويتر twiter
06- الخاصية a#fa_gp للتحكم في خصائص زر ايقونة غوغل+ google+
07- الخاصية a#fa_mail للتحكم بزر البريد Email .
08- الخاصية a#fa_rss للتحكم بزر التغذية RSS .
09- الخاصية div#fa_right للتحكم بالاشعارات من طرف اعضاء المنتدى و اظهار
البروفايل الخاص بهم ....
10- الخاصية a#fa_welcome للتحكم بالترحيبات الخاصة بزوار المنتدى و
المسجلين في المنتدى ....
11- الخاصية a#fa_notifications لاظهار
كلمة الشعارات قط على المنتدى .....
12- الخاصية span#notif_unread لاظهار
عدد الاشعارات في المنتدى .......
13- الخاصية a#fa_hide للتحكم بزر الصعود للأعلى ...
14- الخاصية a#fa_show للتحكم بزر النزول الى الاسفل .....
=============================
********************************
=============================
و سنأتي الى تفصيل بعض من هذه الخصائص في كود CSS و كيف نضيفها الى المنتدى
الخاص بنا ......
الخاصية a#fa_hide للتحكم بزر الصعود للأعلى
من خلال الكود السابق
نقوم باضافة لة اسطر هذه الخاصية فقط كما يلي:
نقوم بادراج السطرين
التاليين مباشرة قبل سطر اظهار المنتدى بشكل سليم div#fa_toolbar div و السطرين هما:
a#fa_hide {
display: none!important;
ليصبح
الكود الجديد الكلي كما يلي: حيث الكود الجديد
ملون باللون الوردي
div#fa_toolbar{
background-color: #24384c;
border-radius: 0 0 50px 50px;
box-shadow: 0 0 5px #000000;
margin: auto;
width: 90%;
}
a#fa_hide {
display:
none!important;
}
div#fa_toolbar div,
div#fa_toolbar span {
margin: 0 15px;
}
==========================
*****************************
==========================
اضافة
اسطر جديدة:
اسطر تخص الخاصية div#fa_search او div#fa_textareaهذه لخاصية للتحكم بشريط البحث
#fa_toolbar {
background-color: transparent !important;
}
#fa_right {
background-color: #000000;
border-radius: 0 0 40px 40px;
padding-left: 10px;
padding-right: 10px;
position:
relative;
right: 20px;
}
#fa_left {
background-color: #000000;
border-radius: 0 0 0 40px;
position: relative;
left: 20px;
margin-top: -1px;
padding-left: 10px;
padding-right: 10px;
}
#fa_search {
background-color: #000000;
margin-top: -1px;
padding-left: 10px;
padding-right: 10px;
}
#fa_share {
background-color: #000000;
position: relative;
left:
-20px;
margin-top: -1px;
padding-left: 10px;
padding-right: 10px;
}
حمل
كتاب التحكم في عارضة المنتديات Control casual forums من هنا
الى
هنا نأتي الى نهاية شرحنا هذا .....
اتمنى
ان ينال موضوعي هذا اعجابكم .......
لا
تنس وان تضعو استفساراتكم و اسئلتكم و اعجابكم في التعليقات اسفل هذا الموضوع
شاركو
معنا في هذا برامج انترنت و اخبارك نت من خلال ادراج
بريدكم الالكتروني ليصلكم كل جديد على مدونتنا ..............
اذا واجهتك أي مشكل او
تسائل ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....
يمكنكم
متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....
زورو
المواقع التالية
|
|
|
|
|
|
|
|
|
ليست هناك تعليقات