فرق بين أيقونات الدرع للمشرف والمراقب

[codinghorror (Jeff Atwood)]

Given the surprising level of difficulty, maybe we should just leave this be… not like it is broken the way it is.

[cosdesign (Cos)]

I know it’s late but I just want to share my solution to display that admin crown ( so far only on topic’s page ) by using CSS and JS. I could also use some help cause for some reason my js code is not working…I can see it in that inline theme js file but still not working ( works well on jsfiddle though )

CSS

.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;

}

JS ( to display the title on hover - but as I said is not working when I include it inside )
Working Jsfiddle demo

var cdcrowntitle = document.querySelector(".names .admin a");
cdcrowntitle.setAttribute("title", "Community Admin");

[dandv (Dan Dascalescu)]

هل هناك أي تقدم/أفكار حول التمييز بين أيقونات المشرف/المسؤول على مدار العامين الماضيين؟

[Lilly (Lillian Louis)]

لم أره في أي مكان في هذا الموضوع ولكني أستخدم CSS في منتداي لإنشاء دروع بألوان مختلفة للمشرفين والمديرين للمشاركات (إذا كان المديرون أعضاء في مجموعات المشرفين). في حالتي، يحصل المشرفون على دروع ذهبية والمديرون على دروع رمادية. ولكن يمكن استخدام أي لون في خصائص الألوان هذه بالطبع.

CSS شائع

// * تغيير لون الدرع في المشاركات لتمييز المستخدمين المديرين والمشرفين* //

span.username {
  &.moderator .d-icon.d-icon-shield-alt {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-alt {
    color: #969696;
  }
}

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

يمكنك أيضًا تغيير لون أسماء المستخدمين للمشرفين والمديرين في المشاركات لتمييزهم بشكل أكبر:

// * تغيير لون أسماء المستخدمين لتمييز المديرين والمشرفين* //

span.username {
  &.moderator a {
    color: #d5b907;
  }
  &.admin a {
    color: #969696;
  }
}

[Turtle]

لم ينجح تغيير لون الدرع - ظل بنفس اللون الرمادي لكليهما. هل تغير المحدد منذ نشر هذا؟

[NateDhaliwal]

ربما. يمكن أن يساعدك فحص سريع للصفحة في تحديد الفئة.

[Canapin (Coin-coin le Canapin)]

تمت تسمية الأيقونة الآن d-icon-shield-halved.

[Lilly (Lillian Louis)]

نعم، تم تغيير اسم الأيقونة لذا يجب أن يكون الأمر كذلك

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

النتيجة

[Turtle]

شكراً لكِ ليلي! و… كووكوارك، كيفما تُكتب.

[Heliosurge (Dan DeMontmorency)]

@Lilly

تم تغيير اسم الأيقونة لذا يجب أن تكون هكذا

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

أتساءل فقط عما إذا كنا نريد تبديل أيقونة المسؤول (admin) بقبعة الساحر (Wizard hat) لتبديل الألوان مع إخفاء العرض (display none) ثم إضافة سطر مع .d-icon.d-icon-wizard؟ (لست متأكدًا من أيقونة قبعة الساحر حاليًا)

[Turtle]

الـ fa هو:
fa-solid fa-hat-wizard
إذًا، ما هو الـ css، إذا أردت تغيير أيقونة المسؤول إلى hat-wizard؟

[Canapin (Coin-coin le Canapin)]

@Turtle

إذًا، ما هي تنسيقات CSS، إذن؟ إذا أردت تغيير أيقونة المسؤول إلى hat-wizard؟

نفس تنسيقات CSS.
ستظل الفئة d-icon-shield-halved بغض النظر عن الأيقونة التي استبدلتها بها، إذا استخدمت طريقة الاستبدال هذه:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Lilly (Lillian Louis)]

أسهل طريقة للقيام بذلك هي بنفس الكود أعلاه، ولكن أيضًا كود استبدال الأيقونة في علامة التبويب head-tag مثل هذا:

في

<script type="text/discourse-plugin" version="0.8"> 
  
  api.replaceIcon('shield-halved', 'hat-wizard')

</script>

النتيجة:

[Turtle]

هل سيعمل بحيث يمتلك المسؤولون القبعة والمشرفون الدرع؟ أم أنه سيستبدلهم جميعًا كما في الصورة، وإذا كان الأمر كذلك، فهل هناك طريقة لتجاوز ذلك؟

[Lilly (Lillian Louis)]

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

[Turtle]

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

[Canapin (Coin-coin le Canapin)]

هل أضفت أيقونة قبعة الساحر في إعداد الموقع SVG icon subset؟

[Jagster (Jakke Lehtonen)]

هذا سؤال خارج الموضوع، ولكني أود الاحتفاظ بنصف الدرع للمشرفين. ولكنني أود بشدة إظهار قبعة الساحر مع المسؤولين ^[1]

لكن لا يمكنني استبدال نصف الدرع بالقبعة، بسبب المشرفين.

يا إلهي…

@Turtle

هل سيعمل هذا بحيث يكون للمسؤولين القبعة وللمشرفين الدرع؟ أم أنه سيستبدلهم جميعًا كما في الصورة، وإذا كان الأمر كذلك، فهل هناك طريقة لتجاوز ذلك؟

يجب أن أبدأ في قراءة المواضيع حقًا آسف.

---

1. لدي عدد قليل من النساء في منتصف العمر في منتدانا، وهن من محبي بوتر؛ هذا سيزعجهن كثيرًا ↩︎

[Jagster (Jakke Lehtonen)]

[اقتباس=“ليلي, المشاركة:31, الموضوع:106114”]
لم أكلف نفسي عناء القيام بذلك لبطاقات المستخدمين أو الملفات الشخصية
[/اقتباس]

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

هل لديك أي فكرة عما فعلته مرة أخرى؟

[Heliosurge (Dan DeMontmorency)]

درع svg للكود المعدل.

@Lilly

تم تغيير اسم أيقونة yea لذلك يجب أن يكون هكذا

span.username {
  &.moderator .d-icon.d-icon-shield-halved {
    color: #d5b907;
  }
  &.admin .d-icon.d-icon-shield-halved {
    color: #969696;
  }
}

النتيجة