Nuevo CSS personalizado para la barra lateral

Continuando la discusión de ¡Prueba los nuevos menús de barra lateral y notificaciones!:

@Canapin Por favor, perdona la pregunta ignorante, ha pasado un tiempo desde que estuve aquí en meta y no he hecho muchos cambios en CSS en mi instancia en los últimos años.

¿Qué CSS usaste para personalizar los no leídos/nuevos/borradores en la barra lateral? He estado buscando y no estoy seguro de qué usar.

Muchas gracias de antemano.

1 me gusta

Eso es esperado ya que no hice ningún cambio en mi barra lateral. :smile:
Otros usuarios tuvieron pantallas similares con números no leídos, ver Try out the new sidebar and notification menus! - #240 by MarcP

Noto que ahora hay puntos en su lugar.

Así que supongo que el código de la barra lateral se cambió en algún momento durante el desarrollo.

2 Me gusta

Sí, cambió aquí :slightly_smiling_face:

3 Me gusta

Interesante. En uno de los temas separados, señalan que los puntos o el recuento no leído ahora pueden ser establecidos por los usuarios. Se puede encontrar en Preferencias > Barra lateral > Navegación. Desearía que el administrador pudiera establecerlo como predeterminado. Los usuarios de mi instancia no son expertos en tecnología y nunca encontrarían esa configuración ni sabrían que existe.

Tanto aquí en meta.discourse como en mi instancia, se ve así para mí, en texto gris.

Creo que son mucho más fáciles de ver con texto de otro color.

1 me gusta

Hola,

Creo que crear un tema donde presentes la nueva barra lateral podría ser una buena solución para esto. Puedes dirigir fácilmente a tus usuarios al lugar correcto con un enlace, usando el parámetro /my/. :slightly_smiling_face:

tudominio.com/my/preferences/sidebar

Como esto: \u003chttps://meta.discourse.org/my/preferences/sidebar\u003e


Sí, está atenuado para que parezca menos un enlace. Esto se puede cambiar añadiendo algo de CSS a un componente. :slightly_smiling_face:

Por ejemplo:

Común > CSS

// Color nuevo/no leído de la barra lateral

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    .sidebar-section-link-content-badge {
      color: var(--tertiary);
    }
  }
  // no cambiar el color del enlace de revisión
  .sidebar-section-link-review {
    .sidebar-section-link-content-badge {
      color: var(--danger);
    }
  }
}
2 Me gusta

Encantador, gracias. No estoy seguro de por qué no pensé en eso. :person_facepalming:t5:

¡Genial! ¡Exactamente lo que estaba buscando!

2 Me gusta

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.