عرض رؤية المشاركات

ساهم ميزة
1

مرحبًا،

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

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

أضف هذا إلى admin/
سطح المكتب/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 عام";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f023 \00a0 خاص";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f0c0 \00a0 مجتمع";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

الجوال/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 عام";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f023 \00a0 خاص";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f0c0 \00a0 مجتمع";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

عام/قسم <head> :arrow_down:
يحتوي font-family: 'Font Awesome\ 5 Free', var(--font-family); على أيقونات Font Awesome، لذا يجب عليك إضافتها في قسم <head> لعرض هذه الأيقونات.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>

Screenshot 2021-03-03 at 19.23.09
Screenshot 2021-03-03 at 19.23.09248×119 2.02 KB
Screenshot 2021-03-03 at 19.24.01
Screenshot 2021-03-03 at 19.24.01323×134 2.74 KB
Screenshot 2021-03-03 at 19.24.36
Screenshot 2021-03-03 at 19.24.36235×100 1.98 KB

إذا كنت تريد تعطيل الأيقونات، فاستخدم هذا الإصدار فقط. :arrow_down:

بدون أيقونات

أضف هذا إلى admin/
سطح المكتب/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "عام";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: var(--font-family);
    content: "خاص";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: var(--font-family);
    content: "مجتمع";
    font-size: $font-down-2;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    margin-left: 11px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

الجوال/CSS :arrow_down:

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "عام";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

body.archetype-private_message .topic-body .contents::after {
    font-family: var(--font-family);
    content: "خاص";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

#main-outlet .read_restricted .topic-body .contents::after {
    font-family: var(--font-family);
    content: "مجتمع";
    font-size: $font-down-3;
    color: var(--primary-very-high);
    background: var(--primary-low);
    padding: 3px 8px;
    border-radius: 8px;
    font-weight: 900;
    line-height: normal;
}

ولا حاجة لإضافة أي شيء في قسم <head>. :slight_smile:

شكرًا لك :slight_smile! أعتقد أن هذا سيساعد مجتمعنا، وآمل أن يساعدك أيضًا إذا واجهت نفس المشكلة. :slight_smile

يمكنك التحقق من كيفية عمله مباشرةً على https://vaperina.cc والضغط على أي موضوع. ستشاهد شارة الوضوح العام على المنشورات. باللغة الهنغارية. :slight_smile

7 إعجابات
CSS classes for current groups who can view topic?