🎨 Temas en Newsday

¿Qué es un tema?

Un tema en Newsday es un archivo .php que devuelve un array con la paleta de colores, tipografía, ajustes de imagen y otros valores visuales que se aplican automáticamente a todas las páginas generadas del sitio. Los temas no modifican el contenido; solo cambian la apariencia.

Newsday incluye cuatro temas predefinidos (Newsday, Claro, Oscuro, Clásico) que no se pueden eliminar pero sí usar como base para crear otros nuevos. Puedes crear tantos temas propios como quieras.

Estructura de un archivo de tema

El archivo PHP debe devolver un array con los siguientes campos:

<?php
/**
 * Newsday — Tema: Ejemplo
 * Guarda este archivo como: temas/ejemplo.php
 */
return [
    'id'          => 'ejemplo',         // slug único, solo letras, números y guiones
    'name'        => 'Mi Tema Ejemplo',   // nombre visible en el panel
    'description' => 'Un tema de ejemplo minimalista.',

    // Colores para la miniatura del selector de temas
    'preview'     => [
        'header' => '#12122a',   // color fondo cabecera
        'accent' => '#5068e8',   // color acento
        'body'   => '#e8ebf0',   // color fondo página
    ],

    // String de variables CSS (separadas por punto y coma)
    'vars' => '--th-header-bg:#12122a;--th-header-fg:#ffffff;'
           . '--th-nav-bg:#1e293b;--th-nav-fg:#94a3b8;'
           . '--th-footer-bg:#1e293b;--th-footer-fg:#64748b;'
           . '--th-body-bg:#e8ebf0;--th-wrap-bg:#ffffff;'
           . '--th-wrap-shadow:0 4px 32px rgba(0,0,0,.12);'
           . '--th-text:#334155;--th-heading:#0f172a;'
           . '--th-accent:#5068e8;--th-accent-hover:#3d55d6;'
           . '--th-muted:#94a3b8;--th-border:#e2e8f0;'
           . '--th-sidebar-bg:#f8fafc;--th-sidebar-border:#e2e8f0;'
           . '--th-pullquote-bg:#eff6ff;--th-pullquote-fg:#1d4ed8;--th-pullquote-border:#3b82f6;'
           . '--th-card-bg:#ffffff;--th-card-border:#e2e8f0;'
           . '--th-tag-bg:#f1f5f9;--th-tag-fg:#64748b;'
           . '--th-body-font:Georgia,serif;--th-ui-font:system-ui,sans-serif;'
           . '--th-fallback-accent:#7c9ff5;'
           . '--th-img-radius:4px;--th-img-shadow:none;--th-img-max-width:100%;',
];

Referencia de variables CSS

Todas las variables deben incluirse en el campo 'vars' separadas por punto y coma (;). A continuación, la lista completa con descripción y valor típico:

Crear un tema desde el panel

La forma más cómoda. No requiere editar código.

Editar un tema existente

Haz clic en el botón ✏ Editar que aparece en la esquina inferior de cualquier tarjeta de tema (incluidos los predefinidos). El editor se abrirá con los valores actuales del tema.

Subir un tema desde archivo

Crear un tema manualmente (avanzado)

Si prefieres trabajar directamente en el servidor:

1. Crea un archivo PHP en la carpeta temas/ con el nombre mi-tema.php (donde mi-tema es el ID).
2. El archivo debe devolver un array con la estructura mostrada en la sección anterior.
3. El tema aparecerá automáticamente en el selector la próxima vez que abras Modelar → Temas.

Ejemplo mínimo válido

<?php
return [
    'id'    => 'minimalista',
    'name'  => 'Minimalista',
    'vars'  => '--th-header-bg:#ffffff;--th-header-fg:#0f172a;'
             . '--th-nav-bg:#f8fafc;--th-nav-fg:#334155;'
             . '--th-body-bg:#f8fafc;--th-wrap-bg:#ffffff;'
             . '--th-text:#334155;--th-heading:#0f172a;'
             . '--th-accent:#0f172a;--th-accent-hover:#334155;'
             . '--th-footer-bg:#0f172a;--th-footer-fg:#64748b;',
    'preview' => ['header'=>'#ffffff', 'accent'=>'#0f172a', 'body'=>'#f8fafc'],
];

Preguntas frecuentes

¿Puedo usar fuentes de Google Fonts?

Sí, pero debes cargarlas en la plantilla HTML del tema. En el campo --th-body-font especifica solo el nombre de la familia (ej: 'Merriweather',serif) y asegúrate de que la hoja de estilos de Google Fonts esté incluida en el layout del sitio generado. El panel no carga fuentes externas automáticamente.

¿Los temas se incluyen en las copias de seguridad?

Sí. Todos los temas personalizados en la carpeta temas/ se incluyen en los backups tanto al descargar como al guardar en servidor. Al restaurar un backup, los temas se restauran con el resto del contenido.

¿Qué pasa si dos temas tienen el mismo ID?

El segundo sobreescribe al primero. Si subes un tema con un ID ya existente (por ejemplo un predefinido como newsday), el predefinido quedará sobreescrito. Para evitarlo, usa siempre un ID único.

¿Puedo eliminar un tema que está activo?

Sí, pero el sitio seguirá mostrando el tema hasta la próxima publicación. Tras eliminar el tema, Newsday volverá automáticamente al tema predeterminado en la próxima generación del sitio.

¿Puedo compartir mis temas?

Sí. Usa el botón ⬇ Exportar .php en el editor de temas. El archivo descargado es portable y se puede instalar en cualquier Newsday con el botón ⬆ Subir tema.