اكواد لتنسيق ألوان أسماء المجموعات و وضع علامة توثيق في منتديات XenForo

[codeNET]

الدليل الشامل لتنسيق ألوان أسماء المجموعات في منتديات XenForo


حصرياً لمنتديات فورارنت

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

​

أولاً: كيفية الوصول إلى خيار التنسيق

1. 
   []قم بالدخول إلى لوحة تحكم المنتدى (ACP).
   
   []من القائمة الجانبية اختر المجموعات والتصاريح (Groups & Permissions).
   
   []اضغط على مجموعات المستخدمين (User Groups).
   
   []اختر المجموعة التي تود تعديلها.
2. ابحث عن خانة عنوان CSS لاسم المستخدم (User Name CSS).

ثانياً: التنسيقات المقترحة لكل رتبة

1. رتبة الإدارة (قوة اللون الأحمر مع تأثير النيون)


هذا تنسيق اسم المدير مع علامة توثيق الزرقاء

/* لون اسم الإدارة */
color: #009CF5;
font-weight: bold;
text-shadow: 0 0 5px #00649D, 0 0 10px #00649D;

&:before {
    content: '';
    display: inline-block;
    width: 15px;  /* عرض الصورة */
    height: 15px; /* ارتفاع الصورة */
    background: url('https://d.top4top.io/p_37517krqk0.png') no-repeat center center;
    background-size: contain;
    margin-right: 8px; /* مسافة بين التاج والاسم */
    vertical-align: middle; /* لمحاذاة الصورة مع النص */
    margin-bottom: 4px; /* رفع العلامة الى الاعلى */
}

هذا التنسيق يجعل اسم المدير بارزاً مع ظل خارجي مضيء:

كود الـ CSS:


color: #ff0000;


font-weight: bold;


text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);


letter-spacing: 0.5px;

2. رتبة المراقبين (الهدوء والثبات باللون الأخضر)


يعطي طابعاً رسمياً ومريحاً للعين:

كود الـ CSS:


color: #2ecc71;


font-weight: bold;


text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);


font-style: italic;

3. رتبة العضو المميز أو VIP (التدرج الذهبي الفاخر)


هذا التنسيق يستخدم تدرج الألوان (Gradient) ليبدو الاسم كأنه قطعة ذهبية:

كود الـ CSS:


background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fcf6ba, #aa771c);


-webkit-background-clip: text;


color: transparent;


font-weight: bold;

ثالثاً: نصيحة هامة لظهور الألوان في كل مكان

لكي تضمن ظهور هذه الألوان في قائمة "المتواجدون الآن" و"آخر المشاركات"، تأكد من تفعيل الخيار التالي:​

الإعدادات (Options) > معلومات المستخدم (User Options) > ثم فعل خيار (Enable user group username styling).


رابعاً: لمسة إبداعية إضافية (قالب extra.less)

إذا أردت إضافة حركة "النبض" لاسم الإدارة، توجه إلى قالب extra.less في ستايلك وأضف الكود التالي:​

@keyframes adminPulse {


0% { text-shadow: 0 0 5px #ff0000; }


50% { text-shadow: 0 0 20px #ff0000, 0 0 30px #ff4d4d; }


100% { text-shadow: 0 0 5px #ff0000; }


}


.admin-pulse {


animation: adminPulse 2s infinite;


color: red;


font-weight: bold;


}

ثم ضع الكلمة admin-pulse في خانة CSS الخاصة بمجموعة الإدارة.​

خاتمة:

نتمنى أن يكون هذا الشرح قد نال إعجابكم وساهم في تجميل منتداكم الغالي فورارنت. لا تترددوا في طرح أي استفسار حول تنسيقات الـ CSS المتقدمة في الردود.​

مع تحيات: إدارة فورارنت