شرح كلاسات الـ css للنسخة

بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاتة

كيف حالكم يا اعضاء المنتدى الكرام إن شاء الله تكونوا بخير
منذ بضعة ايام تم اطلاق الاصدار الجديد [2.1.4]
و يجد البعض صعوبة فى معرفة كلاسات الـ css
ساقوم فى الموضوع التالى بشرحها ليسهل الامر على الجميع

---

نبدأ بأعلى جزء فى المنتدى
اسم القالب تسجيل دخول ولخروج header_bar.tpl




كما نرى فهناك لون الخلفية , ازرار التسجيل و تسجيل الدخول .... و بعض الروابط مثل "الرسائل الخاصة"

حسنا نبدأ بلون الخلفية

#header_bar
{
    background: #204067;
    padding:10px;
    font: 11px Tahoma;
    color: #fff;
    height: 27px;
}

#header_bar a
{
    color: #fff;
}

الهيدر بار هوا الجزء العلوى من المنتدى ,,
background = لون الخلفية
padding = التباعد
font = حجم الخط و نوعه
color = لون الخط
hight = هوا ارتفاع الهيدر بار

و الجزء الثانى header_bar a
هو الخاص بلون الروابط

الان عندنا الازرار [التسجيل - تسجيل الدخول - لوحة التحكم - تسجيل الخروج ]

سنقوم بشرح مثلا لزر واحد , و البقية ستكون على نفس المنوال

زر التسجيل : الكلاس الخاص به هو #register_link

#register_link
{
    color: #fff;
    font-family: Tahoma;
    font-size: 11px;
    background: #4B4692;
    display: block;
    padding: 5px 8px 5px 8px;
    border:1px;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
    solid #7ba60d;
    -webkit-box-shadow:inset 0px 1px 0 rgba(255,255,255,0.2), 0px 1px 4px rgba(0,0,0,0.4);
    -moz-box-shadow:inset 0px 1px 0 rgba(255,255,255,0.2), 0px 1px 4px rgba(0,0,0,0.4);
    box-shadow:inset 0px 1px 0 rgba(255,255,255,0.2), 0px 1px 4px rgba(0,0,0,0.4);
    text-shadow:0px 1px 2px rgba(0,0,0,0.3);
}

color = لون الخط
font-family = نوع الخط
font-size = حجم الخط
background = لون خلفية الزر
padding = التباعد
border = الإطار
و البقية هى تأثيرات على الزر مثل الظلال


كلاسات باقى الازار
زر تسجيل الدخول = #sign_link
زر لوحة التحكم = #usercp_link
زر الخروج = #logout_link

الان الخانة الخاصة بكاتبة اسم المستخدم و رقمه السرى عند تسجيل الدخول
الكلاس الخاص بها هوا .login_input

.login_input
{
    font-family: Tahoma;
    font-size: 8pt;
    background-color: #FFFFFF;
    border: 1px solid #CFD2E0;
    color: #878787;
    padding: 2px;
    border-width: 1px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
}

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

زر "دخول" الكلاس الخاص به هو .submit_login

.submit_login
{
    font-family: Tahoma;
    font-size: 8pt;
    padding: 2px 10px;
    background: #f6f6f6;
    background:  -moz-linear-gradient(top, #f6f6f6 0%, #e5e5e5 100%);
    background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#e5e5e5));
    border: 1px solid #dbdbdb;
    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 0px rgba(255,255,255,1) inset, 0px 1px 0px rgba(0,0,0,0.3);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #616161;
    display: inline-block;
    white-space: nowrap;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}

الزر ملئ بالاشياء لكن ما ستحتاجه هو لون و حجم و نوع الخط و لون خلفية الزر

جزء صغير لكن ملئ بالاشياء

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

الجزء الخاص بلوجو المنتدى و محرك البحث


#logostrip

كلاسات محرك البحث
#main_search
#search_wrap
#adv_search
#search





#primary_nav
#primary_nav a
#primary_nav a:hover, #primary_nav a.menu_active
#primary_nav .active a
#primary_nav .menu_popup a




القائمة المنسدلة ,,



الكلاسات الخاصة بها هى ,
.menu_popup
.menu_popup a


نأتى الان إلى جسد المنتدى الرئيسيى


الخلفية باللون الازرق هى خلفية المنتدى ككل body

اما الاخرى فهى خلفية لخانات الاقسام و الإحصائيات .pbboard_body

---

كلاس لون خط المنتدى th,td

كلاسات الروابط بالمنتدى a:link,
a:visited,
a:active

a:hover

---

نأتى إلى الاقسام



1 - التكاد
.tcat
.tcat a:link
.tcat a:visited
.tcat a:hover, .tcat a:active

2- td.row1
3- td.row2
4- td.row5

5- الثياد 1
.thead1
.thead1 a:link
.thead1 a:visited
.thead1 a:hover, .thead1 a:active

6-كلاس الإيطار المحيط بالاقسام و الاحصائيات هو
.border_forums

---

عنوان الموضوع و وصفه


1- عنوان الموضوع , الكلاس الخاص به هو .title_n
2- وصف الموضوع , الكلاس الخاص به هو .title_h

---

نأتى للجزء السفلى للمنتدى


نبدأ بكلاس الساعة
.time

و الكلاسات الخاصة بالفوتر هى
.footer_bar
.footer_bar a:link,
.footer_bar a:visited

.footer_bar_links
.footer_bar_links a:link
.footer_bar_links a:visited
.footer_bar_links a:hover, .footer_bar_links a:active

الكلاس الخاص بحقوق المنتدى
#copyright
#copyright a