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

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

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



12-07-2011 02:35 مساءً
معلومات الكاتب ▼
انضم في : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس :
قوة السمعة : 3,107
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاتة

كيف حالكم يا اعضاء المنتدى الكرام إن شاء الله تكونوا بخير
منذ بضعة ايام تم اطلاق الاصدار الجديد [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




يتبع ,,
تم تحرير الموضوع بواسطة :كنتارو بتاريخ:19-07-2011 09:11 مساءً

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  13-07-2011 08:25 صباحاً   [1]
معلومات الكاتب ▼
انضم في : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس :
قوة السمعة : 3,107
ina1ix

نبدأ بكلاس زر اضافة موضوع جديد
#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 مساءً


look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  13-07-2011 08:35 صباحاً   [2]
معلومات الكاتب ▼
انضم في : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس :
قوة السمعة : 3,107
2lc4c9e

كلاس خلفية الموضوع
.tbar_writer_info

كلاس معلومات كلتب الموضوع
.writer_info

الكلاسات الخاصة بالأزرار " إقتباس متعدد, إقتباس, حذف, تحرير "
.Button_secondary
.Button_secondary a
.Button_secondary: hover

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  13-07-2011 11:41 صباحاً   [3]
معلومات الكاتب ▼
انضم في : 07-08-2010
رقم العضوية : 628
المشاركات : 2,997
الجنس :
الدعوات : 6
قوة السمعة : 4,841
موقعي : زيارة موقعي
جزاك الله الفردوس الاعلى اخي الفاضل كنتاروا وبارك الله فيك

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  13-07-2011 01:00 مساءً   [4]
معلومات الكاتب ▼
انضم في : 03-11-2009
رقم العضوية : 188
المشاركات : 2,152
الدولة : مصر Egypt
الجنس :
تاريخ الميلاد : 26-10-1994
الدعوات : 4
قوة السمعة : 5,518
موقعي : زيارة موقعي
رائع أخي كنتارو جزاك ربي الفردوس الأعلي إن شاء الله
شرح رائع mf

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  13-07-2011 02:39 مساءً   [5]
معلومات الكاتب ▼
انضم في : 02-03-2010
رقم العضوية : 397
المشاركات : 450
الدولة : الجزائر
الجنس :
قوة السمعة : 156
موقعي : زيارة موقعي
704746
شرح مميز بارك الله فيك

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  13-07-2011 04:05 مساءً   [6]
معلومات الكاتب ▼
انضم في : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس :
قوة السمعة : 3,107
اقتبـاس ،، جزاك الله الفردوس الاعلى اخي الفاضل كنتاروا وبارك الله فيك
رائع أخي كنتارو جزاك ربي الفردوس الأعلي إن شاء الله
شرح رائع mf



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





شكرا لكم

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  14-07-2011 06:04 صباحاً   [7]
معلومات الكاتب ▼
انضم في : 31-10-2010
رقم العضوية : 901
المشاركات : 1,155
الدولة : مصر
الجنس :
تاريخ الميلاد : 20-2-1990
الدعوات : 1
قوة السمعة : 3,272
موقعي : زيارة موقعي
جزاك الله خيراً...

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

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  16-07-2011 02:51 مساءً   [8]
معلومات الكاتب ▼
انضم في : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس :
قوة السمعة : 3,107
المشاركة الأصلية كتبت بواسطة: محمد الصاوي جزاك الله خيراً...

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

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  16-07-2011 08:58 مساءً   [9]
معلومات الكاتب ▼
انضم في : 09-06-2011
رقم العضوية : 1,540
المشاركات : 151
الدولة : فلسطين
الجنس :
تاريخ الميلاد : 26-2-1995
قوة السمعة : 524
موقعي : زيارة موقعي
جازاك الله خيرا

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  17-07-2011 01:35 صباحاً   [10]
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,556
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 73,896
موقعي : زيارة موقعي
بوركت جهودك اخي كنتارو 704746

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  17-07-2011 01:45 صباحاً   [11]
معلومات الكاتب ▼
انضم في : 23-07-2010
رقم العضوية : 599
المشاركات : 3,734
الدولة : أمي اليمن
الجنس :
تاريخ الميلاد : 4-3-1987
الدعوات : 1
قوة السمعة : 8,237
موقعي : زيارة موقعي
العضو غائب بلاكهرباء حتى اشعار آخر ,والمعذرة على الغياب المتكررلأسباب وظروف ولله الحمد , دعواتكم لبلادي وبلاد المسلمين ..
مشكوووور جدا

مجهود كبير mf

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  17-07-2011 11:08 صباحاً   [12]
معلومات الكاتب ▼
انضم في : 06-02-2011
رقم العضوية : 1,261
المشاركات : 14
الجنس :
قوة السمعة : 0
بارك الله فيك

look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  18-07-2011 03:50 صباحاً   [13]
معلومات الكاتب ▼
انضم في : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس :
قوة السمعة : 3,107
اقتبـاس ،، جازاك الله خيرا
جزانا و إياك اخى محترف بلا حدود

اقتبـاس ،، بوركت جهودك اخي كنتارو 704746
شكرا اخى سليمان بارك الله فيك



اقتبـاس ،، مشكوووور جدا

مجهود كبير mf
شكرا اخى نجم الويب

اقتبـاس ،، بارك الله فيك
شكرا اخى mkbat



look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
  19-07-2011 01:26 مساءً   [14]
معلومات الكاتب ▼
انضم في : 10-05-2011
رقم العضوية : 1,499
المشاركات : 369
الدولة : Türkiye (Turkey)
الجنس :
تاريخ الميلاد : 19-5-1990
قوة السمعة : 404
موقعي : زيارة موقعي

رد جديد موضوع جديد
الصفحة 2 من 3 < 1 2 3 > الأخيرة




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

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








الساعة الآن 02:59 AM