كود اظهار الصوره الشخصيه + اظهار اسم العضو + البينات + واجهه في نسخة الجوال

  افضل المواضيع1
السلام عليكم ورحمة الله وبركاته
كود اظهار الصوره الشخصيه + اظهار اسم العضو + البينات + واجهه في نسخة الجوال
صوره قبل تسجيل الدخول
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

صوره بعد الدخول
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

طرقية التركيب
لوحة الادارة - مظهر المنتدى - التومبلايتات و القوالب
نسخة الجوال - قالب index_box
واستبدل الكود بالكامل بالكود التالي
الكود:

<!-- BEGIN switch_user_logged_in -->
<div id="trap"><span class="Ahla-avatar"></span>&nbsp;&nbsp; <span style="font-size: 16px;"><span style="color: #000000;">متصل باسم:</span></span>&nbsp;<span class="usernameqjin"></span>&nbsp;

<div align="right"><p>
 &nbsp;&nbsp;<a href="/profile?mode=editprofile"><span style="color: rgb(238, 238, 238); font-size: 18px;">البينات الشخصية</span></a><br />&nbsp;&nbsp;
</p></div>
</div>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<div id="rrap"> <p>
  
</p>
<div style="text-align: center;">
  <strong style="color: rgb(238, 238, 238); font-size: large;">مرحباَ بكم في منتديات (اكتب اسم منتداك هنا)</strong>
</div>
  <span style="font-size: 18px;"></span>
<div style="text-align: center;">
  <strong style="color: rgb(238, 238, 238);">لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص,</strong>
</div><span style="font-size: 18px;"></span>
<p>
</p>
<p style="text-align: center;">
   <span style="font-size: 18px;"><strong><span style="color: rgb(238, 238, 238);">يجب عليك أن </span><a href="/login"><span style="color: rgb(153, 0, 153);">تسجل الدخول الى حسابك</span></a><span style="color: rgb(238, 238, 238);"> في المنتدى.</span></strong></span>
</p>
<p style="text-align: center;">
   <strong><span style="font-size: 18px;"><span style="color: rgb(238, 238, 238);"> إن لم يكن لديك حساب بعد, نتشرف بدعوتك </span><a href="/register"><span style="color: rgb(153, 0, 153);">لإنشائه</span></a></span></strong><br />
</p>
</div>
   <!-- END switch_user_logged_out -->  
<div align="center"><img width="33" height="55" src="http://i35.servimg.com/u/f35/19/45/26/19/loveli10.png" /></div>
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="forum">
 <h2>{catrow.tablehead.L_FORUM}</h2>
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <a href="{catrow.forumrow.U_VIEWFORUM}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="{catrow.forumrow.FOLDER_CLASSNAME} forum-section">
                  <div class="forum-icon"><i class="material-icons"></i><!-- BEGIN avatar --><div class="forum-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div><!-- END avatar --></div>
 <div class="forum-content">
 <h3>{catrow.forumrow.FORUM_NAME}<br /><div class="forum-statistics">المواضيع :{catrow.forumrow.TOPICS}</div><div class="forum-statistics">مشاركات :{catrow.forumrow.POSTS}</div></h3>
                           <div class="forum-lastpost">{catrow.forumrow.LATEST_TOPIC_NAME}</div>
 <div class="forum-lastpost-time">{catrow.forumrow.L_LATEST_POST_FROM_THE}</div>
 </div>
 </a>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </div>
 <!-- END tablefoot -->
<!-- END catrow -->
  <script>
$(document).ready(function () {
$('.usernameqjin').html('<a href="/u'+ _userdata.user_id +'">'+ _userdata.username +'</a>');
});  
</script>
    <script>
          $(function(){
    $.each(_userdata, function(key, value){
        $(".Ahla-" + key).html(value);
    })
});
  </script>


ثم ضع الكود التالي بورقة ال CSS
الكود:

.usernameqjin {
    font-size: 22px;
    color: #ffffff;
}

span.Ahla-avatar img {
    float: right;
    height: 74px;
    width: 54px;
}

div#trap {
    height: 76px;
    background: #3ac1f2;
}
div#rrap {
    background: #3ac1f2;
}

صنع عند رامي كاتي
  افضل المواضيع2
يعطيك العافية على الموضوع
عوافي يارب على استمرارك معنا
ومواضيعك الحصرية


[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
  افضل المواضيع3

سلمت ها الايادى
على جمال وروعة هذا الاختيار
الراقي والمميز .
  افضل المواضيع4
JAR7 و البراق
تسلمون على المرور العطر
والله يعافيكم يارب [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]
  افضل المواضيع5
اسأل العلي القدير
ان يكرمك في الدنيا والاخرة
كما تكرمنا بهذا الخير دوما ولا تبخل علينا به
اثابك الجنة ونعيمها
  افضل المواضيع6
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة
إنـجاز أكثر رائــــــع
لكن أرجو منكَ عدم التوقف عند هذا الحد
مـنتظرين ابداعتــــــك
دمتـ ودام تألقـك
تحياتــي
لاتستطيع الرد على المواضيع في هذا المنتدى