Pyx’s Modern Theme es el sucesor de mi antiguo tema, darkpixlz’s Modern Theme, que era una bifurcación del tema Air. Tenía aproximadamente 2500 líneas y muchos problemas, ¡así que lo he reescrito!
Admite la interfaz de administración completa y el panel de revisión
Admite casi todas las características principales modernas (nuevo mapa de temas, nueva página de actualización, chat, …) y algunos complementos
Imagen de fondo personalizable
Agrega una propiedad --user-bg-url para que sus complementos lean la imagen de fondo de un usuario en los perfiles
En comparación con mi antiguo tema, muchas menos líneas de código en general y más fácil de renderizar para los dispositivos
Problemas conocidos
El mapa de temas se ve extraño y desalineado
Todas las contribuciones al repositorio son más que bienvenidas y (probablemente) se revisarán el mismo día. ¿Comentarios o ideas? Deja una respuesta aquí. ¿Problemas? Por favor, crea un problema en GitHub.
Por favor, ten en cuenta que pruebo todos mis estilos solo para Firefox; si Chromium presenta problemas, no dudes en informar.
¡VegaMonika! La imagen muestra una plataforma de redes sociales o mensajes que contiene una página de perfil para “VegaMonika,” con múltiples comentarios y mensajes en una interfaz de chat. (由 AI 生成标题)|690x346]
¡La imagen parece ser una captura de pantalla de una plataforma de transmisión japonesa que muestra un banner de un juego o Dream Tags con personajes animados al estilo anime y texto en japonés. (由 AI 生成标题)|690x420]
Bueno, parece que hay un problema con no tener componentes instalados, y luego parece cambiar el CSS de las imágenes, haciendo que muchas se conviertan en rectángulos.
Me pregunto si es posible agregar una escala adaptativa. Me gustaría tener un componente de barra lateral en el lado derecho.
CSS
/* Obtiene el ancho del avatar del usuario y establece el ancho máximo del contenedor del anuncio */
/* Estilos del contenedor del anuncio */
#list-area {
display: flex; /* Organiza los anuncios usando flexbox */
flex-direction: column; /* Muestra los anuncios verticalmente */
gap: 0; /* Elimina el espacio entre las imágenes de los anuncios */
padding: 0; /* Elimina el relleno del contenedor */
margin: 0; /* Asegura que no haya margen adicional alrededor del contenedor del anuncio */
max-width: 812px; /* Limita el ancho del contenedor del anuncio a un máximo de 812px (ancho del avatar: 48px) */
}
/* Estilos del enlace del anuncio */
.banner-ad {
display: block; /* Hace que el contenedor del anuncio sea un elemento de bloque */
width: 100%; /* Asegura que el contenedor del anuncio ocupe el 100% del ancho */
max-width: 100%; /* Evita que supere el ancho máximo */
margin: 0; /* Elimina el espacio entre los contenedores de anuncios */
}
/* Estilos de la imagen del anuncio adaptable */
.ad-image {
width: 100%; /* Asegura que la imagen ocupe el ancho completo de su contenedor */
height: auto; /* Mantiene la relación de aspecto original de la imagen */
max-width: 100%; /* Evita que la imagen supere el ancho máximo de su contenedor */
display: block; /* Corrige el problema del espacio vacío debajo de las imágenes */
margin: 0; /* Elimina cualquier espacio adicional alrededor de la imagen */
}
/* Diseño adaptable: ajusta la visualización del anuncio para pantallas grandes y pequeñas */
/* Ajusta la visualización del anuncio en dispositivos con un ancho inferior a 768px */
@media (max-width: 768px) {
#list-area {
padding: 0; /* Asegura que no haya relleno adicional en dispositivos móviles */
}
.banner-ad {
width: 100%; /* Asegura que el anuncio ocupe el ancho completo en pantallas pequeñas */
}
.ad-image {
width: 100%; /* Asegura que la imagen se adapte al ancho del contenedor */
height: auto; /* Mantiene la relación de aspecto de la imagen */
}
}
/* Ajusta aún más las imágenes de los anuncios en dispositivos muy pequeños (por ejemplo, teléfonos en modo vertical) */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* Asegura que las imágenes se adapten al ancho de la pantalla del teléfono */
max-width: 100%; /* Establece el ancho máximo al 100% para evitar un tamaño excesivo */
height: auto; /* Mantiene la relación de aspecto de la imagen */
}
}
Revisaré lo del componente lateral mañana. No prometo nada sobre la publicidad porque no puedo probarla, pero para el escalado general debería poder solucionarlo.
Lo siento, estuve enfermo gran parte de esta semana, también he tenido otras cosas que hacer. Acabo de pulir el flujo de publicaciones, corregir muchos errores y hacer que el compositor flote.
Además, noté que la página del tema se revirtió a la versión anterior, lo que ha generado muchos problemas. No haré ningún esfuerzo por arreglar nada allí porque siento que se volverá a agregar y se verá como se pretendía.
Lamentablemente, eso está un poco fuera del alcance de este tema porque está diseñado intencionalmente como una sola pieza, por lo que no adoptaría un diseño donde la barra lateral esté separada. Si buscas un diseño así, te recomiendo estos dos increíbles temas:
Sin embargo, si el banner de encabezado es algo que te gustaría ver soportado, no dudes en darme la URL de un sitio y veré la posibilidad de soportarlo.
Resumen: ¡El tema ya ha salido de la etapa de “vista previa”! Confío en que funcionará para la mayoría de los sitios y estará bien estilizado. Con esta nueva etapa, ya no busco informes de errores aquí, por favor presenta incidencias en GitHub en el futuro.
Seguid enviando vuestros comentarios, cualquier cosa es bienvenida. Gracias por vuestro continuo apoyo, incluso si soy lento :3
Lamento la advertencia de deprecación en la parte superior de sus sitios durante unos días , ya se ha solucionado. Todo debería volver a la normalidad.
¡Más buenas noticias! Acabo de reescribir el tema de nuevo para que ya no sea un único archivo common.scss masivo. No debería verse diferente, aparte de algunas correcciones menores que hice. Disfruta :3
Me gustó mucho el tema, pero hay algunos “artefactos” que desafortunadamente me impiden usarlo
La página “Perfil” tiene un pequeño botón detrás de la cabecera que dice “saltar al contenido”.
Cuando intento seleccionar una paleta de colores diferente (como usuario, en mi perfil) la selección desplegable aparece cerca del botón “saltar al contenido” que mencioné anteriormente (así me di cuenta de que estaba allí).
| Resumen | Pyx’s Modern Theme es el sucesor de Modern Theme de darkpixlz.
|Vista previa| Theme Creator |
|Repositorio| GitHub - pyxfluff/moderntheme: Modern theme for Discourse. |
|Guía de instalación|Cómo instalar un tema o componente de tema|
|¿Nuevo en los temas de Discourse?| Guía para principiantes sobre el uso de temas de Discourse|
Confío en que funcionará para la mayoría de los sitios y estará bien estilizado. Con esta nueva etapa, ya no busco informes de errores aquí, por favor 
, ya se ha solucionado. Todo debería volver a la normalidad.
