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

أعرض امامكم اليوم طريقة تطوير قالب "معلومات الكاتب" او ما يسمى بـ writer_info.tpl فهي معدلة بالكامل...كما ترون
نبدأ أولاً بشرح تركيبها :

1-قم باستبدال القالب writer_info.tpl بالقالب المرفق بنفس الاسم...

2-قم باضافة كود الـ css في ستايل شييت CSS و هو كما مبين

.info4 {

    background: #fff;

    color: #546c7e;

    border: 1px solid #DDDDDD #DDDDDD #C4C4C4 #C4C4C4;

    padding: 3px 6px 3px 6px;

    margin: 0px 20px 4px 20px;

    text-align:right;

    -webkit-box-shadow:  0 2px 6px #B3B3B3;

    -moz-box-shadow: 0 2px 6px #B3B3B3;

    -moz-border-radius: 9px 3px 9px 3px;

    -webkit-border-radius: 3px;

    -webkit-border-top-right-radius: 9px;

    -webkit-border-bottom-left-radius: 9px;

}

.info4 a:link

{

	   outline: none;

}

.info4 dl {

	   list-style-type: none;

	   padding: 0;

	   margin: 0;

	   overflow: hidden;

}



.info4 dt {

    float:right;

    color: #0072BC;

    font-weight:700;

}

.info4 dd {

    float:left;

    color: #002157;

    font-weight:700;

}

و الآن أصبح التركيب كامل... باستثناء اسم العضو المتواجد في قالبين مختلفين...كما سنوضح بالخطوة القادمة.

3- فإذا اردنا تنسيق اسم العضو كما هو مبين بالمثال وجب علينا تعديل كلا من القالبان..
show_reply.tpl
show_subject.tpl

و هذ بالتعديل فيهما و البحث عن <!-- Code switch Menu start -->
بعدها سنرى

	   <!-- Code switch Menu start -->

			   <a href="javascript:switchMenuNone('{$subject_id}subjectswitch')">

<spanstyle="font-size:large">{$Info['display_username']}</span><imgborder="0" cellspacing="1" src="{$image_path}/menu_open.gif"/></a>

لنقوم بتعديلها على النحو التالي...

<!-- Code switch Menu start -->

<div class="info4"><div align="center">

			  <a href="javascript:switchMenuNone('{$Info['reply_id']}replyswitch')">{$Info['display_username']}

			  <img border="0" cellspacing="1" src="{$image_path}/menu_open.gif" /></a></div></div>

4-إذا كنت تستخدم الرد الأفقي لكاتب الموضوع...فلا مشكلة..نقوم باستبدالقالب show_subject.tpl بالقالب المرفق بنفس الاسم..لتصبح الصورة كما نرى

---

و الآن بعد الانتهاء من التركيب..نشرع في مناقشة مافعلناه و كيفية استثماره بالطريقة المثالية...كما هو أمامنا,,

يمكننا رؤية هذا المثال :
لو عندنا هاك مزاج العضو سيكون تنسيقه هكذا:

{if {$Info['user_mood']}}



<div class="info4"><dl><dt>المزاج :</dt>

<dd><img src="{$Info['user_mood']}" /></dd></dl></div>



{/if}

اما هكذا ستكون بلا اضافات

<br/><br/>

{if {$Info['user_mood']}}

<div align="center">

<img src="{$Info['user_mood']}" /></div>

{/if}

وهكذا اكون اتممت درسي و الحمد لله...

نكتب المصادر التي دعمت موضوعي ليظهر بهذا الشكل:
طلب طريقة بـ Css ياريت يدخلو مهند و sinan ; Mr.Ba7aو خبراء
خاصية text-shadow ظل النص
استايلات شركة completevb
اخذت بعض الابعاد من خلال fire bug من هذا المنتدى : منتديات ملتقى الأحباب

هذا و ارجو تقديم الاقتراحات و الحلول الاخرى ....و المناقشة الجادة

التحميل من المرفقات أو من هنا...
http://sub3.rofof.com/012mftxr10/Writer_info_v1.html