Crear un tema para AliothPress

Un tema de AliothPress es una carpeta con un único archivo obligatorio, theme.css, además de una imagen de vista previa para la galería de temas. No hay proceso de compilación, ni lenguaje de plantillas que aprender, ni código que escribir: el CMS genera el marcado, y la hoja de estilos define colores, tipografía y atmósfera mediante variables CSS. La forma más rápida de crear un tema es copiar uno de los 15 temas integrados y personalizarlo.

Copiar un tema integrado

Cada instalación contiene sus temas en la carpeta static/css/themes/, un tema por subcarpeta. Se elige el tema integrado más cercano a la visión deseada, se copia su carpeta con un nombre nuevo, y ya se tiene un tema válido y activable. A partir de ahí, el rediseño es solo un ciclo de edición en un único archivo.

El nombre de la carpeta es la identidad del tema. Usar letras minúsculas, dígitos y guiones (midnight-garden, paper-and-ink), y elegir un nombre diferente al de los temas integrados para que las actualizaciones del CMS no afecten los archivos propios.

La estructura de theme.css

Al abrir cualquier tema integrado se encuentra el mismo patrón:

• Un encabezado de comentario al principio. La línea que comienza con Concept: se convierte en la descripción del tema en la galería de administración.
• Un bloque :root que define las variables de diseño: fondo, superficie, texto, colores de acento, fuentes, radios. Aquí es donde se realiza la mayor parte del trabajo.
• Un bloque .light-theme que sobrescribe esas variables para el modo claro. Los temas que lo definen obtienen automáticamente el conmutador de modo claro/oscuro visible para los visitantes; los temas que no lo tienen funcionan en un solo modo.

Debido a que todo el sitio público, incluidos los bloques del page builder, se basa en estas variables, cambiar unos pocos valores rediseña todo de manera coherente: publicaciones, páginas, formularios, menús y la lista del blog.

La imagen de vista previa

Se añade un archivo preview.svg (o PNG, JPG, WebP) a la carpeta, y la galería de temas lo muestra como miniatura. Una maqueta SVG de la paleta y la tipografía funciona bien y ocupa poco espacio. Los temas sin vista previa siguen funcionando; la galería muestra un marcador de posición.

Fuentes y recursos

Los archivos de fuentes y las imágenes decorativas pueden residir dentro de la carpeta del tema y referenciarse con rutas relativas desde theme.css. Las fuentes autohospedadas mantienen el sitio independiente de solicitudes a terceros, lo que beneficia tanto a la privacidad de los visitantes como a la velocidad de carga.

Pruebas y distribución

La carpeta se coloca en static/css/themes/ en una instalación de desarrollo, o se comprime en ZIP y se sube en la página Temas: el tema aparece instantáneamente en la galería, sin necesidad de reinicio. Se revisan ambos modos de color, se comprueba una página de publicaciones y una página con el builder, y se confirma en la tarjeta del tema en el administrador que la descripción y la vista previa sean correctas.

Para distribuir el tema, se comprime la carpeta en ZIP. Cualquier persona con un sitio AliothPress lo instala con tres clics en la página Temas, y las actualizaciones del CMS no lo sobrescribirán.

Para el uso de temas por parte del usuario, carga, activación y actualización, consultar la guía de temas personalizados. El resto de la documentación cubre plugins y páginas. ¿Listo para probar? Instalar AliothPress y abrir cualquier carpeta de tema como referencia.