This is the detailed manual for heritage XEDITION, the default theme bundled with the core since Zittme 1.0.0. It inherits the structure and settings system of the heritage theme as is, and redraws the design of the XE-era XEDITION layout and XEDITION board skin (gold accents, dark gray, square-cornered sections, classic table board) to today's standards as a wide theme. Accent color linking, dark mode, and responsive design are supported out of the box.

The difference from the heritage theme is the "design." Layout settings, the menu class (m / sl / sf) rules, and how to apply the theme are the same as heritage, so you can run your site the same way whichever of the two you use.

Components

All components share the same design tokens (colors · fonts · spacing · square corners). The body font is Pretendard, and Raleway is used for English headings and the logo text (Korean text is displayed in Pretendard).

Differences from the heritage theme

Applying the theme

1. Go to Admin > Design settings.
2. Select Heritage XEDITION in the theme list and click Apply.
3. The layout and each module skin are applied at once. To leave out specific components, uncheck them on the apply screen.

Sites newly installed with Zittme 1.0.0 have this theme applied from the start (layout + board · member · message skins). Sites updated from Rhymix or 0.0.x keep their existing settings, so you need to apply it yourself using the steps above.

Applying a theme remembers the previous state, so you can always revert to how things were before applying. The Delete button is disabled for the theme in use in the installed themes list.

All layout settings

Change these in Admin > Layout settings, or under "Layout settings" in the front admin bar at the bottom left while viewing the site. The settings are divided into 4 groups (tabs).

Basic

Item	Default	Description
Logo image	None	Displayed at a height of 40px. If empty, the logo text is used
Dark mode logo image	None	Logo shown instead in dark mode. If empty, the default logo is used as is
Logo text	None	If empty, the site title is shown. Displayed in the Raleway font
Accent color	#cda25a	Also determines buttons · links · active indicators · the profile box · the dropdown top line, and the highlight color of board and widget skins
Max content width	1440px	Narrow 1320 / Default 1440 / Wide 1600. As a wide theme, the default is wider than heritage
Menu alignment	Next to the logo	Next to the logo / Center. The header always uses the full screen width; this option only changes the menu position
Menu bar color	Dark	Dark / Accent color / Light. The mobile drawer is always dark regardless of this value
Mobile dark mode button position	Inside the menu drawer	Inside the menu drawer / Header / Footer. Always shown in the header on PC
Mobile language selector position	Inside the menu drawer	Inside the menu drawer / Header / Footer. Always shown in the header on PC. Only appears when two or more languages are enabled in the core
Color mode	Match the visitor's device setting	Auto / Always light / Always dark

Home screen (visual slider)

Item	Default	Description
Show visual slider	Main type only	Main type only / Also show on subpages / Off. Not shown if no slides are registered
Auto-advance interval (seconds)	6	0 disables auto-advance
Visual slides	None	Repeating field. Register multiple slides with the Add button and drag to reorder

Fields for each slide: background image, title, description, button label, button link, text alignment (left/center).

The slider is always displayed at full screen width regardless of the content width, and its height adjusts between 320px and 600px depending on the screen width. Background images 1920px wide or larger are recommended. The left and right arrows are translucent square buttons, the pagination uses square dots, and the current slide is shown as a tall accent-color bar.

Content · sidebar

Item	Default	Description
Use integrated search	On	Whether to show the search icon in the header and the search overlay
Show login box in sidebar	Off	Shows the login widget in the sidebar of sub (LNB) pages

Footer

Item	Description
Site introduction	Introduction text on the left of the footer
Business · contact info	Each line becomes one item (company name · representative · business registration number · address, etc.)
Copyright notice	Shown in the dark copyright bar at the bottom

The footer menu appears when you link items to the "Footer menu" (footer_menu) in site menu editing (1 level). There is a back-to-top button on the right of the copyright bar, and if a mobile position option is set to "Footer," the dark mode button and language selector are shown here.

Page types (menu classes m / sl / sf / slx / sfx)

Assign one of five notations to each page as its menu class.

Type	Menu class	Appearance
Main	m	For the home screen where the visual slider appears. No subtitle band
Sub	sl	Subtitle band + left LNB (when the current menu has submenus) + content
Full-width sub	sf	Subtitle band + full-width content without the LNB
Sub (no band)	slx	Same as sl but without the subtitle band
Full-width sub (no band)	sfx	Same as sf but without the subtitle band

