Este es el manual detallado de heritage XEDITION, el tema predeterminado incluido en el núcleo desde Zittme 1.0.0. Hereda tal cual la estructura y el sistema de configuración del tema heritage, y es un tema ancho que redibuja con criterios actuales el diseño del layout XEDITION y del skin de tablero XEDITION de la época de XE (acento dorado · gris oscuro · bloques en ángulo recto · tablero en tabla clásica). Incluye de serie la vinculación con el color de acento, el modo oscuro y el diseño responsivo.

La diferencia con el tema heritage es el "diseño". Las opciones de configuración del layout, las reglas de clases de menú (m / sl / sf) y el modo de aplicar el tema son iguales a los de heritage, así que puedes gestionar tu sitio de la misma forma uses el que uses.

Componentes

Todos los componentes comparten los mismos tokens de diseño (color · tipografía · espaciado · esquinas en ángulo recto). La tipografía del cuerpo es Pretendard, y los títulos en inglés y el texto del logo usan Raleway (el coreano se muestra en Pretendard).

Diferencias con el tema heritage

Cómo aplicarlo

1. Ve a Administración > Configuración de diseño.
2. En la lista de temas, elige Heritage XEDITION y pulsa Aplicar.
3. El layout y los skins de cada módulo se aplican a la vez. Para excluir algún componente, desmarca su casilla en la pantalla de aplicación.

En los sitios con una instalación nueva de Zittme 1.0.0, este tema viene aplicado desde el principio (layout + skins de tablero · miembros · mensajes). En los sitios actualizados desde Rhymix o 0.0.x se conserva la configuración existente, así que debes aplicarlo tú mismo con el procedimiento anterior.

La aplicación del tema recuerda el estado anterior, por lo que puedes volver en cualquier momento al estado previo. En la lista de temas instalados, el botón Eliminar está desactivado para el tema en uso.

Todas las opciones de configuración del layout

Se cambian en Administración > Configuración del layout, o mientras ves el sitio, desde "Configuración del layout" en la barra de administración frontal de la esquina inferior izquierda. La configuración se divide en 4 grupos (pestañas).

Básico

Opción	Valor predeterminado	Descripción
Imagen del logo	Ninguna	Se muestra con una altura de referencia de 40px. Si la dejas vacía, se usa el texto del logo
Imagen del logo en modo oscuro	Ninguna	Logo que se muestra en su lugar en el modo oscuro. Si la dejas vacía, se usa el logo predeterminado tal cual
Texto del logo	Ninguno	Si lo dejas vacío, se muestra el título del sitio. Se muestra con la tipografía Raleway
Color de acento	#cda25a	Determina a la vez botones · enlaces · indicadores activos · caja de perfil · línea superior del desplegable y hasta el color de resalte de los skins de tablero · widget
Ancho máximo del contenido	1440px	Estrecho 1320 / Predeterminado 1440 / Ancho 1600. Al ser un tema ancho, el valor predeterminado es mayor que en heritage
Alineación del menú	Junto al logo	Junto al logo / Centrado. La cabecera siempre ocupa todo el ancho de la pantalla; esta opción solo cambia la posición del menú
Color de la barra de menú	Oscuro	Oscuro / Color de acento / Claro. El cajón móvil siempre tiene tono oscuro, sin importar este valor
Posición del botón de modo oscuro en móvil	Dentro del cajón de menú	Dentro del cajón de menú / Cabecera / Pie de página. En PC siempre se muestra en la cabecera
Posición del selector de idioma en móvil	Dentro del cajón de menú	Dentro del cajón de menú / Cabecera / Pie de página. En PC siempre se muestra en la cabecera. Solo aparece cuando el núcleo tiene dos o más idiomas activos
Modo de color	Según la configuración del dispositivo del visitante	Automático / Siempre claro / Siempre oscuro

Portada (slider visual)

Opción	Valor predeterminado	Descripción
Mostrar slider visual	Solo en formato principal	Solo en formato principal / Mostrar también en subpáginas / No usar. Si no registras ninguna diapositiva, no se muestra
Intervalo de avance automático (segundos)	6	Con 0 no avanza automáticamente
Diapositivas visuales	Ninguna	Campo repetible. Registra varias diapositivas con el botón Agregar y arrástralas para cambiar el orden

Campos de cada diapositiva: imagen de fondo, título, descripción, nombre del botón, enlace del botón, alineación del texto (izquierda/centro).

El slider siempre se muestra a todo el ancho de la pantalla, sin importar el ancho del contenido, y su altura se ajusta entre 320px y 600px según el ancho de la pantalla. Se recomiendan imágenes de fondo de 1920px de ancho o más. Las flechas izquierda y derecha son botones cuadrados semitransparentes, el indicador de página son puntos cuadrados y la diapositiva actual se marca con una barra vertical alargada en el color de acento.

