تأطير قالب ال showthread بتقنيه الـ CSS

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

درس تأطير قالب ال showthread

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

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

مثال لموقع حي

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

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

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> <table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

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

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> $spacer_open<table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

ثم نبحث عن

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> <table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

ونحذف

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> $spacer_close<table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

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

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

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> <div id="headc"><div class="right"></div><div class="right2"></div><div class="left"></div><div class="left2"></div></div><div class="sha_right"><div class="sha_left"><div id="contc">.....</div></div></div><div id="footc"><div class="footc_right"></div><div class="footc_right2"></div><div class="footc_left"></div><div class="footc_left2"></div></div><table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

كود التأطير الاول

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

نبحث عن

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> <table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

ونضع اسفله كود التاطير الاول

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

ثم نبحث عن

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> <table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

ونضع اعلاه كود التاطير الثاني

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

نبحث عن

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> <table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

ونضع اسفله كود التاطير الاول

ثم نبحث عن

<table id="table34" style="border-collapse: collapse;" border="0" cellpadding="0" width="99%"> <tr> <td valign="bottom" width="9"> </td> <td style="background-image: url("images/w-arab/post/pst03.jpg"); background-repeat: repeat-x;" align="right" background="images/w-arab/post/pst_03.jpg" valign="bottom"> <table id="table35" style="border-collapse: collapse;" border="0" cellpadding="0" width="100%"> <tr> <td align="center" width="114"> <table id="table36" style="border-collapse: collapse;" border="0" cellpadding="0" width="1%"> <tr> <td width="29"> </td> <td width="71"> </td> <td> </td> </tr> </table></td> <td> </td> </tr> </table></td> <td valign="bottom" width="9"> </td> </tr> <tr> <td background="images/w-arab/post/pst_10.jpg" width="9"> </td> <td align="left"> <table id="table37" border="0" cellpadding="0" cellspacing="3"> </table></td> <td background="images/w-arab/post/pst_09.jpg" width="9"> </td> </tr> <tr> <td width="9"> </td> <td background="images/w-arab/post/pst_15.jpg"> </td> <td width="9"> </td> </tr> </table>

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

بالتوفيق

</blockquote>

» تومبيلات : قالب صفحة المواضيع مثل منتديات سيدي عامر فقط من دعم شباب
» كود تأطير وصف القسم ، لمنتديات
» شرح تأطير الاقسام الفرعية
» كود css تأطير الفئات والاحصائيات والمواضيع وغي
» كود css تأطير الفئات والاحصائيات والمواضيع