The subtitle band is a gray strip above the content that shows the current menu name as the title. If it overlaps with the board skin's board title feature, turn off the band with slx / sfx and use only the board title, or conversely keep the band and leave the board title empty.

How to assign

1. Open a menu item in Admin > Site menu editing.
2. Enter one of m, sl, sf, slx, sfx in the Class field.
3. After saving, pages reached through that menu are displayed as that type.

Behavior rules:

• Menus without a class follow the Layout type in the layout settings (default: Sub). The site front page (first page) is displayed as the main type if nothing is assigned.
• If you put a class on a submenu, the submenu's value takes precedence over the parent on that page; if the submenu has none, it inherits the parent menu's class (up to 3 levels).
• You can write it together with other classes separated by spaces in the class field. Example: sfx highlight
• Member · message · zittme Pay · integrated search screens automatically become full width if no class is assigned.

Combining with the main visual

• Visual display "Main type only" (default) + m on the home menu: the usual setup, with the slider shown only on the home page
• Visual display "Also show on subpages": slider at the top of every page regardless of type
• Visual display "Off": not shown anywhere

LNB (left submenu)

On sub-type (sl / slx) pages, if the current top-level menu has submenus, a list of submenus appears in a 260px area on the left. It is a boxless list with a divider and a short accent-color line under the title, and the current item is marked with a 3px accent-color bar on the left. Items with third-level menus get a right arrow, and expanded child items are indented with a bent-arrow icon. Menus without submenus show only the content without the LNB.

Header and top menu (GNB)

The header always uses the full screen width. From the left, it has the logo, menu, and utilities on the right; when you scroll down, it sticks to the top at a reduced height and its background turns into a translucent blur.

• Items linked to the "Top menu" (gnb) in site menu editing are shown, with support for up to 3 levels. Hovering over a top-level menu opens a dark dropdown below that item with a 3px accent-color line on top. Third-level menus are shown indented inside the dropdown.
• The top-level menu of the current page shows a 3px accent-color underline.
• With the menu alignment option, you can place the menu next to the logo or in the center of the header.

The utilities on the right are in the following order from the left.

Element	Description
Dark mode button	Visitors switch between light and dark themselves (saved per device)
Search icon	Opens a large search input covering the header. Closes with X, Esc, or clicking outside. Hidden when integrated search is turned off
Language button	Shown as a short code such as KR / EN. Clicking opens the list of enabled languages and changes only the language while staying on the current page. Only appears when two or more languages are enabled in the core
Profile area	Logged out: accent-color Log in button. Logged in: accent-color box with profile photo + nickname + notification bell. Hover to open My info · Admin (when you have admin rights) · Log out

The notification bell is shown on sites with the Notification Center (ncenterlite) module installed, and displays the unread notification count and a list of recent notifications. In this case, the Notification Center's default floating widget is turned off automatically.

Mobile

At 1024px and below, the menu is hidden and the drawer menu opens with the hamburger button at the far right. The drawer has a dark tone based on the accent color and contains the whole menu (3 levels) plus Log in · My info · Admin links. The dark mode button and language selector are shown in one of the drawer's bottom toolbar, the header, or the footer, depending on the "Mobile ... position" options in the layout settings.

Board skin

Select heritage_xedition in Board settings > Skin settings. Because it is responsive, you do not need a separate mobile skin.

It follows the classic table format of the XEDITION board skin. The list sits between thick top and bottom dividers, and the header row is finished with a double border on a light background. Notice rows are set apart with a light gray background.

Item	Description
Board title · description	If entered in the skin settings, a board header (title + short accent-color line + description) appears above the list, and the Write button moves to the right of the header. If empty, there is no header and the Write button sits in the button row below the list. The header is not shown on the read screen
List style	List / Card (thumbnails) / Webzine (thumbnail + summary) / FAQ (clicking a question expands the answer)
Author alignment	Left / Center
Show profile photo · signature · attachments	Whether to show them on the read screen
Upvote · downvote buttons	Whether to use them (default: upvote only)

• The comment count is shown as +N next to the title.
• New posts are marked with a 7px accent-color square dot before the title, following the board setting "New post display time" (default 24 hours).
• The read screen uses a large title and an underlined meta line (author · date · views · upvotes) instead of a dark title bar.
• Buttons are flat light gray square buttons that fill with the accent color on hover. Primary action buttons (Submit · Write) are accent-colored from the start.
• Pagination is a borderless row of numbers; only the current page is shown with an accent-color number and underline, and first/last use double-arrow icons.
• Thumbnails are cropped with square corners.
• The highlight color is linked to the layout's accent color.