Contenido·lateral

Opción	Valor predeterminado	Descripción
Usar búsqueda integrada	Activado	Si se muestran el icono de búsqueda de la cabecera y la superposición de búsqueda
Mostrar caja de inicio de sesión en el lateral	Desactivado	Muestra el widget de inicio de sesión en el lateral de las subpáginas (LNB)

Pie de página

Opción	Descripción
Texto de presentación del sitio	Texto de presentación a la izquierda del pie de página
Datos de la empresa·contacto	Cada línea separada por un salto de línea se muestra como un elemento (razón social · representante · número de registro · dirección, etc.)
Aviso de copyright	Se muestra en la barra oscura de copyright inferior

El menú del pie de página se muestra si vinculas elementos a "Menú del pie de página" (footer_menu) en la edición de menús del sitio (1 nivel). A la derecha de la barra de copyright hay un botón para volver arriba y, si has puesto las opciones de posición en móvil en "Pie de página", ahí se muestran el botón de modo oscuro y el selector de idioma.

Tipos de página (clases de menú m / sl / sf / slx / sfx)

Para cada página indicas una de estas cinco notaciones como clase de menú.

Tipo	Clase de menú	Aspecto
Principal	m	Para la página de inicio, donde se muestra el slider visual. Sin banda de subtítulo
Subpágina	sl	Banda de subtítulo + LNB a la izquierda (cuando el menú actual tiene submenús) + contenido
Subpágina a todo el ancho	sf	Banda de subtítulo + contenido a todo el ancho sin LNB
Subpágina (sin banda)	slx	Igual que sl, pero sin mostrar la banda de subtítulo
Subpágina a todo el ancho (sin banda)	sfx	Igual que sf, pero sin mostrar la banda de subtítulo

La banda de subtítulo es una franja gris situada sobre el contenido que muestra como título el nombre del menú actual. Si se solapa con la función de título del tablero del skin de tablero, apaga la banda con slx / sfx y usa solo el título del tablero o, al revés, deja la banda y deja vacío el título del tablero.

Cómo indicarlo

1. En Administración > Edición de menús del sitio, abre el elemento de menú.
2. En el campo Clase, escribe uno de m, sl, sf, slx, sfx.
3. Al guardar, las páginas a las que se entra por ese menú se muestran con ese tipo.

Reglas de funcionamiento:

• Los menús sin clase siguen el formato de layout de la configuración del layout (valor predeterminado: subpágina). La portada del sitio (primera página) se muestra como principal si no se indica nada.
• Si pones una clase en un submenú, en esa página el valor del submenú tiene prioridad sobre el del menú superior; si el submenú no tiene nada indicado, hereda la clase del menú superior (hasta 3 niveles).
• Puedes escribir en el campo de clase otras clases separadas por espacios. Ejemplo: sfx highlight
• Las pantallas de miembros · mensajes · zittme Pay · búsqueda integrada pasan automáticamente a todo el ancho si no tienen clase indicada.

Combinación con el visual principal

• Mostrar visual "Solo en formato principal" (predeterminado) + m en el menú de inicio: configuración habitual en la que el slider solo se ve en la página de inicio
• Mostrar visual "Mostrar también en subpáginas": slider en la parte superior de todas las páginas, sin importar el tipo
• Mostrar visual "No usar": no se muestra en ningún sitio

LNB (submenú izquierdo)

En las subpáginas (sl / slx), si el menú de primer nivel actual tiene submenús, aparece la lista de submenús en una zona de 260px a la izquierda. Es una lista sin caja, con una línea divisoria y una línea corta en el color de acento bajo el título, y el elemento actual se marca con una barra de 3px en el color de acento a la izquierda. Los elementos que tienen menú de tercer nivel llevan una flecha a la derecha, y los subelementos desplegados se sangran con un icono de flecha acodada. Los menús sin submenús muestran solo el contenido, sin LNB.

Cabecera y menú superior (GNB)

La cabecera siempre ocupa todo el ancho de la pantalla. De izquierda a derecha: logo, menú y utilidades a la derecha; al bajar por la página se queda fija arriba con menor altura y el fondo cambia a un desenfoque semitransparente.

• Se muestran los elementos vinculados a "Menú superior" (gnb) en la edición de menús del sitio, con hasta 3 niveles. Al pasar el cursor sobre un menú de primer nivel se abre un desplegable oscuro bajo ese elemento, con una línea de 3px en el color de acento arriba. Los menús de tercer nivel se muestran sangrados dentro del desplegable.
• El menú de primer nivel de la página actual muestra un subrayado inferior de 3px en el color de acento.
• Con la opción de alineación del menú puedes poner el menú junto al logo o en el centro de la cabecera.

Las utilidades de la derecha siguen este orden, de izquierda a derecha.

