El personal informa que la posición es ambigua

UX
7

(Me encontré con esta publicación antigua mientras revisaba algunas otras confusiones de avisos del personal…)

Siempre he pensado que la ubicación de los Avisos del Personal era potencialmente ambigua. Dado que los temas pueden manejar cosas como colores, bordes y divisores de manera diferente, probablemente sea difícil de resolver de esa manera.

Una alternativa que se puede aplicar globalmente a todos los avisos de publicaciones hoy en día es un CSS personalizado para insertar una flecha Unicode, ya sea antes del avatar:

image

CSS: antes del avatar 
.post-notice::before {
  content: '🡇';
}

(O quizás más apropiadamente):

.post-notice::before {
  content: " \\1F847";
}

…o antes del contenido del texto:

image

CSS: antes del texto 
.post-notice p::before {
  content: " \\1F847";
  margin-right: .5rem;
}

Ooo — aquí tienes un truco para cambiar el color:

image

CSS: cambiar color 
.post-notice p::before {
  content: " \\1F847\\fe0e";
  color: yellow;
  margin-right: .5rem;
}

(Agregar \\fe0e a cualquier carácter Unicode renderiza una versión de texto que acepta color. Referencia.)

Y decidí que la flecha hacia abajo no se ve bien para un aviso en el tema principal, ya que obviamente está liderando el tema. Este CSS reemplaza la flecha con una viñeta solo para la primera publicación:

image

CSS: diferente para el tema principal 
#post_1 .post-notice p::before {
  content: " \\29BF\\fe0e";
  color: yellow;
  margin-right: .5rem;
}
1 me gusta