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

مشاهدة النسخة كاملة : { حصري } شرح تأطير جدول SHOWTHREAD+ postbit مع تغير طريقة عرض الموضوع


Losha
09-04-2007, 10:03 PM
http://www.ojqji.net/vb/images/smilies/s22.gif

حصري تقطير جدول SHOWTHREAD مع تغير عرض طريقة الموضوعhttp://www.traidnt.net/vb/images/smilies/cl ap.gif


http://00op.com/up/uploads06-08-17/6008c7257f.gif

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

قبل البدأ أحب التنويه بان الدرس طويل ولاكن متكامل والحمدلله
ولم ألجأ إلى طرحه فى أكثر من موضوع لكى تعم الفائده
ويعلم الله كم اخذ منى وقت فى إعداده وإخراجه لكم
وما طالب أى شئ سوى الدعاء لى فى ظهر الغيب بصالح العمل
http://00op.com/up/uploads/f1cbb030c6.gif

نبدأ بسم الله ونجهز المعدادت الخاصه بالعمل
http://www.traidnt.net/vb/images/icons/iconrote.gi f أولاً: ترمس قهوه للمبتدأين ترمس شاى للمحترفين

http://www.traidnt.net/vb/images/icons/iconrote.gi f ثانياً : تجهيز الصور الخاصه بالتقطير

http://www.traidnt.net/vb/images/icons/iconrote.gi f ثالثاً : أخراج القوالب الأتيه والإحتفاظ بهم فى ملفات تكست كلاً على حده

SHOWTHREAD
postbit
postbit_legacy

نبدأ بالتعرف على ما سوف نقوم بيه
قالب ال SHOWTHREAD
سوف نقوم من خلاله بتقطير قالب الموضوع الذى يحتوى على طريقة العرض
وأيضاً من خلاله سوف يتم التقطير لقالب الرد السريع
والقوالب postbit و postbit_legacy

سوف يتم تغير طريقة العرض من خلالهما بطريقة جديدة جداً ولم يتطرق لطرحها أحد من أخواننا

http://00op.com/up/uploads/f1cbb030c6.gif