Elemento	Descripción
Botón de modo oscuro	El visitante cambia entre claro y oscuro (se guarda por dispositivo)
Icono de búsqueda	Al pulsarlo se abre un gran campo de búsqueda que cubre la cabecera. Se cierra con X, Esc o haciendo clic fuera. Se oculta si desactivas Usar búsqueda integrada
Botón de idioma	Se muestra con un código abreviado como KR / EN. Al pulsarlo se abre la lista de idiomas y solo cambia el idioma, manteniendo la página que estabas viendo. Solo aparece cuando el núcleo tiene dos o más idiomas activos
Zona de perfil	Sin sesión: botón de inicio de sesión en el color de acento. Con sesión: caja en el color de acento con foto de perfil + apodo + campana de notificaciones. Al pasar el cursor se abre el menú Mi información · Administración (si tienes permisos de administración) · Cerrar sesión

La campana de notificaciones se muestra en los sitios que tienen instalado el módulo de centro de notificaciones (ncenterlite) y muestra el número de notificaciones no leídas y la lista de notificaciones recientes. En ese caso, el widget flotante predeterminado del centro de notificaciones se desactiva automáticamente.

Móvil

A 1024px o menos, el menú se oculta y el cajón de menú se abre con el botón de hamburguesa del extremo derecho. El cajón tiene un tono oscuro basado en el color de acento e incluye todo el menú (3 niveles) y los enlaces de inicio de sesión · Mi información · Administración. El botón de modo oscuro y el selector de idioma se muestran, según las opciones "Posición de ... en móvil" de la configuración del layout, en la barra de herramientas inferior del cajón, en la cabecera o en el pie de página.

Skin de tablero

Elige heritage_xedition en Configuración del tablero > Configuración del skin. Como es responsivo, no necesitas un skin móvil aparte.

Sigue el formato de tabla clásica del skin de tablero XEDITION. La lista se sitúa entre gruesas líneas divisorias arriba y abajo, y la cabecera se remata con fondo claro y doble borde. Las filas de avisos se distinguen con un fondo gris claro.

Opción	Descripción
Título · descripción del tablero	Si los introduces en la configuración del skin, sobre la lista se muestra la cabecera del tablero (título + línea corta en el color de acento + descripción) y el botón Escribir sube a la derecha de la cabecera. Si los dejas vacíos, no hay cabecera y el botón Escribir queda en la fila de botones bajo la lista. En la pantalla de lectura no se muestra la cabecera
Formato de lista	Lista / Tarjetas (miniaturas) / Revista (miniatura + resumen) / FAQ (al hacer clic en la pregunta se despliega la respuesta)
Alineación del autor	Izquierda / Centro
Mostrar foto de perfil · firma · adjuntos	Si se muestran en la pantalla de lectura
Botones de voto a favor · en contra	Si se usan (predeterminado: solo a favor)

• El número de comentarios se muestra junto al título como +N.
• Las entradas nuevas se marcan con un punto cuadrado de 7px en el color de acento delante del título, según el "Tiempo para marcar entradas nuevas" de la configuración del tablero (predeterminado: 24 horas).
• La pantalla de lectura, en lugar de una barra de título oscura, consta de un título grande y una línea de metadatos subrayada (autor · fecha · vistas · votos).
• Los botones son cuadrados planos gris claro que se rellenan con el color de acento al pasar el cursor. Los botones de acción principal (Registrar · Escribir) tienen el color de acento desde el principio.
• La paginación es una sucesión de números sin borde; solo la página actual se marca con número y subrayado en el color de acento, y Primera/Última son iconos de doble flecha.
• Las miniaturas se recortan en ángulo recto.
• El color de resalte está vinculado al color de acento del layout.

Skins de miembros · mensajes

Elige heritage_xedition en la configuración del módulo de miembros y en la configuración de mensajes, respectivamente.

• En la parte superior de la pantalla va el título con una línea corta en el color de acento debajo, y se deja suficiente espacio entre el título y el contenido.
• La zona de perfil de Mi página · buzón de mensajes se muestra como una tarjeta con foto de perfil de 52px + apodo + nivel · fecha de registro, con una línea de 3px en el color de acento en la parte superior de la tarjeta.
• El menú de navegación izquierdo sigue la misma gramática que el LNB del layout (título con línea divisoria + barra activa de 3px a la izquierda).
• Los campos de entrada · cuadros de selección · botones tienen una altura unificada de 46px para que no se desalineen al estar en la misma línea. Los botones son los mismos cuadrados planos que en el tablero.
• En móvil, la tarjeta de perfil y el formulario de búsqueda se apilan en vertical.

Skins de widget

El widget de contenido unificado y el widget de comercio unificado incluyen el skin "Heritage XEDITION" (incluido en los widgets del núcleo, no requiere instalación aparte).

