أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

منتدى شروحات ودروس منتديات PBBoard

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

الصفحة 2 من 3

الأخيرة

: شرح كلاسات الـ 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;
}

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

جزء صغير لكن ملئ بالاشياء شرح كلاسات الـ css للنسخة

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

الجزء الخاص بلوجو المنتدى و محرك البحث
شرح كلاسات الـ css للنسخة

#logostrip

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

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

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

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

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

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

نأتى الان إلى جسد المنتدى الرئيسيى
شرح كلاسات الـ css للنسخة

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

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

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

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

a:hover

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

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

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

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

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

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

نأتى للجزء السفلى للمنتدى
شرح كلاسات الـ css للنسخة

نبدأ بكلاس الساعة
.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 11:41 صباحاً [3]

ابو عبد الله

جزاك الله الفردوس الاعلى اخي الفاضل كنتاروا وبارك الله فيك

: شرح كلاسات الـ css للنسخة [2.1.4]

13-07-2011 01:00 مساءً [4]

isma3eliano

رائع أخي كنتارو جزاك ربي الفردوس الأعلي إن شاء الله

شرح رائع

: شرح كلاسات الـ css للنسخة [2.1.4]

13-07-2011 02:39 مساءً [5]

larini

شرح مميز بارك الله فيك

: شرح كلاسات الـ css للنسخة [2.1.4]

13-07-2011 04:05 مساءً [6]

كنتارو

اقتبـاس ،، جزاك الله الفردوس الاعلى اخي الفاضل كنتاروا وبارك الله فيك

رائع أخي كنتارو جزاك ربي الفردوس الأعلي إن شاء الله

شرح رائع

شرح مميز بارك الله فيك

شكرا لكم

: شرح كلاسات الـ css للنسخة [2.1.4]

14-07-2011 06:04 صباحاً [7]

محمد الصاوي

جزاك الله خيراً...

فهكذا فائدة الاستايلات المعتمدة بشكل اكبر على الــ css لا تجعلك تحتاج الى الذهاب للقوالب كثيراً

: شرح كلاسات الـ css للنسخة [2.1.4]

16-07-2011 02:51 مساءً [8]

كنتارو

المشاركة الأصلية كتبت بواسطة: محمد الصاوي جزاك الله خيراً...

فهكذا فائدة الاستايلات المعتمدة بشكل اكبر على الــ css لا تجعلك تحتاج الى الذهاب للقوالب كثيراً

جزانا و إياك ,, نعم اخى اختصرت الكثير

: شرح كلاسات الـ css للنسخة [2.1.4]

16-07-2011 08:58 مساءً [9]

Islam Hasan

جازاك الله خيرا

: شرح كلاسات الـ css للنسخة [2.1.4]

17-07-2011 01:35 صباحاً [10]

Soliman

بوركت جهودك اخي كنتارو شرح كلاسات الـ css للنسخة

: شرح كلاسات الـ css للنسخة [2.1.4]

17-07-2011 01:45 صباحاً [11]

نجم الويب

مشكوووور جدا

مجهود كبير شرح كلاسات الـ css للنسخة

: شرح كلاسات الـ css للنسخة [2.1.4]

17-07-2011 11:08 صباحاً [12]

mkbat

بارك الله فيك

الصفحة 2 من 3

الأخيرة

المواضيع المتشابهه
عنوان الموضوع	الكاتب	الردود	الزوار	آخر رد
شرح طريقة إضافة الكلاسات وتعديلها وحذفها في ستايل شييت add / edit / remove class in CSS	Mr King	0	1612	Mr King
إستفسار عن أسماء كلاسات،	matree	2	1362	matree
كيف أجعل كلاسات ال row عبارة عن صور	alshweb	2	1153	alshweb
[مجابه] اين قالب هذا الجزء وكلاساته	jeiro33	4	1808	ميدو المصري
طلب شرح طريقة ايجاد كلاسات css مكانها داخل القوالب !!	ashraf	1	1105	ashraf

الكلمات الدلالية

لا يوجد كلمات دلالية ..

« نحتاج لشرح مصور للقوالب الجديدة في هذه النسخة الرائعة | شرح تركيب نسخة منتديات PBBOARD 2.1.4 »

الساعة الآن 03:09 PM