بسم الله نبدا الدرس
للتعرف على درس سابق مماثل ولاكن مختص بقالب الناف بار كى يسهل عليكم طريقة توزيع الصور فى الفرونت بيج هنــــــــــــــا (http://www.traidnt.net/vb/showthread.php?t=139799 )
بعد التعرف على كيفية التوزيع الصحيحه وإخراج القالب فى شكلة النهائى قبل التوزيع
نبدأ بإخراج أول ملف تكست الذى تحدثنا عنه فى أول الموضوع بعد أخراجه من الإستايل وهو قالب SHOWTHREAD
نضعه فى الفرونت بيج
ونبدا فى تحديد اماكن التقطير
كما موضح بالصوره
وهذه الجزئية مخصصه لقالب الموضوع وشريط أدواته

http://www.losha.net/shro7/SHOWTHREAD/01.jpg (http://www.losha.net/vb/index.php)

كما موضح نضع هذه العلامات ******** لكى تعلمنا ببداية جزء التقطير وبنهايته
وهذه البداية
ثم نضع المشيره بالماوس كما موضح بالصوره التاليه

http://www.losha.net/shro7/SHOWTHREAD/02.jpg (http://www.losha.net/vb/index.php)

وكما وضحت الصور
او نقوم بالبحث على الكود
<!-- toolbar -->
ونضع أعلاه هذه العلامات ********
ثم نقوم بالبحث عن
<!-- controls below postbits -->
ونضع أعلاه هذه العلامات ********
أنتهينا الان من وضع العلامات بين منطقة التقطير المراده
نذهب الان لصفحة الفرونت بيج المصممه والمقطرة
بعد قيامنا بنسخ كافة الاكواد بين الرموز الموضوع من قبلنا ********
وبعد وضعها نقوم بتظليل كافة الصفحه المصممه ولصقها مره أخرى فى قالب الشوزردSHOWTHREAD
مكان ما أخذنا الأكواد
ولا ننسا إزالة العلامات ********
هكذا سوف يكون الشكل بعد إعادة الجزء المنسوخ بعد التقطير
أضغط على الصوره لرؤتها بالحجم الكامل

http://www.losha.net/shro7/SHOWTHREAD/030.jpg (http://www.losha.net/shro7/SHOWTHREAD/03.jpg)

http://00op.com/up/uploads/f1cbb030c6.gif

الجزء الذى تم تقطيرة الحين هو طبعاً الجزء المخصص لعرض محتوى الموضوع
والذى يتضمن طريقة العرض سواء أفقية أو رأسيه
لأن التقطير هنا بهذه الطريقه أفضل 1000 مره من تقطير قالب البوسط بط او قالب البوست لجاسى على حده
لعدم تضخم عرض الموضوع والفصل بينهم بحجم الصور بين كل موضوع وأخر ولسهولة التصفح والتقليل من حجم البوندثات لعرض الصور بما اناه محمله على الموقع
ولكل مصمم ومبرمج وجهة نظر

بهذا الجزء من الدرس نكون أنتهينا من التقطير الكامل وليس النهائى لقالب الSHOWTHREAD وهو المختص بعرض الموضوع
http://00op.com/up/uploads06-08-17/6008c7257f.gif
بسم الله نبدا الجزء الثانى
وهو تقطير قالب الرد السريع
وكان فى النسخ القديمة يتم تقطيره او توزيع الصور عليه من قالب showthread_quickreply
أما فى النسخ الحديثه يتم توزيعه من قالبنا اليوم قالب الSHOWTHREAD
نذهب للفرونت بيج ونضع مشيرة الموس كما موضح فى الصور التالية

http://www.losha.net/shro7/SHOWTHREAD/004.jpg (http://www.losha.net/vb/index.php)

ثم نحدد بوضع هذه العلامات ( ******** ) كما قولنا سابقاً
ثم نذهب للجهه المعاكسه ونضع مسيرة الموس كما موضح

http://www.losha.net/shro7/SHOWTHREAD/04.jpg (http://www.losha.net/vb/index.php)

ثم نحدد بوضع هذه العلامات ( ******** )

وطبعا الصور موضحه
او نقوم بالبحث على الكود
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
ونضع أعلاه هذه العلامات ( ******** )
ثم نقوم بالبحث عن
</form>

<if condition="!is_browser('ie') AND $show['wysiwyg']">

ونضع أعلاه هذه العلامات ( ******** )

نذهب الان لصفحة الفرونت بيج المصممه والمقطره
بعد قيامنا بنسخ كافة الاكواد بين الرموز الموضوع من قبلنا ( ******** )
وبعد وضعها نقوم بتظليل كافة الصفحه المصممه ولصقها مره أخرى فى قالب الشوزردSHOWTHREAD
مكان ما أخذنا الأكواد
ولا ننسا إزالة العلامات ( ******** )
هكذا سوف يكون الشكل بعد إعادة الجزء المنسوخ بعد التقطير

http://www.losha.net/shro7/SHOWTHREAD/07.jpg (http://www.losha.net/vb/index.php)

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

http://www.losha.net/shro7/SHOWTHREAD/05.jpg (http://www.losha.net/vb/index.php)
أخ يوجد خلل كما ترون فرق بين التقطير وقالب الموضوع
لكى تتعرف على هذه المتغيرات
توجهه للرابط التالى لكى تتعرف على خصائص المتغيارت للإستايل من داخل غرفة التحكم

http://www.losha.net/admincp/vBulletinkm.htm

ثم ننتبه للشرح التالى لكى نعالج فروق المسافات الظاهره
نتوجه كما موضح بالصوره التالية
متغيرات الإستايل

http://www.losha.net/shro7/SHOWTHREAD/08.jpg (http://www.losha.net/vb/index.php)

ثم نلاحظ الصوره التاليه وهيه الخاصه بالحدود والمسافات بينها

http://www.losha.net/shro7/SHOWTHREAD/008.gif (http://www.losha.net/vb/index.php)

وننفز ما هو مكتوب فى الصوره وهو تغير الرقم الموضح إلى رقم صفر لكى نلغى الحدود الداخليه
ونتوجه بعد التغير إلى قالب الموضوع ونرى النتيجه

http://www.losha.net/shro7/SHOWTHREAD/09.jpg (http://www.losha.net/vb/index.php)

الحمدلله تمت المعالجه وإظهار القالب على اكمل وجه http://www.traidnt.net/vb/images/smilies/icon30.gi f
ومن هذه المرحله يمكنك إعتماد قالب الشوزرد SHOWTHREAD بكل خير والأنتهاء من التصميم وإعتماده

http://00op.com/up/uploads/f1cbb030c6.gif
أنتظرو لم ننتهى بعد فقد أنتهينا والحمدلله من التقطير ولاكن سوف نقول المذيد من ميزات منتيدات الفى بى بإستخدام أوامر الشرط </if>
وهنا سوف نناقش لما سوف نجرى هذا التغير على طريقة العرض
أولاً : كاتب الموضوع الأول
لو كان شارح موضوع فإنه سوف يستخدم كميه من الصور لا بأس بها
وبأحجام مختلفه فلنفرد ان الإستايل غير متمدد فإن الصور سوف تأخز جذئيه كبيرة من بينات العضو وسوف تسبب فركشه فى الإستايل
وحتى لو كان متمدد فأيضاً سوف يحدث هذا الأمر
هنا نبدأ بالتركيز لكى يتم التغير كما سوف أوضح
الطريقه طبعا يعرفها الخبراء وبعض العامه
ولاكن لم يتطرق لها أحد من قبل فى الطرح
وهيه جعل أول قالب للموضوع هو قالب postbit
والردود تأتى فى قالب postbit_legacy http://www.traidnt.net/vb/images/smilies/no.gif
هل نستطيع فعل ذلك نعم فلنتذكر أول الدرس فقد قولت
http://www.traidnt.net/vb/images/icons/iconrote.gi f ثالثاً : أخراج القوالب الأتيه والإحتفاظ بهم فى ملفات تكست كلاً على حده

SHOWTHREAD
postbit
postbit_legacy
http://00op.com/up/uploads/f1cbb030c6.gif

نبدأ بسم الله فى التغير لطريقة العرض
http://www.losha.net/shro7/SHOWTHREAD/p01.jpg
لاحظ الصورة
نفتح الملف التكست المسمى postbit
ونضع فى أول القالب أداة الشرط
<if condition="$post[postcount]==1">
وفى نهاية القالب نضع نهاية أداة الشرط
</if>
الأن نغلق ملف التكست والإحتفاظ بيه لحين العوده مره أخرى له
http://00op.com/up/uploads/f1cbb030c6.gif
الأن نفتح التكست الأخر المحتوى على قالب الpostbit_legacy
وكما فعلنا فى القالب الأول مع أختلاف ترميز بسيط فى أدوات الشرط
نضع فى أول القالب
<if condition="$post[postcount]!=1">
وفى نهاية القالب نضع نهاية أداة الشرط
</if>
وهنا لا نغلق ملف التكست قبل نسخ كامل محتواه تام
وبعدها نغلقه

الان جاء وقت تغير طريقة عرض القالب
أفتح التكست الذى يحتوى على قالب الpostbit
ونضع فى أخره المحتوى الذى نسخناه كامل من قالب الpostbit_legacy
وهنا نكون أنتهينا من التعديل على القالب
كيف يتم التغير
الأن كل ما عليك أن تعرف منتداك يستخدم أى توارث فى العرض للتعرف على الأمر
توجه لهذا الموضوع

تعرف على postbit_legacy و postbit شرح (http://www.traidnt.net/vb/showthread.php?t=176305 )
المهم
توكل على الله
وضع محتوى التكست الذى أضفنا داخله قالب الpostbit_legacy
وهو تكست قالب postbit
ضعه داخل مكانه فى جدول الإستايل
وإذهب إلى المنتدى وشوف كيف تم تغير طريقة العرض
مثال
هنــــــــــــــــــا (http://www.losha.net/vb/showthread.php?t=21)

شكر خاص لأخى الحبيب ثامر المتميز السعودى (http://www.vip4vip.com)
فى شرح لى طريقة تغير العرض كما شرحت

مرفق كامل الصور المطروحه بالدرس صور التصميم مقطعه لمن احب متابعة الدرس خطوه خطوه ومرفق أيضاُ قالب البوسط بط المعدل ومرفق قالب الSHOWTHREAD مقطر لمن أراد رأيته أو تبديل الصور المرفقه بالدرس بصور أخرى لديه
الدرس مشروح على نسخة 3.6.0
وأى سؤال بإذن الله أخوكم حاضر له بالتوفيق والخير نلتقى
http://00op.com/up/uploads06-08-17/6008c7257f.gif
فالسماح على الخطأ والنسيان
فإن كان بيه خطأ فإنه منى وأنسانى إياه الشيطان الرجيم
وإن أصبت http://www.traidnt.net/vb/images/smilies/clap.gif فلله الحمد والمنة أن وفقت في ذلك

وفي ختام هذا الشرح أدعوا الله لي ولكم ولوالدينا ولمن أحببناه في الدنيا
بالهداية والصلاح في الدنيا وأن يجمعنا جميعاً في الفردوس الأعلى ....

سبحانك اللهم وبحمدك , أشهد أن لا اله إلا أنت أستغفرك وأتوب إليك
أخوكم فى الله
Ali Losha


http://00op.com/up/uploads06-08-17/4c4a80316d.gif


المرفقات
http://www.traidnt.net/vb/images/icons/iconrote.gi fالمرفق الأول : قالب SHOWTHREAD ... http://www.00op.com/up/include/images/up.gif (http://www.losha.net/shro7/SHOWTHREAD/SHOWTHREAD. zip)
http://www.traidnt.net/vb/images/icons/iconrote.gi fالمرفق الثانى : قالب postbit المعدلhttp://www.00op.com/up/include/images/up.gif (http://www.losha.net/shro7/SHOWTHREAD/postbit.zip )
http://www.traidnt.net/vb/images/icons/iconrote.gi fالمرفق الثالث : الدرس كامل لمن لم تظهر لدية الصورhttp://www.00op.com/up/include/images/up.gif (http://www.losha.net/shro7/SHOWTHREAD/drs.zip)
http://www.traidnt.net/vb/images/icons/iconrote.gi fالمرفق الرابع: الصور الخاصه المنفذه بالدرسhttp://www.00op.com/up/include/images/up.gif (http://www.traidnt.net/vb/attachment.php?attachme ntid=46263&d=1146342084)
http://www.traidnt.net/vb/images/icons/iconrote.gi fالمرفق الخامس: لمن أراد نقل الدرس لتعم الفائدة الدرس كامل بكامل محتوياته http://www.00op.com/up/include/images/up.gif (http://www.losha.net/shro7/SHOWTHREAD/na2l.zip)

رابط الدرس الأصلى (http://www.losha.net/vb/showthread.php?p=11874)