La única forma de hacerlo sería deshabilitar el componente que personalizó la página de la categoría. Deberá ir a https://discourse.jordanvidrine.com/admin/customize/themes, hacer clic en Components y buscar Modern Category + Group Boxes. Una vez en esa página, desplácese hasta el final y haga clic en Disable.
De acuerdo. Pero el tema no se puede personalizar ![]()
Una pregunta más, necesito mostrar el número de visualizaciones en la lista de temas, por favor, dime cómo hacerlo, muchas gracias.
Hola Jordan, ¡gracias por tu respuesta! ¡Realmente lo aprecio!
¡Hola @jordan.vidrine, gracias por el gran tema! Me pregunto si hay una forma de mostrar categorías y lo último en la página de inicio. Háznoslo saber.
Mi tema es discourse.fotografos.online - ¡por más que lo intento, ¿POR QUÉ ESTÁ LA PARTE SUPERIOR en blanco? ¿¡Dónde está mi encabezado!??
¡alguien que me ayude! ¡Es una instalación nueva! ¿Qué hago para añadir una imagen allí en lugar de un azul sólido?
¿Es posible añadir una columna de Vistas? Si es así, ¿dónde puedo acceder a esta opción? Gracias.
Gracias por la respuesta y por enviar esta información. ¡Ojalá supiera cómo aplicarlo al tema!
- Ve aquí
admin/customize/themes - Haz clic en componentes
- Haz clic en Instalar
- Haz clic en crear nuevo y dale un nombre
- Haz clic en el nuevo componente en la lista de componentes
- Haz clic en
Editar Html/css - Añade el código enlazado arriba al archivo CSS común.
- Añade este nuevo componente al tema que se esté utilizando actualmente
Gracias. Realmente aprecio tu ayuda.
No he conseguido que el HTML/CSS funcione con el tema actual. Sin embargo, puedo ver la sección “Vistas” al previsualizar el nuevo componente. El tema también muestra el nuevo componente como añadido.
Aquí tienes un vídeo corto: https://share.cleanshot.com/ekutkT
Por favor, házmelo saber si ves algo que estoy haciendo mal con la configuración cuando tengas tiempo.
Gracias por toda tu ayuda.
Podrías revisar lo siguiente y añadir el CSS allí:
Cómo agregar la columna “Vistas” a la lista de temas.
No soy desarrollador ni programador. Pasé unas horas jugando con el código CSS usando la función “Inspeccionar elemento” en Google Chrome. Pude hacer que la columna de vistas se mostrara correctamente y también redimensioné cada columna a mi gusto. Siéntete libre de ajustar el ancho en el código CSS a continuación. También he agregado comentarios en el código para que puedas distinguir fácilmente qué código corresponde a cada columna. Para cada columna, hay 2 áreas (Encabezado y fila). Estos anchos deben coincidir.
Espero que esto les ayude a todos: @daming @bksubhuti @eddy2
Instrucciones
1. Crear un nuevo componente.
2. Copia este CSS
Usa este CSS actualizado a continuación en lugar del código proporcionado por @jordan.vidrine arriba.
Opción A) Agrega la columna Vistas solo para Escritorio (Recomendado)
- Agrega el código CSS en la pestaña
Escritorio.
Opción B) Agrega la columna Vistas tanto para Escritorio como para Móvil.
- Agrega el código CSS en la pestaña
Común.
Opción C) Agrega la columna Vistas solo para Móvil.
- Agrega el código CSS en la pestaña
Móvil.
Nota: Si elegiste la Opción B o C…
En dispositivos móviles, las 3 columnas (Respuestas, Vistas, Actividad) ocupan demasiado espacio y quedan apretadas. Si necesitas esto para dispositivos móviles, te sugiero eliminar una de las 3 columnas. Puedes hacerlo agregando Display: none a ambas áreas (Encabezado, Filas) en el código CSS a continuación para la columna que deseas ocultar.
/* [Tema] */
/* Encabezado del tema */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.main-link {
width: 66%;
}
/* Fila del tema */
.full-width .contents .topic-list .topic-list-header .topic-list-data.default {
width: 66%;
}
/* [Respuestas] */
/* Encabezado de Respuestas */
.full-width .contents .topic-list .topic-list-header .topic-list-data.posts {
width: 7%;
order: 2;
}
/* Filas de Respuestas */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
width: 7%;
order: 2;
}
/* [Vistas] */
/* Encabezado de Vistas */
.full-width .contents .topic-list .topic-list-header .topic-list-data.views {
display: block;
width: 7%;
order: 3;
}
/* Filas de Vistas */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.views {
width: 7%;
order: 3;
display: flex;
justify-content: center;
align-items: center;
}
/* [Actividad] */
/* Encabezado de Actividad */
.full-width .contents .topic-list .topic-list-header .topic-list-data.activity {
display: block;
width: 7%;
order: 4;
}
/* Filas de Actividad */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age {
width: 7%;
order: 4;
}
@jordan.vidrine Si tienes alguna revisión del CSS que escribí, házmelo saber. No sé completamente lo que estoy haciendo… ¡pero funciona, lol.
Aquí están mis cambios de CSS para mejorar la vista móvil.
Me encanta este tema, pero noté algunas pequeñas imperfecciones, así que también agregué el siguiente CSS para que se vea un poco mejor desde mi perspectiva. Espero que esto ayude a alguien más con las mismas preferencias.
Aquí está el original (sin editar)
Nota lo siguiente en la imagen de arriba:
- El número 1 que representa las Respuestas está demasiado a la izquierda.
- La burbuja del tema se superpone ligeramente al fondo azul.
- No hay relleno entre todo el contenido y el fondo azul.
- El fondo azul no se ve bien en la página de la categoría. Me encanta en la página de inicio.
Aquí está el código CSS que agregué en la pestaña Móvil.
/* Añade algo de relleno al área de Categoría, Subcategoría, Etiquetas, búsqueda, último, nuevo tema y notificaciones */
.list-controls {
padding: 5px;
}
/* Añade algo de relleno al área de Temas */
div#list-area {
padding: 6px;
}
/* Alinea el número de Respuestas más a la derecha */
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts {
float: right;
}
Actualizado (Después de agregar el CSS)
Si tú también prefieres eliminar el fondo azul, aquí tienes el código para eliminarlo solo de las páginas de categoría.
/* Elimina el fondo azul solo para la categoría */
html .category .background-container {
background: #fff;
clip-path: none;
}
Aquí se ve con todos los cambios.
Marcar problema móvil
En el móvil, hay un menú desplegable de Categoría. Cuando se hace clic y se selecciona Últimas, No leídas o Principales, no se pueden volver a seleccionar Categorías del menú desplegable.
1. Antes
2. Cuando se hace clic en el menú desplegable
3. Después de hacer clic
4. Menú desplegable (Categorías faltantes)
En este punto, un usuario no puede seleccionar el menú desplegable y elegir Categorías nuevamente.
¿Algún consejo sobre cómo solucionar este problema?
Gracias
@UnitedFreedom
![]()
Muchas gracias por publicar estas útiles instrucciones para aquellos que desean que la columna de vista sea visible.
¿Tienes un enlace a tu sitio? Lo estoy probando en el mío localmente y no puedo reproducirlo.
Gracias por este tema completo y pulido.
Tengo un problema con el componente de temas destacados que no muestra las tarjetas. También me gustaría tener la opción de que solo muestre temas destacados dentro de categorías específicas. Lo que en teoría debería o incluso en las variantes basadas en la oficial.
Ver imagen abajo
Si es necesario, puedo enviarte un enlace para que lo revises. Ambos temas de prueba tienen imágenes destacadas; aunque usan la etiqueta personalizada pi-featured. Ejecutando test-passed.
Por favor, envía un enlace, lo revisaré ![]()








