¿Cómo lograría algo así?
Cuando añado imágenes a mi categoría, todas aparecen reducidas y feas.
¿Existe algún plugin personalizado o algo similar?
Echa un vistazo a Category Banners. Es un componente de tema que puedes instalar en tu sitio para añadir un banner a tus categorías. La sección “Estilos CSS adicionales” al final del tema proporciona detalles sobre cómo establecer una imagen de fondo para el banner.
Por lo que se ve, parece que eso es un banner para la categoría. Necesito uno que muestre la sección, para explicarme mejor…
eso es lo que quiero
Esto requerirá algo de trabajo personalizado. Echa un vistazo a la guía de temas si quieres hacerlo tú mismo o crea un tema en la categoría Marketplace si prefieres contratar a alguien para que lo haga por ti.
Esto es lo que usan, pero no logro que funcione
discourse-misc-html-css (2).zip (2.5 KB)
Hay muchos enlaces e elementos que editar tanto en la pestaña CSS como en la pestaña Head. ¿Lo hiciste?
Ese es el CSS personalizado que usa FiveM hoy en día, y eso es lo que me envió el equipo de administración, pero no tengo idea de cómo hacerlo funcionar.
discourse-misc-html-css (2).zip (2.5 KB)
Así que he estado trabajando en esto durante un tiempo y ya funciona, más o menos.
Pic
Y, la verdad, funciona genial.
Pero en la parte superior, por alguna razón, duplica algunas de las categorías.
¿Cómo puedo solucionarlo y evitar que se dupliquen las categorías?
Aquí está mi configuración:
discourse-misc-html-css.zip (2.5 KB)
Así que ahora al menos lo he solucionado para mí.
Lo primero es descargar este archivo:
discourse-misc-html-css (2).zip (2.5 KB)
Si no estás seguro de cómo añadir ese archivo a tu sitio, revisa primero esta guía:
Ve a la sección Misc/HTML+CSS y luego a CSS. Allí tendrás que ajustar algunos valores.
Primero, copia esta línea:
&.fivem > .category-list {
&:before {
content: 'FiveM';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Luego, cambia el nombre que quieras para tu banner. En mi ejemplo, usaré “test1”:
&.test1 > .category-list {
&:before {
content: 'test1';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Con eso terminas la sección CSS.
Ahora ve a la sección .
Baja hasta encontrar:
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>
Y busca la sección llamada:
<div class="category-thing fivem">
Copia esto:
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Y cámbialo según tus ajustes. En mi ejemplo, usé “test1”:
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Luego baja hasta:
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>
Y busca:
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Cámbialo según tus ajustes. En mi ejemplo, cambiaré “fivem” por “test1”:
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Después, baja un poco más y busca la sección con esto:
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Aquí debes añadir la bandera de categoría que creamos más arriba. La razón es evitar categorías duplicadas, como el problema que tuve yo:
En mi ejemplo, añadiré “test1”:
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Luego baja y busca la sección llamada:
registerUnbound('filter-fivem', (categories) => {
return categories.filter(a => a.name.match(/^fivem/i));
});
Aquí debes cambiar “fivem” por lo que quieras. En mi ejemplo, añadiré “test1”:
registerUnbound('filter-test1', (categories) => {
return categories.filter(a => a.name.match(/^test1/i));
});
Con eso terminas.
Ahora, lo que debes hacer es cambiar el slug de tu categoría. Aquí está mi ejemplo:
Esa categoría aparecerá bajo el banner de “test1”.
Todas las demás categorías quedarán bajo el banner principal de CFX.RE, en este ejemplo.
Por cierto, estos son mis ajustes actuales en mi sitio:
discourse-misc-html-css.zip (2.5 KB)
Si quieres verlo, aquí está:
https://forum.tgacommunity.com/
Además, ¿podrías marcar este tema como resuelto?
Espero que esto os haya ayudado. Si alguien tiene alguna pregunta, pregúntame aquí o por mensaje privado.
Hola a todos. @manuel ha creado un componente temático que amplía este código y facilita que las personas lo utilicen en su propio foro.
Pero ambos métodos funcionan y depende de ti cómo quieras hacerlo. Y ambos métodos dan el mismo resultado.