Hola,
Solo quiero compartir con ustedes este pequeño ajuste de CSS para mostrar la visibilidad de las publicaciones a todos. En nuestro foro, a veces los usuarios no podían reconocer la visibilidad de la publicación que acababan de crear. ¿Es un mensaje privado o una conversación pública? Así que con frecuencia publicaban datos personales y demás en espacios públicos…
Ahora lo he hecho más obvio para todos con un pequeño código CSS que añade la visibilidad de las publicaciones a todas ellas. Hay tres tipos de visibilidad: Pública, Comunidad (que son las categorías restringidas) y Privada.
Añade esto en admin/
Escritorio/CSS ![]()
body.archetype-regular .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f57d \00a0 Pública";
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 Privada";
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 Comunidad";
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;
}
Móvil/CSS ![]()
body.archetype-regular .topic-body .contents::after {
font-family: 'Font Awesome\ 5 Free', var(--font-family);
content: "\f57d \00a0 Pública";
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 Privada";
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 Comunidad";
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;
}
Común/Sección <head> ![]()
La propiedad font-family: 'Font Awesome\ 5 Free', var(--font-family); incluye iconos de Font Awesome, por lo que debes añadirlos en la sección <head> para que se muestren.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css"/>
Si deseas desactivar los iconos, simplemente usa esta versión. ![]()
Sin iconos
Añade esto en admin/
Escritorio/CSS ![]()
body.archetype-regular .topic-body .contents::after {
font-family: var(--font-family);
content: "Pública";
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: "Privada";
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: "Comunidad";
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;
}
Móvil/CSS ![]()
body.archetype-regular .topic-body .contents::after {
font-family: var(--font-family);
content: "Pública";
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: "Privada";
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: "Comunidad";
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;
}
Y no necesitas añadir nada en la sección <head>. ![]()
Gracias
Esto ayuda a nuestra comunidad. Espero que si tienes el mismo problema, esto te sirva de ayuda. ![]()
Puedes ver cómo funciona en vivo en https://vaperina.cc y hacer clic en cualquier tema. Verás la insignia de visibilidad pública en las publicaciones, en idioma húngaro. ![]()


