You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:
To add styles you can select the general class, as well as specific banners by category-id:
.category list .category-list-banner {
&.category-5 { [style a specific banner] }
&:after { [style the headings]}
}
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
That looks like expected behavior… The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.
If you actually don’t want a background color, you should state none or transparent.
If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in
Pero en cualquier caso: si sientes que usé parte de tu trabajo y me olvidé de dar crédito, por favor házmelo saber y actualizaré la primera publicación
Sí, por favor, me encantaría recibir al menos algún tipo de crédito. Pero depende de ti. Aparte de eso, se ve bien y recomendaré este componente temático en mi publicación, ya que esto facilita las cosas a los nuevos usuarios.
@ Nolo
¿Hay alguna forma en el TC, o con CSS en el tema, de alinear a la izquierda el texto del encabezado, al igual que tu segundo ejemplo).
¿También hay alguna forma (si no se usa una imagen de banner) de cambiar el tamaño del encabezado al grosor de una línea de texto?
Y si es así, ¿puedes cambiar el tamaño del texto para que no sea tan grande?
Claro, puedes estilizar los banners usando estas clases:
Si quieres sobrescribir declaraciones existentes en la clase general, necesitarás usar la propiedad !important. Por ejemplo, para los estilos que mencionaste:
Eso es porque los estilos se declaran realmente en los banners específicos. Supongo que podría mejorar eso en el componente, pero por ahora necesitarías sobrescribir con important.
¡Muchas gracias por este componente! Estoy desarrollando un foro político y poder aplicar este tipo de separación es fundamental.
Si bien ya es una gran mejora para mi foro, sería un mundo de diferencia si las cabeceras pudieran ser referenciadas por URL, ya que eso permitiría crear botones en la parte superior del foro desde los cuales el usuario podría navegar fácilmente en la misma página. Sería una funcionalidad extremadamente ágil si el foro (con suerte) se vuelve mucho más grande. ¿Es esto posible actualmente?
Gracias por la sugerencia @lisandro_iaffar. Aunque este componente realmente solo proporciona una solución ligera que no cambia las plantillas HTML. Si desea hacer referencia a las secciones, necesitaría usar un enfoque como el que ofrece GitHub - discourse/discourse-minimal-category-boxes.
Estoy emocionado de probar esto, ya que he creado demasiadas categorías y poder organizarlas en grupos será de gran ayuda.
Lo sabré cuando lo intente, ¿esto también podría ser una forma de dejar las categorías antiguas y menos usadas fuera de la página principal, verdad? Aún estarían disponibles a través de la nueva barra lateral.
Sí, claro De hecho, casi siempre hago selecciones de categorías en diferentes elementos de la página (barra lateral, encabezado, barra de navegación, página de categoría, ..) Es como la estructura del sitio de un sitio web. Es importante que esté bien organizado, pero no es necesario que determine tu presentación de interfaz de usuario.
Hola @manuel, me gustaría saber si este maravilloso componente sigue funcionando después de las actualizaciones del discurso, lo instalé y no me funciona, gracias de antemano.
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
Credits: The component was inspired by the look of the Cfx.re Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?
De hecho, casi siempre hago selecciones de categorías en diferentes elementos de la página (barra lateral, encabezado, barra de navegación, página de categoría, ..) Es como la estructura del sitio de un sitio web. Es importante que esté bien organizado, pero no es necesario que determine tu presentación de interfaz de usuario.
