تخصيص بطاقات المستخدمين

[Discourse]

يصف هذا الدليل كيفية تخصيص ما إذا كانت بطاقات المستخدمين تُعرض على Discourse وكيفية عرضها، بما في ذلك إضافة حقول مخصصة وإخفاء ملفات المستخدمين.

مستوى المستخدم المطلوب: مدير النظام

يتيح لك تخصيص بطاقات المستخدمين باستخدام CSS تخصيص المظهر والمعلومات المعروضة.

تخصيص بطاقات المستخدمين

يمكن تخصيص بطاقات المستخدمين باستخدام CSS. إليك بعض الأمثلة على التخصيصات التي يمكنك استخدامها:

تغيير لون الخلفية

لتغيير لون خلفية بطاقات المستخدمين:

.user-card {
    background-color: #f0f0f0;
}

إضافة حدود حول بطاقات المستخدمين

لإضافة حدود حول بطاقات المستخدمين:

.user-card {
    border: 2px solid #4CAF50;
    border-radius: 10px;
}

تغيير الخط ولون أسماء المستخدمين

لتغيير الخط ولون الاسم الرئيسي/اسم المستخدم المعروض على بطاقات المستخدمين:

.user-card .name-username-wrapper {
    font-family: 'Arial', sans-serif;
    color: #FF5733;
}

إخفاء عناصر محددة

لإخفاء عناصر معينة مثل موقع المستخدم أو تاريخ الانضمام:

.user-card .location,
.user-card .metadata__user-created {
    display: none;
}

تخصيص المظهر بناءً على مجموعة المستخدمين أو مستخدم محدد

لتخصيص مظهر بطاقة المستخدم لمجموعة مستخدمين محددة أو مستخدم معين:

/* تخصيص لمجموعة مستخدمين محددة */
.user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* تخصيص لاسم مستخدم محدد */
.user-card.user-card-Username {
    background-color: #FFD700;
}

يتم تعيين المجموعة الأساسية للمستخدم فقط كمحدد فئة. عندما لا يكون لدى المستخدم مجموعة أساسية، يكون محدد الفئة هو group-null.

حقول مستخدمين مخصصة

بالإضافة إلى ذلك، يمكنك إضافة حقول مستخدمين مخصصة إلى بطاقات المستخدمين باتباع الخطوات التالية:

1. انتقل إلى صفحة /admin/config/user-fields.
2. حدد مربع الاختيار إظهار على بطاقة المستخدم؟ للحقول التي تريد عرضها على بطاقة المستخدم.

إخفاء جميع ملفات المستخدمين

إذا كنت بحاجة إلى إخفاء ملفات المستخدمين عن الجمهور، فيمكنك استخدام إعداد الموقع التالي:

• إخفاء ملفات المستخدمين عن الجمهور: تعطيل بطاقات المستخدمين وملفات المستخدمين ودليل المستخدمين للمستخدمين المجهولين.

تخصيصات أخرى

يمكن إجراء تخصيصات أخرى من خلال مكونات السمات، مثل:

• روابط أيقونات التواصل الاجتماعي القابلة للنقر على الملف الشخصي
• دليل بطاقات المستخدمين
• بطاقة المستخدم “آخر ظهور”

[Mason_L]

@Discourse

.user-card[data-user-card="specific_username"] {
    background-color: #FFD700;
}

هذا الجزء لا يعمل.
لا يوجد ‘data-user-card’ ضمن فئة ‘user-card’.

[Turtle]

أحاول جعل أسماء المستخدمين للمسؤولين تظهر باللون الأزرق في كل مكان على الموقع - لست متأكدًا مما إذا كان هناك محدد لأسماء المستخدمين في كل مكان سيعمل - ولكن إليك ما لدي لـ CSS وهو لا يعمل.

.group-admins .user-card .username {
    color: #2596be;
}

هل لديك أي أفكار أو اقتراحات؟ هل المحدد مختلف الآن بما أنه مر أكثر من عامين منذ نشر هذا؟ @SaraDev تبدو الشخص الذي كتب هذا، هل تعرف ما المشكلة؟

[manuel (Manuel Kostka)]

نعم، لا يبدو هذا محدثًا. أعتقد أن التصريحات الحالية ستكون:

@Discourse

/* تخصيص لمجموعة مستخدمين معينة */
user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* تخصيص لاسم مستخدم معين */
.user-card.user-card-Username {
    background-color: #FFD700;
}

أيضًا، يتم تعيين المجموعة الأساسية للمستخدم فقط كمنتقي للفئة. عندما لا يكون للمستخدم مجموعة أساسية، يكون منتقي الفئة هو group-null.

هذا يعني أنه لا يمكنك استهداف بطاقات المستخدم للمسؤولين أو المشرفين، حيث لا يمكن تعيين هذه المجموعات كمجموعات أساسية. إذا قمت بفحص بطاقات المستخدم للمسؤولين هنا على meta، سترى أن منتقي الفئة هو group-team.

[SaraDev (Sara Devlaeminck)]

@Turtle

أحاول جعل أسماء المستخدمين للمشرفين باللون الأزرق في كل مكان على الموقع

@manuel

أعتقد أن الإعلانات الحالية ستكون:

@Discourse

/* تخصيص لمجموعة مستخدمين معينة */
user-card.group-Groupname{
    background-color: #FFF8DC;
}

/* تخصيص لاسم مستخدم معين */
.user-card.user-card-Username {
    background-color: #FFD700;
}

أيضًا، يتم تعيين المجموعة الأساسية للمستخدم فقط كمنتقي فئة. عندما لا يكون للمستخدم مجموعة أساسية، يكون منتقي الفئة group-null.

يمكنني تأكيد أن هذا صحيح، وهو حاليًا أفضل طريقة لاستخدامها لتخصيص مظهر بطاقة المستخدم بناءً على مجموعة المستخدم أو مستخدم معين.

شكرًا @manuel و @Turtle على الإشارة إلى ذلك.

لقد قمت بتحديث الدليل هنا بهذه المعلومات أيضًا.

[Turtle]

حسنًا، ولكن ماذا لو أردت تغيير لون اسم المستخدم في البطاقة؟ ماذا يجب أن أضيف؟ آسف، لا أعرف الكثير عن محددات CSS.

[SaraDev (Sara Devlaeminck)]

@Turtle

غيّر لون اسم المستخدم في البطاقة

لهذا النوع من التخصيص، ستحتاج إلى استخدام CSS التالي:

.name-username-wrapper {
   color: #f47dff;
}

سيؤدي هذا إلى تخصيص لون عنصر username في بطاقات المستخدم لجميع المستخدمين على الموقع.

مثال:

أيضًا، للمساعدة في العثور على محددات CSS المحددة لاستخدامها في تخصيصات مثل هذه على موقعك، يمكنك اتباع: العثور على محددات CSS الصحيحة

[jrgong]

اقتراح سريع وصغير: كلما كان لدى المستخدمين صورة رمزية بنفس لون خلفية بطاقة المستخدم، لم يكن هناك فصل مناسب.

لقد أضفنا ببساطة نفس ظل الصندوق إلى صورة الرمزية لبطاقة المستخدم، مما أدى إلى حل المشكلة.

.user-card .first-row .avatar {
    box-shadow: var(--shadow-dropdown);
}