Beitragssichtbarkeit anzeigen

[Don]

Hallo,

ich möchte euch hier nur eine kleine CSS-Anpassung zum Anzeigen der Sichtbarkeit von Beiträgen für alle teilen. Auf unserem Forum konnten Nutzer die Sichtbarkeit der erstellten Beiträge manchmal nicht erkennen. Handelt es sich um eine private Nachricht oder ein öffentliches Gespräch? Daher haben sie oft persönliche Daten und Ähnliches öffentlich veröffentlicht …

Jetzt habe ich es für alle mit einem kleinen CSS-Code offensichtlicher gemacht, der die Sichtbarkeit der Beiträge zu allen Beiträgen hinzufügt. Es gibt drei verschiedene Arten von Sichtbarkeit: Öffentlich, Community (was die eingeschränkten Kategorien sind) und Privat.

Füge dies unter Admin/ hinzu:
Desktop/CSS

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 Öffentlich";
    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 Privat";
    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 Community";
    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;
}

---

Mobile/CSS

body.archetype-regular .topic-body .contents::after {
    font-family: 'Font Awesome\ 5 Free', var(--font-family);
    content: "\f57d \00a0 Öffentlich";
    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 Privat";
    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 Community";
    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;
}

---

Allgemein/ </head>-Bereich
Die font-family: 'Font Awesome\ 5 Free', var(--font-family); enthält Font Awesome-Icons, daher solltest du sie im </head>-Bereich hinzufügen, um diese Icons anzuzeigen.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>

Wenn du die Icons deaktivieren möchtest, verwende einfach diese Version.

Ohne Icons

Füge dies unter Admin/ hinzu:
Desktop/CSS

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Öffentlich";
    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: "Privat";
    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: "Community";
    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;
}

---

Mobile/CSS

body.archetype-regular .topic-body .contents::after {
    font-family: var(--font-family);
    content: "Öffentlich";
    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: "Privat";
    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: "Community";
    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;
}

Und nichts zum </head>-Bereich hinzufügen.

Vielen Dank Es hilft unserer Community. Ich hoffe, falls du das gleiche Problem hast, wird dir das weiterhelfen.

Du kannst testen, wie es live funktioniert. https://vaperina.cc und klicke auf ein beliebiges Thema. Du wirst das öffentliche Sichtbarkeits-Abzeichen auf den Beiträgen sehen. Auf Ungarisch. :slight_smile