Un paquete de tema es la forma en que Zittme agrupa un layout y varias skins de módulo en un solo conjunto para distribuirlos y aplicarlos. Al instalar y aplicar un tema, el layout y los skins de cada módulo (tableros, miembros, etc.) cambian a un conjunto que combina entre sí.

Un tema no es un nuevo tipo de recurso. Es un empaque que agrupa layouts y skins que ya existen. Cada componente se crea como siempre.

1. Estructura de carpetas: todo dentro de su propia carpeta

Un tema guarda todos sus componentes dentro de themes/{theme-name}/. La estructura interna imita tal cual las rutas originales.

themes/heritage/
├── theme.xml                              ← 테마 정보와 구성 목록
├── assets/                                ← (선택) 구성요소가 공유하는 CSS 등
├── layouts/
│   └── heritage_default/                  ← 일반 레이아웃과 완전히 같은 구조
│       ├── layout.html
│       ├── conf/info.xml
│       ├── css/  js/
└── modules/
    ├── board/skins/heritage_default/      ← 일반 게시판 스킨과 같은 구조
    └── member/skins/heritage_default/

La razón es que así no hay conflictos. Aunque el skin de tablero del tema tenga el mismo nombre que el skin de tablero de otro recurso, están en carpetas distintas y no se sobrescriben. Si eliminas el tema, solo se borra una carpeta.

2. theme.xml

<?xml version="1.0" encoding="UTF-8"?>
<theme schema="1.0">
	<title xml:lang="ko">헤리티지</title>
	<description xml:lang="ko">레이아웃·게시판·회원 스킨이 한 벌로 맞춰진 테마입니다.</description>
	<version>1.0.0</version>
	<date>2026-08-04</date>
	<author email_address="you@example.com" link="https://example.com">제작자</author>
	<license>GPLv2</license>

	<components>
		<component type="layout" name="heritage_default" />
		<component type="module-skin" target="board" name="heritage_default" />
		<component type="module-skin" target="member" name="heritage_default" />
	</components>

	<apply>
		<layout name="heritage_default" />
		<skin module="board" name="heritage_default" />
		<skin module="member" name="heritage_default" />
	</apply>
</theme>

• components: declara qué contiene la carpeta del tema. type es layout o module-skin (en este caso indicas el módulo con target).
• apply: define qué se aplica y dónde al pulsar "Aplicar tema". Antes de aplicar, se muestra al usuario la lista de cambios y se pide confirmación.

Los módulos que no existen se omiten

Aunque el tema incluya un skin de comercio, en un sitio sin el módulo de comercio instalado solo se omite ese elemento en silencio. Puedes incluir sin riesgo skins para módulos adicionales en el conjunto.

Temas responsivos

Para declarar un tema como responsivo, todos los skins y layouts que lo componen deben tener la marca <responsive>true</responsive>. Si falta en uno solo, la validación lo rechaza. (Consulta Vistas responsivas y visualización responsiva)

3. Los componentes se crean como siempre

Los layouts y skins dentro de un tema usan exactamente la misma sintaxis y convenciones que los recursos normales. Lo único distinto es que están dentro de la carpeta del tema.

• Layout: layout.html + conf/info.xml (incluye extra_vars, declaración de menús y campos repetibles)
• Skin: los mismos archivos de plantilla que el skin predeterminado del módulo correspondiente

Recursos compartidos: para que todo el tema use el mismo sistema de colores y tipografías, coloca un CSS común en themes/{name}/assets/ y cárgalo desde cada componente con una ruta relativa. Si reúnes los colores en variables CSS, puedes cambiar los colores de todo el tema desde un solo lugar.

/* themes/heritage/assets/heritage.css */
:root {
	--hr-brand: #6c5ce0;
	--hr-ink: #10151f;
	...
}

/* 게시판 스킨 css 에서 */
@import url("../../../../../assets/heritage.css");

4. Comportamiento de instalación y aplicación

• La instalación valida todo antes de descomprimir todo. Si un solo componente tiene problemas, no se instala nada.
• El alcance de la aplicación se limita al sitio seleccionado.
• Antes de aplicar, se muestra la lista de lo que cambiará y se pide confirmación.

5. Lista de verificación de creación

• ¿Coinciden los components de theme.xml con el contenido real de las carpetas?
• ¿Cada componente funciona correctamente por sí solo? (el tema es solo un empaque)
• Si declaras el tema como responsivo, ¿todos los componentes tienen <responsive>true</responsive>?
• Si usas plantillas v2, ¿evitaste los comentarios {{-- --}} de varias líneas?: solo se eliminan los comentarios de una línea, así que los de varias líneas provocan un error del servidor. Para explicaciones de varias líneas, usa comentarios HTML.
• ¿Declaraste el fondo de html, body en el CSS del layout?: si solo pintas el fondo del div superior, en modo oscuro queda una franja blanca en los bordes de la pantalla.