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

[Discourse]

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

مستوى المستخدم المطلوب: مسؤول

يتيح لك تخصيص بطاقات المستخدم باستخدام CSS إضفاء طابع شخصي على المظهر والمعلومات المعروضة.

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

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

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

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

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

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

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

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

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

لتغيير خط ولون أسماء المستخدمين على بطاقات المستخدم:

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

إخفاء عناصر معينة

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

.user-card .map-location,
.user-card .user-info .join-date {
    display: none;
}

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

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

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

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

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

حقول المستخدم المخصصة

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

1. انتقل إلى صفحة /admin/customize/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);
}