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

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


موضوع مغلق

الصفحة 1 من 5 < 1 2 3 4 5 > الأخيرة »


12-07-2011 02:35 مساء
كنتارو
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس : ذكر
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3107
اصدار المنتدى : غير محدد
 offline 
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله و بركاتة

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


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

2zzm1za

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

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

#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_i*nput

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


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

جزء صغير لكن ملئ بالاشياء 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 مساء


13-07-2011 08:25 صباحا
مشاهدة مشاركة منفردة [1]
كنتارو
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس : ذكر
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3107
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
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 مساء


13-07-2011 08:35 صباحا
مشاهدة مشاركة منفردة [2]
كنتارو
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس : ذكر
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3107
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
2lc4c9e

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

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

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

13-07-2011 11:41 صباحا
مشاهدة مشاركة منفردة [3]
ابو عبد الله
عضـو ستـار
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 07-08-2010
رقم العضوية : 628
المشاركات : 2983
الجنس : ذكر
الدعوات : 6
يتابعهم : 0
يتابعونه : 9
قوة السمعة : 4721
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.0
 offline 
look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
جزاك الله الفردوس الاعلى اخي الفاضل كنتاروا وبارك الله فيك

13-07-2011 01:00 مساء
مشاهدة مشاركة منفردة [4]
isma3eliano
عضـو ستـار
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 03-11-2009
رقم العضوية : 188
المشاركات : 2152
الدولة : مصر Egypt
الجنس : ذكر
تاريخ الميلاد : 26-10-1994
الدعوات : 4
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 5518
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
رائع أخي كنتارو جزاك ربي الفردوس الأعلي إن شاء الله

شرح رائع mf

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

13-07-2011 04:05 مساء
مشاهدة مشاركة منفردة [6]
كنتارو
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 22-07-2009
رقم العضوية : 59
المشاركات : 438
الدولة : مِصْر
الجنس : ذكر
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 3107
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif شرح كلاسات الـ css للنسخة [2.1.4]
اقتبـاس ،،
جزاك الله الفردوس الاعلى اخي الفاضل كنتاروا وبارك الله فيك


اقتبـاس ،،

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

شرح رائع mf




اقتبـاس ،،


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










شكرا لكم


الصفحة 1 من 5 < 1 2 3 4 5 > الأخيرة »

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

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







الساعة الآن 08:48 صباحا