- الرئيسية
- ما الجديد !
-
الصفحات▼
الصفحات
شرح كلاسات الـ css للنسخة [2.1.4]
-
12-07-2011 02:35 مساءً
-
معلومات الكاتب -
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاتة
كيف حالكم يا اعضاء المنتدى الكرام إن شاء الله تكونوا بخير
منذ بضعة ايام تم اطلاق الاصدار الجديد [2.1.4]
و يجد البعض صعوبة فى معرفة كلاسات الـ css
ساقوم فى الموضوع التالى بشرحها ليسهل الامر على الجميع
نبدأ بأعلى جزء فى المنتدى
اسم القالب تسجيل دخول ولخروج header_bar.tpl
كما نرى فهناك لون الخلفية , ازرار التسجيل و تسجيل الدخول .... و بعض الروابط مثل "الرسائل الخاصة"
حسنا نبدأ بلون الخلفية
CODE#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
CODE#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
CODE.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
CODE.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
يتبع ,,
-
تم تحرير الموضوع بواسطة :كنتارو بتاريخ: 19-07-2011 09:11 مساءً
-
-
شرح كلاسات الـ css للنسخة [2.1.4] 13-07-2011 08:25 صباحاً [1]
-
معلومات الكاتب
-
نبدأ بكلاس زر اضافة موضوع جديد
#buttons_link
كلاس زر موضوع مغلق
#buttons_close
كلاس زر " لا يمكنك إضافة موضوع "
#buttons_no_link
كلاس الشريط العلوى
.top_forum_bar
و كلاس شريط "قائمة المواضيع" هو الثياد
.thead
.thead a:link
.thead a:visited
.thead a:hover, .thead a:active
نأتى إلى زر "خيارات المراقبين"
الكلاسات الخاصة به هى
.pbbmenu
.pbbmenu a:link
.pbbmenu a:visited
.pbbmenu a:hover, .pbbmenu a:active
يتبع ,,
-
تم تحرير المشاركة بواسطة :كنتارو بتاريخ:19-07-2011 09:12 مساءً
-
-
شرح كلاسات الـ css للنسخة [2.1.4] 13-07-2011 08:35 صباحاً [2]
-
معلومات الكاتب
-
كلاس خلفية الموضوع
.tbar_writer_info
كلاس معلومات كلتب الموضوع
.writer_info
الكلاسات الخاصة بالأزرار " إقتباس متعدد, إقتباس, حذف, تحرير "
.Button_secondary
.Button_secondary a
.Button_secondary: hover
-
-
شرح كلاسات الـ css للنسخة [2.1.4] 13-07-2011 01:00 مساءً [4]
-
معلومات الكاتب -
رائع أخي كنتارو جزاك ربي الفردوس الأعلي إن شاء اللهشرح رائع
-
-
شرح كلاسات الـ css للنسخة [2.1.4] 13-07-2011 04:05 مساءً [6]
-
معلومات الكاتب
-
اقتبـاس ،، جزاك الله الفردوس الاعلى اخي الفاضل كنتاروا وبارك الله فيك
رائع أخي كنتارو جزاك ربي الفردوس الأعلي إن شاء اللهشرح رائع
شرح مميز بارك الله فيك
شكرا لكم
-
-
شرح كلاسات الـ css للنسخة [2.1.4] 17-07-2011 01:35 صباحاً [10]
-
معلومات الكاتب -
بوركت جهودك اخي كنتارو
-
-
شرح كلاسات الـ css للنسخة [2.1.4] 17-07-2011 01:45 صباحاً [11]
-
معلومات الكاتب
-
مشكوووور جدا
مجهود كبير
-
