Bonjour,
Je voulais simplement partager avec vous tous ce petit ajustement CSS pour afficher la visibilité des messages à tout le monde. Sur notre forum, les utilisateurs ne parvenaient parfois pas à identifier la visibilité du message qu’ils venaient de créer. S’agit-il d’un message privé ou d’une conversation publique ? Ils publiaient donc à maintes reprises des données personnelles et autres informations sensibles en public…
Maintenant, j’ai rendu cela plus évident pour tout le monde grâce à un petit code CSS qui ajoute l’indicateur de visibilité à tous les messages. Il existe trois types de visibilité : Public, Communauté (qui correspond aux catégories restreintes) et Privé.
Ajoutez ceci dans admin/ :
Bureau/CSS ![]()
body.archetype-regular .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f57d \00a0 Public";
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 Privé";
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 Communauté";
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 Public";
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 Privé";
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 Communauté";
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;
}
Commun / section <head> ![]()
La propriété font-family: 'Font Awesome\ 5 Free', var(--font-family); inclut des icônes Font Awesome, vous devez donc l’ajouter dans la section <head> pour afficher ces icônes.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
Si vous souhaitez désactiver les icônes, utilisez simplement cette version. ![]()
Sans icônes
Ajoutez ceci dans admin/ :
Bureau/CSS ![]()
body.archetype-regular .topic-body .contents::after {
font-family: var(--font-family);
content: "Public";
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: "Privé";
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: "Communauté";
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: "Public";
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: "Privé";
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: "Communauté";
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;
}
Et rien à ajouter dans la section <head>. ![]()
Merci
J’espère que cela aidera notre communauté. Si vous rencontrez le même problème, cela devrait vous être utile. ![]()
Vous pouvez vérifier comment cela fonctionne en direct sur https://vaperina.cc et cliquer sur n’importe quel sujet. Vous verrez le badge de visibilité publique sur les messages, en hongrois. ![]()


