منتدى دعم PBBoard الرسمي
(نسخة قابلة للطباعة من الموضوع)
https://pbboard.info/forums/t6496
أنقر هنا لمشاهدة الموضوع بهيئته الأصلية

شرح كلاسات الـ css للنسخة [2.1.4]
كنتارو 12-07-2011 02:35 مساءً
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاتة

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

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

2zzm1za

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

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

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;
}


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

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

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

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

#logostrip

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



15colqp

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




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

spepf7

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


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

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

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


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

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

a:hover



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

2wdx8ck

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


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

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


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

نبدأ بكلاس الساعة
.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




يتبع ,,
منتدى دعم PBBoard الرسمي

Copyright © 2009-2024 PBBoard® Solutions. All Rights Reserved