كود جعل البيانات الشخصية احترافية احلى من الفي بي بكثير

السلام عليكم
بسم الله الرحمن الرحيم
اقدم لكم اليوم كود رائع و هو لجعل البيانات الشخصية الخاصة بالعضو في غاية الروعة و هذه صورة توضيحية:



تكبير الصورة تم تعديل ابعاد هذه الصورة. انقر هنا لمعاينتها بأبعادها الأصلية.

https://2img.net/r/ihimizer/img52/4892/85879980.gif

اولا انبه ان هذا الكود هو عبارة عن تطوير لهذا :
[تومبيلات]كود وضع بيانات العضو داخل اطار في بي وعمل خلفية كاملة للبيانات حصريا من قويتو

المهم نبدا اولا باهم شيئ يلزم معرفته وهو ان الكود مقسم لجزئين كود تومبلايت و كود css

نبدا بتغيير كود التومبلايت:

لتغير كود التومبيلات

و نذهب الي
لوحة التحكم
مظهر المنتدى
تومبيلات
اداره عامه
viewtopic_body

نبحث عن هذا الكود:

الكود:


<span
 class="name"><a
name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

    <span class="postdetails poster-profile">
    {postrow.displayed.POSTER_RANK}

    {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


    <!-- BEGIN profile_field -->
    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
    <!-- END profile_field -->
    {postrow.displayed.POSTER_RPG}
  </span>

ونستبدله بهذا

الكود:



<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong></strong></span>
 <div align=center>
<fieldset>                     

 <div align=center>
{postrow.displayed.POSTER_NAME}
<span class="postdetails poster-profile">
</div>
{postrow.displayed.POSTER_RANK}
{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}

</div>
</fieldset>   
</div> 
<fieldset>                     
<legend>بيانات العضو
 </legend>
<!-- BEGIN profile_field -->
  <div class="gowetobilobed">

{postrow.displayed.profile_field.LABEL}
 
{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
<!-- END profile_field -->


{postrow.displayed.POSTER_RPG}
</span>

وبعدها نضغط نشر

والان لوضع كود السي اس اس
نذهب الى
لوحة الادارة
مظهر المنتدى
الالوان
ورقة السي سي

ونضع الكود التالي :

الكود:


.gowetobilobed {
border-style: solid;
border-width: 1px 3px 1px 3px;
border-color: #000000;
background: none repeat scroll 0 0;
margin-top: 1px;
padding: 1px;
position: relative;
width: 150px;
background-color: #ffffff;
}
fieldset {
      -moz-border-radius-bottomleft:7px;
      -moz-border-radius-bottomright:7px;
      -moz-border-radius-topleft:5px;
      -moz-border-radius-topright:7px;
      border-radius: 3px;
width:50%;
border : 3px double #37b0df;
background-color:#ffffff;
background-image : url(http://i37.tinypic.com/2d0kjly.gif);
}
span.postdetails
{
text-align:center;
}
fieldset.genmed
{
width:100px;
}




ملاحظة لتغيير لون خلفية حقول البيانات

غير اللون ffffff بالللون الذي تريده
لتغير لون الاطار غير اللون 000000 باللون الذي تريده

ما شاء الله سلمت اياديك على موضوك المميز و جعلها في ميزان حسناتك

الله يعطيك العافية على الموضوع المميز

الله يعطيك العافية على الموضوع المميز

ما شاء الله سلمت اياديك على موضوك المميز و جعلها في ميزان حسناتك

بارك الله فيك .

مشكووووووووور على الطرح

شكرا على الكود المفيد والرائع يسلمو

شكرا لك

شكرااااااااا
جزاك الله كل خير اخي الكريم

تقبل تحياتي ومرووووووري

شكرا لك