اجعل مستخدمي الموظفين أكثر وضوحًا باستخدام صور رمزية ومنشورات وإشارات مخصصة

[Discourse]

هناك طرق مختلفة يمكن استخدامها لجعل مستخدم الطاقم قابلاً للتعرف عليه فورًا من قبل المستخدمين الآخرين.

إظهار درع المراقب

سيحصل أي مستخدم من الطاقم يكون مراقبًا، أو مديرًا و مراقبًا، على درع المراقب بجانب اسم المستخدم.

نصائح: لن يظهر الدرع إذا كان مستخدم الطاقم يحمل دور المدير فقط وليس مراقبًا.

CSS لتغيير لون الدرع

تغيير لون جميع مستخدمِي الطاقم

/*تغيير لون جميع مستخدمِي الطاقم*/
span.username.staff .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

لتغيير لون الدرع في كل مكان يظهر فيه، وليس فقط داخل الموضوع:

span.username.staff .d-icon.d-icon-shield-halved,
.user-card .first-row .names .d-icon.d-icon-shield-halved,
.user-profile-names .d-icon.d-icon-shield-halved {
    color: #00A9DB;
}

تغيير اللون لتمييز مستخدمِي ADMIN عن مستخدمِي MOD

/*تغيير اللون لتمييز مستخدمِي ADMIN عن مستخدمِي MOD*/
span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: green;
  }

  &.admin .d-icon.d-icon-shield-halved {
    color: red;
  }
} 

CSS لإخفاء الدرع

إخفاء الدرع فقط في المنشورات

.names .svg-icon-title {
    display: none;
}

إخفاء الدرع في المنشورات وبطاقة المستخدم

.names .svg-icon-title, 
.user-card .names .d-icon.d-icon-shield-halved {
  display: none;
}

إضافة ألقاب

يمكن لأي مستخدم من الطاقم الوصول إلى /admin/users/list/staff وإنشاء لقب لحسابه الخاص. سيظهر اللقب بجانب اسم مستخدمِي الطاقم:

انظر كمثال:

CSS لتخصيص لقب موجود

تخصيص اللقب لأعضاء الطاقم

.names .staff ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
}

تخصيص اللقب لتمييز المدراء عن المراقبين

.names {
  .moderator ~ .user-title {
    background: green;
    color: white;
    padding: 3px 5px;
  }

  .admin ~ .user-title {
    background: red;
    color: white;
    padding: 3px 5px;
  }
}

نصائح: لا يشترط أن يكون مستخدمِي الطاقم في مؤسستك مدراء أو مراقبين فعليين للموقع، بل يمكن أن يكونوا مجرد أعضاء بدون صلاحيات خاصة. لتخصيص لقبهم، ما عليك سوى إنشاء مجموعة مخصصة جديدة، تعيينها كمجموعة أساسية وإضافة المستخدمين المطلوبين. من الممكن تعيين لقب تلقائي سيتم تعيينه افتراضيًا لجميع الأعضاء.

تخصيص لقب المستخدمين غير المدراء وغير المراقبين المنتمين لمجموعة مخصصة أساسية

استبدل YOUR-CUSTOM-GROUP باسم المجموعة، وفي المثال أدناه هي .group--community ~ .user-title وهكذا.

.group--YOUR-CUSTOM-GROUP ~ .user-title {
    background: #00A9DB;
    color: white;
    padding: 3px 5px;
  }

تذكر أن المستخدم يمكنه اختيار لقب آخر غير المخصص له من خلال ملفه الشخصي - وفي هذه الحالة سيصبح اللقب الظاهر في المنشورات هو اللقب الذي اختاره المستخدم - ويمكنه أيضًا تعيينه إلى “لا شيء” - وفي هذه الحالة لن يظهر أي لقب.

لتجنب ذلك، يمكن إنشاء لقب مخصص من الصفر بحيث لا يكون قابلاً للتعديل من قبل المستخدم.

CSS لإنشاء لقب مخصص من الصفر

نموذج:

نصائح لإنشاء لقب بعد اسم المستخدم