Member · message skins

Select heritage_xedition in the Member module settings and the Message settings respectively.

• A title appears at the top of the screen with a short accent-color line beneath it, with ample spacing between the title and the content.
• The profile area on My page and the message box is shown as a card with a 52px profile photo + nickname + level · join date, with a 3px accent-color line on top of the card.
• The left navigation menu uses the same pattern as the layout LNB (title with divider + 3px active bar on the left).
• Inputs, select boxes, and buttons all share a height of 46px so they line up when placed on one row. Buttons are the same flat square buttons as the board.
• On mobile, the profile card and search form stack vertically.

Widget skin

The unified content widget and unified commerce widget include the "Heritage XEDITION" skin (included in the core widgets; no separate installation needed).

• Areas are divided without boxes, using a divider and a short accent-color line under the title row (the same pattern as the board header).
• The tab type draws only a single tab line all the way across, with the "More" link on the right of the tab line.
• Notation such as the +N comment count, the square new-post dot, and square thumbnails is the same as the board skin.

Dark mode

• When the color mode is "Auto," it follows the visitor's device light/dark setting, and visitors can also switch it themselves with the toggle button in the header (saved per device).
• The dark palette is a warm charcoal (a dark gray with a brownish tint) matched to the gold accent. Board · member · message · commerce · widget skins switch along with it.
• If you register a separate dark mode logo image, that logo is shown instead in dark mode. If not registered, the default logo is used as is, so a logo with a transparent background is recommended.

Changing the accent color

To use a color other than the default gold (#cda25a), just change the accent color in the layout settings. Buttons · links · active indicators · the profile box · the dropdown top line · the highlight color of boards and widgets, and even the color of input elements like checkboxes · radio buttons change all at once. In dark mode, brightness is automatically adjusted based on the color you set.

Using a deep navy or black as the accent brings it closer to the monotone mood of the original XEDITION, while keeping the gold gives it a classic feel.

Customization (CSS variables)

Colors are managed with CSS variables. The accent color alone covers most needs, but for finer adjustments, override the variables in a child CSS. Editing the layout files directly may be overwritten when the theme is updated.

Variable	Meaning
--hr-brand	Accent color (injected from the layout setting value)
--hr-brand-dark / --hr-brand-light	Dark · light variants of the accent color (hover, dark mode links)
--hr-ink	Body text color
--hr-muted	Secondary text color
--hr-bg	Page background
--hr-surface	Card · panel background
--hr-line	Dividers
--hr-nav-bg	Background of dark elements such as dropdowns · the footer bar · the mobile drawer
--hr-w	Max content width (layout setting value)
--hr-font-display	Font for headings · logo (default Raleway)
--hr-radius	Corner radius (0 in this theme)

Example main page setup

1. Set the home menu's class to m and register two or more visual slides.
2. Build the home content with the Page module and stack unified content widgets row by row. Choose "Heritage XEDITION" as the widget skin.
3. If you have several boards, group them in a tab-type widget to show them in one area.
4. If you also run an online store, add product rows with the unified commerce widget.

FAQ

• The visual slider doesn't appear: Check in this order: ① at least one slide is registered ② visual display is not set to "Off" ③ the current page is the main type (m) (if the display setting is "Main type only").
• I want to remove the gray strip (title) above subpages: Change the menu class to slx or sfx.
• The left menu (LNB) doesn't appear: The page must be a sub type (sl / slx), and the current top-level menu must have submenus.
• After centering the menu, a thin vertical line appears next to the active menu: This is an issue in 1.0.0. Update the theme to 1.0.1 or later.
• Dark mode isn't applied: Check that the color mode isn't fixed to "Always light."
• Some module screens use the default design: Check that the skin is set to heritage_xedition in that module's settings. Applying a theme in bulk only applies to modules linked to the site menu, so for modules not linked to a menu, such as Contact, choose it individually in the module settings.
• I changed the accent color but only some parts changed: This may be due to the cache. Regenerate the cache in Admin and refresh.
• English headings look like a different font: English text in headings and the logo text is displayed in Raleway (Google Fonts). In environments where external font loading is blocked, Pretendard is used instead.
• I updated from Rhymix but the theme wasn't applied: Updates keep your existing design settings. Apply Heritage XEDITION yourself in Admin > Design settings.