أهلا وسهلا بك زائرنا الكريم في منتدى دعم PBBoard الرسمي، لكي تتمكن من المشاركة ومشاهدة جميع أقسام المنتدى وكافة الميزات ، يجب عليك إنشاء حساب جديد بالتسجيل بالضغط هنا أو تسجيل الدخول اضغط هنا إذا كنت عضواً .

حول تعديل الصورة الشخصية


مشاهدة المشاركة في الموضوع بالعرض العادي
look/images/icons/i1.gif حول تعديل الصورة الشخصية
  19-12-2025 10:18 مساءً  
Soliman
معلومات الكاتب
الفكرة بسيطة: نستبدل img بـ span ويحتوي على أيقونة Font Awesome عند كون عدم وجود صورة رمزية ، ونُبقي img عندما تكون هناك صورة رمزية حقيقية للعضو.
واضافة من عندي استخراج أول حرف من اسم العضو واضافته للايقونه + لون ايقونه مختلف لكل عضو 

طبعا لا تحتاج لتعديل ملف functions_class.php فهو متغيير دائما بالتحديثات الدورية ولا ننصح بتغييره

وبما انك لم تضع كود FontAwesome سأطبق على مثال آخر من عندي 

للتطبيق والتعديل في قالب sections_list
ابحث عن:
CODE
{if {$_CONF['info_row']['allow_avatar']}}
 <div class="UserPhoto_tiny_RCS" title="{$lang['Picture']} {$forum['username']} {$lang['Personal']}">
 <img src="{$forum['writer_photo']}" srcset="{$forum['writer_photo']} 2x" alt="Russ" class="avatar-u1-s" width="48" height="48" loading="lazy">
 </div>
 {/if}


 واستبدله بـ

CODE
{if {$_CONF['info_row']['allow_avatar']}}
 <div class="UserPhoto_tiny_RCS" title="{$lang['Picture']} {$forum['username']} {$lang['Personal']}">
 
 {if {$forum['avater_path']} !=''}
     <img src="{$forum['writer_photo']}"
         srcset="{$forum['writer_photo']} 2x"
         alt="{$forum['username']}"
         class="avatar-u1-s"
         width="48"
         height="48"
         loading="lazy">
 {else}
 <?php
 $forum['username_first_letter'] = mb_substr($forum['username'], 0, 1, 'UTF-8');
 ?>
 <span class="avatar-default avatar-u1-s" data-letter="<?php echo $forum['username_first_letter']; ?>">
 <?php echo $forum['username_first_letter']; ?>
 </span>
 <style>
 .avatar-default {
     float: right;
     margin-left: 6px;
     width: 42px;
     height: 42px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: #dde3ea;
     color: #2f3a4a;
     border-radius: 50%;
     font-size: 20px;
 }
 
 .avatar-default i {
     line-height: 1;
 }
 
 .avatar-u1-s {
     border-radius: 50%;
 }
 
 .avatar-default[data-letter="أ"],
 .avatar-default[data-letter="ا"],
 .avatar-default[data-letter="ب"],
 .avatar-default[data-letter="ت"] {
     background: #e7f0ff;
 }
 
 .avatar-default[data-letter="ج"],
 .avatar-default[data-letter="ح"],
 .avatar-default[data-letter="خ"] {
     background: #e9f7ef;
 }
 
 .avatar-default[data-letter="س"],
 .avatar-default[data-letter="ش"],
 .avatar-default[data-letter="ص"] {
     background: #f1e9ff;
 }
 
 .avatar-default[data-letter="م"],
 .avatar-default[data-letter="ن"],
 .avatar-default[data-letter="و"] {
     background: #fff4e5;
 }
 
 /* إنجليزي */
 .avatar-default[data-letter^="A"],
 .avatar-default[data-letter^="B"],
 .avatar-default[data-letter^="C"] {
     background: #e7f0ff;
 }
 
 .avatar-default[data-letter^="D"],
 .avatar-default[data-letter^="E"],
 .avatar-default[data-letter^="F"] {
     background: #e9f7ef;
 }
 
 .avatar-default[data-letter^="M"],
 .avatar-default[data-letter^="N"],
 .avatar-default[data-letter^="O"] {
     background: #fde8e8;
 }
 </style>    
 {/if}
 
 </div>
 {/if}


النتيجة
  • ألوان تلقائية حسب أول حرف
  • كل عضو ليس له صورة رمزية تظهر له أيقونة FontAwesome بلون مميز
  • دمج الحرف + أيقونة FontAwesome
  • اللون لا يتغير
  • أداء ممتاز
  • يدعم الحروف العربية والإنجليزي بنسبة 95%
وطبعا الكود يشرح نفسه واغلبه CSS 


الساعة الآن 08:44 AM