/*عرض لقب مخصص بعد اسم المستخدم لجميع مستخدمِي الطاقم
لن يتم عرضه إذا كانت إعدادات الموقع "أولوية اسم المستخدم في واجهة المستخدم" معطلة */
.username.staff::after {
    content: 'مستخدم طاقم';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*اختياري - تقليل الحجم في بطاقة المستخدم*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*اختياري - إخفاء درع المراقب فقط في المنشورات*/
.names .svg-icon-title {
    display:none;
}

/*عرض لقب مخصص بعد اسم المستخدم لتمييز مستخدمِي ADMIN عن مستخدمِي MOD
لن يتم عرضه إذا كانت إعدادات الموقع "أولوية اسم المستخدم في واجهة المستخدم" معطلة */
.username {
  &.admin:after {
    content: 'مستخدم مدير' !important;
    color: red !important;
    border: 1px solid red !important;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }

  &.moderator:after {
    content: 'مستخدم مراقب';
    color: green;
    border: 1px solid green;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
  }
}

/*اختياري - إخفاء أيقونة الدرع فقط في المنشورات*/
.names .svg-icon-title {
  display: none;
}

نصائح لإنشاء لقب بعد الاسم الكامل

/*عرض لقب مخصص بعد الاسم الكامل لجميع أعضاء الطاقم*/
span.staff :after {
  content: "طاقم";
    color: white;
    background-color: #00A9DB;
    border-radius: 8px;
    margin-left:5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
}

/*عرض لقب مخصص بعد الاسم الكامل لتمييز مستخدمِي ADMIN عن مستخدمِي MOD */
span {
  &.admin :after {
    content: "مدير" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "مراقب";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

سؤال: هل يمكنني إضافة كلا اللقبين المخصصين؟

نعم، هذا ممكن، رغم أنه قد يكون زائدًا عن الحاجة. انظر المثال أدناه:

.username.staff::after {
    content: 'مستخدم طاقم';
    color: #00A9DB;
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
    display: inline-block;
}

/*اختياري - تقليل الحجم في بطاقة المستخدم*/
.user-card .username.staff::after {
    font-size:.7em;
    margin-left:0px;
}

/*اختياري - إخفاء درع المراقب*/
.names .svg-icon-title {
    display:none;
}


span {
  &.admin :after {
    content: "مدير" !important; 
    color: white;
    background-color: red !important;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }

  &.moderator :after {
    content: "مراقب";
    color: white;
    background-color: green;
    border-radius: 8px;
    margin-left: 5px;
    padding-left: 4px;
    padding-right: 4px;
    display: inline-block;
  }
}

إضافة زينة للصورة الرمزية

يمكنك إضافة زينة في الزاوية اليمنى السفلى من الصورة الرمزية لمستخدم الطاقم:

يجب عليك إنشاء مجموعة مخصصة، وإضافة مستخدمِي الطاقم كأعضاء، وجعل المجموعة أساسية. راجع Add group flair on member avatars للحصول على التفاصيل.

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

تخصيص أسماء المستخدمين وأسماء الطاقم

باستخدام قليل من CSS، يمكنك تخصيص أسماء مستخدمِي الطاقم في المنشورات.

لاحظ أن ما يلي هو مجرد أمثلة، ويمكن للجميع تعديل النمط كما يفضلون!

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

بشكل افتراضي، يظهر اسم المستخدم قبل الاسم الكامل

تغيير لون اسم المستخدم لجميع مستخدمِي الطاقم

span.username.staff a {
      color: #00A9DB;
}

تغيير لون اسم المستخدم لتمييز المدراء عن المراقبين

span.username {
  &.moderator {
    a {
      color: green;
    }
  }

  &.admin {
    a {
      color: red;
    }
  }
}

هذا المتغير يستخدم (تقريبًا) نفس CSS المستخدم للقب المخصص.

span.username {
  &.moderator {
    a {
        color: white;
        background-color: green;
        border-radius: 8px;
        margin-left: 5px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }

  &.admin {
    a {
        color: white;
        background-color: red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
    }
  }
}

تغيير لون الاسم

إذا كنت ترغب في ظهور الاسم الكامل قبل اسم المستخدم، فعليك تفعيل إعداد الموقع عرض الاسم في المنشورات وتعطيل أولوية اسم المستخدم في واجهة المستخدم.

تغيير لون الاسم لجميع مستخدمِي الطاقم

.names span.staff a {
   color: #00A9DB;
} 

هذا المتغير يستخدم (تقريبًا) نفس CSS المستخدم للقب المخصص.

.names span.staff a {
    color: #00A9DB;
    background-color: #D3F5FF; /*استخدم لونًا فاتحًا*/
    border: 1px solid #00A9DB;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: 5px;
}

تغيير لون الاسم لتمييز المدراء عن المراقبين

.names span {
  &.moderator {
    a, i {
      color: green;
    }
  }

  &.admin {
    a, i {
      color: red;
    }
  }
}

هذا المتغير يستخدم (تقريبًا) نفس CSS المستخدم للقب المخصص.

.names span {
  &.moderator {
    a {
        color: green;
        border: 1px solid green;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }

  &.admin {
    a {
        color: red;
        border: 1px solid red;
        border-radius: 8px;
        padding-left: 4px;
        padding-right: 4px;
        margin-left: 5px;
    }
  }
}

نصائح: لأسباب معينة، قد ترغب في تخصيص عضو طاقم واحد فقط - ربما مؤسس الموقع أو عضو ذو قيمة خاصة. إليك مثالًا على كيفية استهداف مستخدم واحد - ونعم، يمكن استخدام نفس الطريقة لأي مستخدم، حتى غير الطاقم-

اسم المستخدم

/*استبدل USERNAME باسم المستخدم المطلوب*/
.topic-meta-data .names span.username a[data-user-card=USERNAME] {
  color: blue;
}

الاسم

/*استبدل USERNAME باسم المستخدم المطلوب*/
.topic-meta-data .full-name a[data-user-card=USERNAME] {
  color: blue;
}

الاسم واسم المستخدم معًا

.topic-meta-data .names span a[data-user-card=USERNAME] {
    color: blue;
}

تخصيص خلفية منشورات الطاقم

يمكن لمستخدمِي الطاقم إضافة لون طاقم يدويًا باستخدام زر إضافة لون الطاقم في المنشورات.

والنتيجة ستكون:

إضافة لون خلفية للمنشور بالكامل

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

.moderator {
  .topic-body, .clearfix > .topic-meta-data > .names span.user-title, .topic-body .cooked {
    background: #ffffd0; /*غير اللون هنا*/
  }
}

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

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

تغيير خلفية المنشورات تلقائيًا لجميع مستخدمِي الطاقم

/*استبدل GROUP-NAME باسم مجموعتك*/
.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*غير اللون هنا*/
}

أو

.topic-post.group-GROUP-NAME .topic-body { 
    background-color: #ffffd0; /*غير اللون هنا*/
}

أو حتى

/*استبدل GROUP-NAME باسم مجموعتك*/

.topic-post.group-GROUP-NAME .topic-body .cooked { 
    background-color: #ffffd0; /*غير اللون هنا*/
}

.topic-post.group-GROUP-NAME .names span { 
    background-color: #ffffd0; /*غير اللون هنا*/
}

تغيير تلقائي للون الخط وعائلة الخط لجميع منشورات الطاقم

/*استبدل GROUPNAME باسم مجموعتك*/
.topic-post.group-GROUPNAME .topic-body .cooked { 
    color: #fec601; /*غير لون الخط هنا*/
    font-family: ......; /* غير عائلة الخط هنا */
}

تغيير تلقائي لخلفية ردود الطاقم فقط وليس منشورها الأول

كل منشور في موضوع له معرف بهذا التنسيق: post_number. بالنسبة للمنشور الأول في موضوع، يكون المعرف هو post_1، بينما يكون لردود المنشورات معرفات مثل post_2، post_3 وهكذا.

إذا كنت ترغب في إضافة خلفية لجميع منشورات الطاقم باستثناء المنشور الأول:

/*استبدل GROUP-NAME باسم مجموعتك*/
.topic-post.group-GROUPNAME .onscreen-post:not(#post_1) .topic-body .cooked { 
    background-color: #ffffd0; /*غير اللون هنا*/
}

إضافة محتوى إضافي في منشورات الطاقم

توقيع بسيط

.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    content: "من طاقمك الودود";
    font-size: small;
    color: #d29400;
    float:right;
    font-style: italic;
}

شعار بسيط

.topic-post.group-GROUP-NAME .topic-body .cooked::after {
    background-image: url("IMAGE-URL");
    background-repeat: no-repeat;
    background-size: 138px 36px; /*غير هذه القيم وفقًا لحجم الصورة*/
    width: 138px; /*غير هذه القيمة وفقًا لحجم الصورة*/
    height: 36px; /*غير هذه القيمة وفقًا لحجم الصورة*/
    display: block;
    float: right;
    content: "";
}

تخصيص ألوان الإشارات

انظر: Customize mention colors