¿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?
Have a look at Category Banners. It is a theme component that you can install on your site to add a banner to your categories. The “Additional CSS styling” section at the bottom of the topic gives details about how to set a background image for the banner.
From the looks of it it seems like thats a banner for the category, i need one that shows the section, to explain myself better…
https://forum.fivem.net/categories
thats what i want
This will require some custom work. Have a look at the theme guide if you want to do it yourself or create a topic in the marketplace category if you want to hire someone to do it for you.
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.