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

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

اولا انبه ان هذا الكود هو عبارة عن تطوير لهذا :

[تومبيلات]كود وضع بيانات العضو داخل اطار في بي وعمل خلفية كاملة للبيانات

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

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

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

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

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

الرمز:

الكود:: <table width="90%" align="center" border="0" cellpadding="0" cellspacing="1"><tr><td class="code"><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}


{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

{postrow.displayed.POSTER_RPG}
</span>

</td></tr></table>

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

<table width="90%" align="center" border="0" cellpadding="0" cellspacing="1"><tr><td>الرمز:</td></tr><tr><td class="code">

الكود:: <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>

<div class="gowetobilobed">

{postrow.displayed.profile_field.LABEL}

{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>


{postrow.displayed.POSTER_RPG}
</span>

</td></tr></table>

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

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

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

الكود:: [table width="90%" align="center" border="0" cellpadding="3" cellspacing="1"][tr][td class="quote"]<table width="90%" align="center" border="0" cellpadding="0" cellspacing="1"><tr><td>[b]الرمز:[/b]</td></tr><tr><td class="code">.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;
}
</td></tr></table>[/td][/tr][/table][b]

[/b]

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

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

[b]لتري شرح لطريقة التعديل بالصور
حصريا لدى منتديات قويتو لقبائل بالعبيد كيفية التعديل على التومبيلات خطوه بخطوه و بالصور

شرح بالفيديو لكل ماتريد معرفة عن التومبيلات

ارجو عند النقل ذكر حقوقي ولله شهيد على الجميع وشكرا [/b]

منقول كما ذكر صاحبه:سعيدو

جزاك الله خير

» كود css لوضع الواجهه بعرض الصفحة بالكامل كمنتديات الفي بي للنسخه
» كود تخفيف لون الصور في المنتدي عند مرور الماوس عليها مثل منتديات الفي بي
» كودcss لوضع عنوان معلومات العضو فوق الصوره الشخصية بدون تومبيلات للنسخة 3