• Sin caja, divide las zonas con una línea divisoria bajo la línea del título y una línea corta en el color de acento (la misma gramática que la cabecera del tablero).
• El tipo pestañas traza una sola línea de pestañas hasta el final, y el enlace "Ver más" se sitúa a la derecha de esa línea.
• Las notaciones como el número de comentarios +N, el punto cuadrado de entrada nueva y las miniaturas en ángulo recto son iguales que en el skin de tablero.

Modo oscuro

• Con el modo de color en "Automático" se sigue la configuración clara/oscura del dispositivo del visitante, y el visitante también puede cambiarlo con el botón de la cabecera (se guarda por dispositivo).
• La paleta oscura es un carbón cálido (gris oscuro con un matiz marrón) a juego con el acento dorado. Cambian a la vez los skins de tablero · miembros · mensajes · comercio · widget.
• Si registras aparte una imagen del logo en modo oscuro, ese logo se muestra en su lugar en el modo oscuro. Si no la registras, se usa el logo predeterminado tal cual, así que se recomienda un logo con fondo transparente.

Cambiar el color de acento

Para usar otro color en lugar del dorado predeterminado (#cda25a), basta con cambiar el color de acento en la configuración del layout. Cambian de una vez los botones · enlaces · indicadores activos · caja de perfil · línea superior del desplegable · color de resalte del tablero y los widgets, e incluso el color de elementos de entrada como casillas de verificación · botones de opción. En el modo oscuro, el brillo se corrige automáticamente a partir del color indicado.

Si usas un azul marino oscuro o negro como acento, te acercas al ambiente monocromo del XEDITION original; si mantienes el dorado, se logra un aire clásico.

Personalización (variables CSS)

Los colores se gestionan con variables CSS. El color de acento resuelve la mayoría de los casos, pero para ajustes más finos redefine las variables en un CSS hijo. Si modificas directamente los archivos del layout, pueden sobrescribirse al actualizar el tema.

Variable	Significado
--hr-brand	Color de acento (se inyecta el valor de la configuración del layout)
--hr-brand-dark / --hr-brand-light	Variantes oscura · clara del color de acento (hover, enlaces en modo oscuro)
--hr-ink	Color del texto del cuerpo
--hr-muted	Color del texto secundario
--hr-bg	Fondo de la página
--hr-surface	Fondo de tarjetas · paneles
--hr-line	Líneas divisorias
--hr-nav-bg	Fondo de elementos oscuros como el desplegable · la barra del pie de página · el cajón móvil
--hr-w	Ancho máximo del contenido (valor de la configuración del layout)
--hr-font-display	Tipografía de títulos · logo (predeterminada: Raleway)
--hr-radius	Radio de las esquinas (0 en este tema)

Ejemplo de página principal

1. Indica la clase m en el menú de inicio y registra 2 o más diapositivas visuales.
2. Crea el contenido de inicio con el módulo de páginas y apila widgets de contenido unificado fila por fila. Como skin del widget, elige "Heritage XEDITION".
3. Si tienes varios tableros, agrúpalos con un widget de tipo pestañas para mostrarlos en una sola zona.
4. Si también gestionas una tienda, añade filas de productos con el widget de comercio unificado.

Preguntas frecuentes

• No aparece el slider visual: comprueba en este orden: ① que haya al menos 1 diapositiva registrada ② que Mostrar visual no esté en "No usar" ③ que la página actual sea de tipo principal (m) (si la opción de visualización es "Solo en formato principal").
• Quiero quitar la franja gris (título) de encima de las subpáginas: cambia la clase de menú a slx o sfx.
• No aparece el menú izquierdo (LNB): la página debe ser de tipo subpágina (sl / slx) y el menú de primer nivel actual debe tener submenús.
• Al centrar el menú aparece una fina línea vertical junto al menú activo: es un problema de la 1.0.0. Actualiza el tema a la 1.0.1 o superior.
• No se aplica el modo oscuro: comprueba que el modo de color no esté fijado en "Siempre claro".
• Algunas pantallas de módulos tienen el diseño predeterminado: comprueba que en la configuración de ese módulo esté seleccionado el skin heritage_xedition. La aplicación en bloque del tema solo afecta a los módulos vinculados al menú del sitio, así que los módulos no vinculados al menú, como el de contacto, se eligen uno por uno en su configuración.
• Cambié el color de acento, pero solo cambia una parte: puede deberse a la caché. Ve a Administración > Regenerar caché y recarga la página.
• La tipografía de los títulos en inglés se ve distinta: el texto en inglés de los títulos y del logo se muestra con Raleway (Google Fonts). En entornos donde está bloqueada la carga de fuentes externas, se sustituye por Pretendard.
• Actualicé desde Rhymix y no se aplicó el tema: la actualización conserva la configuración de diseño existente. Aplica Heritage XEDITION tú mismo en Administración > Configuración de diseño.