\n\nEl Tema Moderno de Pyx es el sucesor de mi antiguo tema, Tema Moderno de darkpixlz, que era una bifurcación del tema Air. Tenía aproximadamente 2500 líneas y muchos problemas, ¡así que lo he reescrito!\n\n\n## Capturas de Pantalla\n\n[grid]\n
\n\n\n[/grid]\n\n## Características\n- Soporta la interfaz completa de administración y el panel de revisión\n- Soporta casi todas las características modernas del núcleo (nuevo mapa de temas, nueva página de actualización, chat, …) y algunos complementos\n- Imagen de fondo personalizable\n- Añade una propiedad --user-bg-url para que tus complementos lean la imagen de fondo de un usuario en los perfiles\n- En comparación con mi tema anterior, muchas menos líneas de código en general y más fácil de renderizar para los dispositivos \n\n### Problemas conocidos\n\n*¡Ninguno por el momento!*\n\nTodas las contribuciones al repositorio son más que bienvenidas y (probablemente) serán revisadas el mismo día. ¿Comentarios o ideas? Deja una respuesta aquí. ¿Problemas? Por favor, crea un problema en GitHub. \n\n\u003csmall\u003e\n\u003ci\u003eTenga en cuenta que pruebo todos mis estilos solo para Firefox; si Chromium está causando problemas, no dude en presentar un informe. No pruebo ni verifico la vista móvil por el momento, pero se planea el soporte.\u003c/i\u003e\n\u003c/small\u003e\n\nEso es todo por ahora: ¡disfruta del tema!"
¡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 | El Tema Moderno de Pyx es el sucesor del Tema Moderno de darkpixlz. \n| 
|Vista Previa| Theme Creator |\n| 
|Repositorio| GitHub - pyxfluff/moderntheme: Modern theme for Discourse. |\n| 
|Guía de Instalación|Cómo instalar un tema o componente de tema|\n| 
|¿Nuevo en los Temas de Discourse?| Guía para principiantes sobre el uso de temas de Discourse\n\n[wrap=theme-install-button repoUrl="https://github.com/pyxfluff/moderntheme\" repoName="Pyx’s Modern Theme"]\nInstalar este tema\n[/wrap]\n\n
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.
