3.0.4 تغيير شكل ظهور معلومات العضو في قالب المواضيع

[Admin]

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

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

معاينة القالب​

​

تركيب القالب​

توجه نحو لوحة الادارة - الاستايلات والقوالب - البحث في القوالب - وابحث عن القالب writer_info وقم باستبداله بالقالب الموجود بالمرفقات (كلمة سر فك الضغط: iinkor.com)

ومن ثم توجه نحو اعدادات الـ Css الخاصة بالاستايل الافتراضي وقم بالتعديلات التالية:
عدل الكود التالي:

.w_infos {
width: 170px;
vertical-align: top;
}

وقم بحذف العرض حتى لا يؤثر على شكل القالب عند رفعه في منتداك

.w_infos {
vertical-align: top;
}

ومن ثم ابحث عن الكود التالي وقم بحذفه كامل:

.UserPhoto_large{
max-height: 250px;
*overflow: auto;
}
.UserPhoto_large img{
background-color:#FFFFFF;
border-radius: 50%;
border: 1px solid #fff;
width: 80px;
height:80px;
padding:2px;
margin-right:-15px;
border: 1px solid #d5d5d5;
box-shadow:0 2px 2px rgba(0, 0, 0, 0.1);
}
.UserPhoto_xlarge img, img.UserPhoto_xlarge, .UserPhoto_xlarge::after {
display: block;
height: 100px;
width: 100px;

padding:0px;
background-color: #FFF;
border: 1px solid #d5d5d5;
border-radius: 50%;
box-shadow:0 2px 2px rgba(0, 0, 0, 0.1);
}
.UserPhoto{
padding:1px;
border:1px solid #d5d5d5;
background-color:#FFFFFF;
box-shadow:0 2px 2px rgba(0, 0, 0, 0.1);
}
.UserPhotoli{
float:right;
}

ومن ثم ابحث عن الوسم w_name_rate واحذف الزوائد واجعله كالتالي:

.w_name_rate {
position: relative;
top:3px;
}

وأخيرًا ابحث عن الوسم span.user_online وقم بتعديل المتغير top في الى 35px

top: 35px;

وهيك بكون القالب كامل جاهز ولو واجهتك اي مشكلة ضعها هنا بالتعليقات وان شاء الله نقدر نساعد
بالتوفيق للجميع
والسلام ختام​

 

[captcha]

جميل
مشكووور