معلومات الكاتب ::بلا جدول و منسق بالـ CSS2 ,CSS3

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

أعرض امامكم اليوم طريقة تطوير قالب "معلومات الكاتب" او ما يسمى بـ 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