المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : شرح طريقة تأطير قالب template ال showthread بتقنيه ال css



admin
10-30-2013, بتوقيت غرينيتش 08:48 PM
http://www.dzbatna.com/images/icons/iconrote.gif ط´ط±ط* طھط£ط·ظٹط± ظ‚ط§ظ„ط¨ ط§ظ„ showthread ط¨طھظ‚ظ†ظٹظ‡ ط§ظ„ css (http://www.dzbatna.com/t1437088/)





السلام عليكم ورحمه الله

درس مفصل تأطير قالب template ال showthread

هذا القالب template الخاص بعرض صفحه الموضوع والرد السريع


صوره للايطار بعد تأطيره

http://www.aboshdg.net/up/uploads/images/aboshdg-58aece1ef4.gif (http://www.aboshdg.net/up/uploads/images/aboshdg-58aece1ef4.gif)
مثال لموقع حي



اولا اعداد القالب template للتأطير

نقوم بالبحث عن


رمز Code:
<!-- start content table -->
نقوم بحذف هذا الكود code لانه هو السبب في صعوبه تأطير القالب template

رمز Code:
<!-- start content table --> $spacer_open <!-- / start content table -->
http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-bb523cfecd.jpg (http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-bb523cfecd.jpg)

ثم نبحث عن

رمز Code:
<!-- end content table -->
ونحذف

رمز Code:
<!-- end content table --> $spacer_close <!-- / end content table -->
http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-b71dc60b86.jpg (http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-b71dc60b86.jpg)

الحين القالب template تم اعداده وجاهز للتأطير

هذا كود code التأطير المستخدم

رمز Code:
<div id=&quot;headc&quot;> <div class=&quot;right&quot;></div> <div class=&quot;right2&quot;></div> <div class=&quot;left&quot;></div> <div class=&quot;left2&quot;></div> </div> <div class=&quot;sha_right&quot;> <div class=&quot;sha_left&quot;> <div id=&quot;contc&quot;>..... </div> </div> </div> <div id=&quot;footc&quot;> <div class=&quot;footc_right&quot;></div> <div class=&quot;footc_right2&quot;></div> <div class=&quot;footc_left&quot;></div> <div class=&quot;footc_left2&quot;></div> </div>
كود code التأطير الاول

http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-17d71018ed.jpg (http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-17d71018ed.jpg)




كود code التأطير الثاني

http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-1f503f849c.jpg (http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-1f503f849c.jpg)

نبحث عن

رمز Code:
<!-- / controls above postbits -->
ونضع اسفله كود code التاطير الاول

http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-4570c0a5b2.jpg (http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-4570c0a5b2.jpg)

هذا الكود code اللمحدد بالازرق واظن ان الخطوه هذي سهله

ثم نبحث عن

رمز Code:
<!-- controls below postbits -->
ونضع اعلاه كود code التاطير الثاني

http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-54a5e7e4b5.jpg (http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-54a5e7e4b5.jpg)

لتأطير الرد السريع

نبحث عن

رمز Code:
<!-- quick reply -->
ونضع اسفله كود code التاطير الاول

http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-a0e4461af6.jpg (http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-a0e4461af6.jpg)

ثم نبحث عن

رمز Code:
<!-- / quick reply -->
ونضع كود code التأطير الثاني

http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-e3024fbd93.jpg (http://www.up.al-yawaqt.com//uploads/images/al-yawaqt.com-e3024fbd93.jpg)

بالتوفيق





التعديل الأخير كان بواسطة ابو شدق; 10 - 01 - 2014 الساعة 17:33 السبب: حذف المثال لاحتواء الاستايل style على صور نسائية

ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)



https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©

استعمل مربع البحث في الاسفل لمزيد من المواضيع


سريع للبحث عن مواضيع في المنتدى