Skin Designer

Skin Designer is a development tool used to edit, preview, and manage iBoard skin files. It allows administrators and developers to work with skin HTML files, composed HTML output, preview screens, skin mapping files, and skin configuration JSON.

This feature is powerful but not simple. It is intended for users who understand HTML, CSS, JavaScript, iBoard placeholders, and the structure of iBoard skin files.

Overview

iBoard skins are made from multiple small HTML files. Each file controls a specific part of the board layout, such as the list screen, row template, notice row, pagination, message area, rating area, or show page.

Skin Designer helps you edit these files and preview how they work together before applying them to a live board.

What Skin Designer Is Used For

Skin Designer is used when you need to customize how iBoard appears. Instead of changing board logic, you can modify the skin files that control the board's visual structure.

• Create a new board skin.
• Modify an existing board skin.
• Change the list layout of a board.
• Customize post row design.
• Customize notice rows.
• Modify pagination design.
• Preview the board skin before using it.
• Update skin mapping and configuration files.

Important Concept

A skin is not usually one single file. It is made of many smaller files. These files are combined by the system to create the final board screen.

Example skin structure:

iBoardFreeBoard
├── css
├── iboard
│   ├── attribute
│   ├── editor
│   ├── list
│   │   ├── list.html
│   │   ├── list_row.html
│   │   ├── list_notice.html
│   │   ├── pagination.html
│   │   ├── pagination_next.html
│   │   ├── pagination_number.html
│   │   └── pagination_previous.html
│   ├── message
│   ├── rating
│   └── show
├── image
├── js
├── iboard.json
└── skin.json

Because a skin is composed from multiple files, changing one file can affect only one part of the board, while changing shared CSS or JSON can affect the entire skin.

File Tree

The file tree on the left shows available skin folders and files. Select a file to edit or preview it.

Main Tabs

Source

The Source tab shows the original source code of the selected file. Use this tab when you need to edit a specific HTML, CSS, JavaScript, or JSON file.

Composed HTML

The Composed HTML tab shows the combined HTML output after iBoard processes the skin structure. This is useful for checking how multiple skin files are assembled into the final board layout.

Preview

The Preview tab displays a visual preview of the current skin. It helps you check the layout without opening the board separately.

Manual

The Manual tab provides help information or reference content related to the selected skin or file.

Preview Devices

The preview area may include device buttons such as desktop, tablet, and mobile. Use these buttons to check whether the skin works correctly on different screen sizes.

• Desktop: Preview the skin in a wide layout.
• Tablet: Check medium-width layout behavior.
• Mobile: Check narrow screen layout behavior.
• Full View: Opens a larger preview area.

Common Skin Files

Typical Workflow

1. Choose the skin type from the top-right selector.
2. Select a skin folder from the file tree.
3. Open the file you want to edit.
4. Review the Source tab.
5. Modify the HTML, CSS, JavaScript, or JSON carefully.
6. Check the Composed HTML tab if the file affects the generated output.
7. Open the Preview tab and confirm the result.
8. Test desktop, tablet, and mobile preview modes.
9. Click Save when the result is correct.
10. Open the actual board and verify the live result.

Example: Editing the Board List

To change the board list design, start from the files under:

iboard/list/

The most commonly edited files are:

• list.html for the main list layout.
• list_row.html for normal post rows.
• list_notice.html for notice rows.
• pagination.html and related pagination files for page navigation.

Example: Changing Row Design

If you want to change how each post row appears, edit list_row.html.

<tr>
    <td>##{FIELD-NUMBER}##</td>
    <td>##{FIELD-TITLE}##</td>
    <td>##{FIELD-WRITER}##</td>
    <td>##{FIELD-DATE}##</td>
</tr>

Placeholder names depend on the iBoard rendering engine. Do not remove required placeholders unless you understand how the skin is rendered.

skin-map.json

The skin-map.json file defines how skin files are mapped and composed. It helps the system understand which files belong to which layout area.

Modify this file only when you need to change the structure of how skin parts are connected.

skin.json

The skin.json file contains general skin configuration and metadata. This may include skin name, type, version, description, available layouts, or other skin settings.

Incorrect JSON can break the skin configuration. Always confirm that JSON syntax is valid before saving.

Important Notes

• Skin Designer is intended for users with HTML, CSS, JavaScript, and JSON knowledge.
• Changing a shared skin file may affect every board using that skin.
• Always preview before saving.
• Always test the actual board after saving.
• Do not delete required template files.
• Do not rename files unless the mapping file is also updated.
• Back up the skin folder before making large changes.

Troubleshooting

Best Practices

• Duplicate an existing skin before making major changes.
• Change one file at a time and preview after each change.
• Use clear CSS class names to avoid conflicts.
• Keep layout HTML separate from CSS and JavaScript when possible.
• Use the preview, but always confirm the result on the real board page.
• Keep backups of working skin versions.
• Document custom placeholders or custom skin rules for future developers.

Skin Designer gives you deep control over how iBoard looks. It is powerful, but it requires careful editing. Start with small changes, preview often, and keep backups.