شرح تغير شكل مجموعات المستخدمين

[codeNET]

لوحة تحكم المشرف >> المجموعات والصلاحيات >> مجموعات المستخدمين >> مجموعتك​

Username CSS​

color: #fff;
background: linear-gradient(135deg, #3b82f6, #00f0ff);
padding: 4px 12px;
font-weight: 600;
display: inline-block;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;

/* زوايا مسطحة */
clip-path: polygon(
8px 0%,
100% 0%,
100% calc(100% - 8px),
calc(100% - 8px) 100%,
0% 100%,
0% 8px
);

/* توهج نيون */
box-shadow:
0 0 6px #00f0ff,
0 0 12px rgba(0, 240, 255, 0.6),
0 0 18px rgba(59, 130, 246, 0.5);

/* حواف ناعمة */
transition: all 0.2s ease-in-out;

لوحة تحكم المشرف >> المظهر >> القوالب​

extra.less​

/* مشرف (مثال ID 3) */
.username--style3:before {
content: "👑 ";
}

/* مشرف أول (مثال ID 4) */
.username--style4:before {
content: "🛡 ";
}

/* خبير */
.username--style7:before {
content: "⚙ ";
}

/* مساهم */
.username--style8:before {
content: "🏆 ";
}

محتوى مخفي: أيقونات مستضافة ذاتياً (PNG / SVG)

قم برفع أيقوناتك هنا، على سبيل المثال:

/styles/icons/crown.svg
/styles/icons/shield.svg
/styles/icons/cog.svg
/styles/icons/trophy.svg

extra.less​

/* =========================================
إصدار الأيقونات المستضافة ذاتياً
هذا الإصدار يحمل أيقونات SVG/PNG مباشرة
من الخادم الخاص بك.
========================================= */

/* مدير (مجموعة المستخدمين ID 3) */
.memberListLegend .username--style3::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
background: url('/styles/icons/crown.svg') no-repeat center;
background-size: contain;
vertical-align: middle;
}

/* مشرف أول (مجموعة المستخدمين ID 4) */
.memberListLegend .username--style4::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
background: url('/styles/icons/shield.svg') no-repeat center;
background-size: contain;
vertical-align: middle;
}

/* خبير (مجموعة المستخدمين ID 7) */
.memberListLegend .username--style7::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
background: url('/styles/icons/cog.svg') no-repeat center;
background-size: contain;
vertical-align: middle;
}

/* مساهم (مجموعة المستخدمين ID 8) */
.memberListLegend .username--style8::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
background: url('/styles/icons/trophy.svg') no-repeat center;
background-size: contain;
vertical-align: middle;
}

المزايا​

• 
  []لا حاجة لـ CDN خارجي
  []تحكم كامل
  []مثالي لأيقونات SVG النيون المخصصة
  []أداء أفضل مع SVG

حقوق النشر - كود نت