كود [Template] ادوات المواضيع بشكل رائع

السلام عليكم و رحمة الله و بركاته

مرحبا اخوانى و اخواتى اعضاء و زوار منتدى الدعم و المساعده


اليوم اقدم لكم

كود [Template] ادوات المواضيع بشكل رائع من تصميمى ( الطائر الحر )




صوره للكود




يظهر فى المواضيع بهذا الشكل









تكبير الصورة تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.











تكبير الصورة تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.




و الان الكود و طريقة تركيبه

اذهب الى

1- لوحة الاداره




2 - مظهر المنتدى




3 - التومبلايتات و القوالب / اداره عامة




4 - اضغط تعديل على قوالب ( viewtopic_body )








تكبير الصورة تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.




5 - ابحث عن هذا الكود

الكود: ---------تضليل المحتوى



و ضع بعده مباشرتا الكود

صوره لتوضيح



تكبير الصورة تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.




الكود

الكود: ---------تضليل المحتوى

انشر الموضوع

اضافة تقييم

الرد على الموضوع

الابلاغ عن الموضوع

مراقبة هذا الموضوع

ملحوظه

ابحث داخل الكود عن الكود التالى و ادخل رابط منتداك به

الكود: ---------تضليل المحتوى



و استبدله برابط منتداك



6 - نشط التعديل






تكبير الصورة تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.




=======

ثم اذهب الى

لوحة الاداره / مظهر المنتدى / الصور و الالوان / الوان / ورقة تصميم الـ css

ضع الكود التالى

و اضغط قدم

الكود

الكود: ---------تضليل المحتوى
.AVATAR img {
height: 220px;
width: 165px;
}

.postbitbox
{
background-color: #f4fcfe;
border-top: solid 2px #f4fcfe;
border-left: solid 2px #f4fcfe;
border-right: solid 2px #f4fcfe;
border-bottom: solid 2px #f4fcfe;
padding:2px;
color:#000000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-khtml-border-radius: 5px;
-moz-box-shadow: 0 0 6px #137e9c;
-webkit-box-shadow: 0 0 6px #137e9c;
box-shadow: 0 0 6px #137e9c;
}
.pbit {
padding-left: 3px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
background-color: #f4fcfe;
border-top: 1px solid #99dff3;
border-left: 2px solid #99dff3;
border-right: 1px solid #99dff3;
border-bottom: 2px solid #99dff3;
margin-bottom: 3px;
}
.pbit:hover{background-color: #e5f7fc;}

.content {
width:700px;
margin:10px;
float:right;
}

.a7la7ekayaa {
width:200px;
margin:10px;
float:left;
padding: 5px;
}


.a7la7ekaya {
border: 1px solid #D1D1E1;
border-right: 2px solid #D1D1E1;
width:200px;
background: #fbfbfb url(images/misc/alts.gif) repeat-x;
padding: 5px;
}


.clear {
clear:both;
}



انتهاء الشرح الف مبروك


تم تعديل العنوان بواسطة محمود ياسر بسبب ذكر صاحب الموضوع ان الكود من تصميمه وهو منقول

:تسلم الايادي:

شكرا

وبارك الله فيك

مشكوور جدا

+


ج ـــاري ازالة كلمة من تصميمي لان الكود منقوول وليس من تصميمك اخي