1. Server Overview, Branding, and Appearance

This chapter is for the server’s owner and admins. It covers the server’s public identity (name, icon, and branding banner) and its server-wide look (themes and fonts). Click the gear icon on the right side of the tab bar (tooltip: User Settings) to open the settings panel. In the Server Settings group on the left, three tabs appear from top to bottom: Overview, Branding, and Appearance. This chapter explains each of them in turn. The owner and admins see exactly the same content.

1.1 Server Overview

Overview is the first tab in the Server Settings group. From top to bottom, it has five sections: server name, server icon, default channel, server size statistics, and the HakoSpace Improvement Program.

Server Name

Server Name sits at the top of the tab. Use it to set the name your server displays, up to 32 characters.

Enter a name, then click the Save button. The server then shows the new name. Until you click Save, you can click Reset at any time to undo your changes.

After you change the name, you can see it in these places: the server name on the login page, the browser tab title, and the server’s display name that members see when they come in.

Server Icon

Server Icon is your server’s representative image. It appears in these places: the login page, the browser tab, and the server sidebar on the left side of HakoSpace Desktop.

Click Upload Icon and choose an image to upload it. It applies as soon as you choose it. You can use PNG, JPEG, GIF, or WebP, and the file can’t exceed 20 MB. If it does, the message “Icon must be less than 20MB” pops up.

After you upload an icon, Remove Icon appears next to it. Click it to clear the current icon.

Default Channel

Default Channel sets which channel members join automatically the first time they enter the server.

The first option in the drop-down menu is None (first channel). Choose it if you don’t want to name a specific channel; members then land in the first channel in the channel list. The other options list the channels that can be the default (text, forum, and page channels, plus Note and Monument multi-function channels; voice and IO App channels can’t be set as the default). Your choice takes effect as soon as you pick it, and you don’t need to click Save.

Server Size Statistics

Below the default channel setting, two cards sit side by side: Total Channels on the left and Total Members on the right. They show the size of your server at the moment you open the tab.

HakoSpace Improvement Program

HakoSpace Improvement Program, at the very bottom, lets you decide whether to share your server’s anonymous usage statistics with the HakoSpace team. The description states it clearly: “Share anonymous usage statistics to help improve HakoSpace. No personal data is collected.”

Click the switch beside it to turn it on or off. Below the switch, you see the current status:

• On and connected → a green light and “Connected — data is being sent”
• On but unable to connect → a red light and “Unable to reach HakoSpace servers”
• Off → Disabled

If your server has been assigned an identifier, an extra Instance ID line appears in this section, followed by the string that identifies this server in the HakoSpace system. Click the string once to select all of its text, so you can copy and paste it.

At the bottom of the section is Request deletion of uploaded data, with the description “Ask HakoSpace to delete the anonymous statistics previously uploaded by this instance. The request carries only the instance ID — nothing else.” Click Request deletion to open the confirmation dialog “Confirm deletion of uploaded data?”, then click Confirm deletion to send the request. The result appears below the description, for example “Deletion complete.” or “Could not reach HakoSpace servers. Please try again later.”

1.2 Branding

All three fields on the Branding tab affect what members see when they log in. They are the first impression your server presents to the public.

Login Page Banner

The Login Page Banner appears at the top of the login page. The description reads: “This banner is displayed at the top of the login page.”

Before you upload a banner, the preview area shows No banner set. When you move the mouse over the preview, a prompt appears: Upload Banner (if no banner is set yet) or Change Banner (if one is already set). Click to choose an image. The image uploads and applies as soon as you choose it. The image can be in any common format, and the file can’t exceed 20 MB.

Once a banner is set, Remove Banner appears below the preview. Click it to clear the current banner.

Welcome Message

The Welcome Message appears when members finish logging in and reach the server’s main screen. The description reads: “This message is shown to users after they log in.”

This is a multi-line text box with a limit of 200 characters. When it’s empty, it shows a pre-filled example for reference: “Welcome to HakoSpace! Feel free to chat and connect.” After you edit it, click Save to apply it. Before you save, you can click Reset to undo your changes.

Login Message

The Login Message appears on the login page, below the server name. Use it for hints about registering or logging in. The description reads: “This message is shown on the login page below the server name.”

This is a single-line text box (unlike the multi-line Welcome Message), with a limit of 200 characters. When it’s empty, the pre-filled example text is “We’re so excited to see you!” Saving and resetting work the same way as for the Welcome Message.

1.3 Appearance

The Appearance tab manages the look of the whole server. From top to bottom, it has four sections:

1. Server Default Theme — pick one of the existing themes as the server-wide default
2. Theme Management — create new themes, and edit or delete existing custom themes
3. Theme Editor — opens only after you click to create or edit a theme
4. Font Management — upload, view, and delete fonts

1.3.1 Server Default Theme

Server Default Theme, at the top, chooses the theme applied across the whole server. The description reads: “Choose the theme all users see by default. Users can override this in their personal Appearance settings.”

Below it is a grid of theme cards. The top half of each card is a sketch made from the theme’s main colors, and the bottom half shows the theme name. Themes created on the server or by users also have a small tag next to the name:

• Server Themes — created by admins on this server
• User Themes — created by individual members (admins can see these too)

Click any card to make it the server-wide default. The selected card’s border changes color, and a check mark appears in its top-right corner. Every member who hasn’t switched to a different theme in their personal settings sees the new theme.

1.3.2 Theme Management

Click + Create Custom Theme to open the theme editor (see §1.3.3) in Create mode.

Below it, every theme is listed, one per row:

• Built-in theme rows show a lock and the theme name.
• Custom theme rows (server or user themes) show the name and a tag, plus two icons on the right: a pencil (edit) and a trash can (delete).

Click the pencil to open the theme editor in Edit mode. Click the trash can to bring up a system confirmation dialog. After you confirm, the theme is removed from the server and the list updates immediately.

1.3.3 Theme Editor

The editor opens only after you click + Create Custom Theme (Create mode) or the pencil on a custom theme’s row (Edit mode). Inside, a series of settings areas run from top to bottom, and an X in the top-right corner closes the editor at any time. If you close it without saving, your changes are lost.

Theme Name and Cloning

At the top is the Theme Name text box, with a limit of 32 characters. In Create mode, the name can’t be blank; otherwise the Create button at the bottom can’t be clicked.

Below the theme name, the Clone from existing drop-down menu appears only in Create mode. When you pick an existing theme, its colors, fonts, background, and opacity settings are all copied into the theme you’re editing, as a starting point for you to fine-tune.

Inheritance

Next is Inheritance, with three independent checkboxes. For each category you check, this theme doesn’t use its own settings and takes the values from the parent theme instead. The three items and their descriptions (verbatim):

• Inherit Colors: “Use the parent theme’s colors instead of this theme’s own”
• Inherit Fonts: “Use the parent theme’s fonts instead of this theme’s own”
• Inherit Background: “Use the parent theme’s background instead of this theme’s own”

You can check each of the three independently. For example, you can inherit only the background but customize the colors and fonts.

Colors

The Colors editing area is divided into five groups by purpose:

• Backgrounds (interface and panel backgrounds)
• Text (regular text and link colors)
• Semantic (accent, danger, success, warning)
• Borders (dividers and outlines)
• Scrollbar (scrollbar track and thumb)

Each color has three ways to adjust it, side by side:

1. Color picker — click it to open the system color palette and pick a color directly
2. Hexadecimal text box — type a color code directly, for example #1a2b3c; the color updates only when the code is a valid six-digit hexadecimal value
3. Opacity slider (0–100%) — the current percentage appears beside it; below 100%, the number turns a warning color as a reminder

Your changes are saved only after you click Create or Save at the bottom.

Fonts

The Fonts editing area has three parts.

The first part, Body Font, chooses the font for everything that isn’t monospaced, such as interface text and chat messages; its drop-down menu groups the fonts into General and Monospace. The second part, Monospace Font, chooses the font for places that need monospaced display, such as code blocks and color code fields; its drop-down menu lists the monospace fonts. The font list in these drop-down menus comes from Font Management (§1.3.4).

The third part, Language-Specific Fonts, assigns a dedicated font to the characters of a specific language (to avoid characters missing from the body font). Use the + Add Language drop-down menu in the top-right corner to add a language. Once added, the language gets its own row with a drop-down menu for choosing a font; in that menu, Use body font means no separate font is set and the language falls back to the body font. Each row has an X on its right for removing it. After you remove a row, that language uses the body font.

Background Image

Background Image adds a background image to the theme.

Before you upload one, this area is a large dashed box with the prompt “Click to upload background image” inside. Click the box to choose an image. Three formats are accepted: PNG, JPEG, and WebP.

After you upload one, a thumbnail preview takes its place (it applies the opacity and blur settings below in real time), with six adjustments below it:

1. Image Opacity (0–100%) — controls how strongly the background image shows through
2. Blur (0–20) — the higher the number, the blurrier the whole background
3. Size — choose one of three options to set how the background image scales to fill the window
4. Position — choose one of five options to set the anchor point the background image aligns to
5. Surface Opacity (0–100%) — on-screen description: “Sidebar and panel transparency over the background”; the lower the number, the more transparent the sidebar and panels, and the more the background image shows through
6. Title Bar Opacity (0–100%) — on-screen description: “Title bar, tab bar, and toolbar transparency”

Click Remove Background to clear the current background image and return the editing area to how it was before the upload.

Preview

The Preview area at the bottom of the editor shows a small sample of the interface, including a demo channel list and message snippets. The preview reflects your current color settings in real time. The preview uses a fixed sample and is for visual reference only.

Saving

At the bottom of the editor are two buttons:

• Create (Create mode) / Save (Edit mode) — saves your current edits; in Create mode, it can’t be clicked while the name is blank
• Cancel — closes the editor right away without saving

After saving finishes, the editor closes automatically, and the Theme Management list and the Server Default Theme grid show the new content immediately.

1.3.4 Font Management

Font Management provides the fonts you can choose from in the font drop-down menus of the theme editor (§1.3.3), and lets admins upload their own fonts.

The upper part lists all currently available fonts, one per row. From left to right, each row shows:

• A source icon (a lock for built-in fonts, a folder for custom fonts)
• The font name
• A category tag (General or Monospace)
• A source tag (built-in fonts are also marked Built-in)
• A sample line rendered in that font: “Aa Bb 你好世界 こんにちは 한국어 0123456789” — it covers Latin letters, Chinese characters, Japanese kana, Korean Hangul, and digits, so you can tell which characters the font supports

Rows for custom fonts have an extra delete button on the right. Click it, and a confirmation asks “Are you sure you want to delete this font?” Confirm, and the font is removed.

Click + Upload Font at the bottom to open an upload form:

1. Font Name — up to 32 characters; this name appears in the theme editor’s font drop-down menus
2. Type — two buttons switch between General and Monospace, which decides the group this font appears in within the body and monospace font drop-down menus after you upload it
3. Font Files — you can select several files at once; the accepted file extensions are .woff2, .woff, .ttf, .otf, and these four are also listed word for word below

When you’ve filled in the form, click Upload Font to send the font to the server and add it to the font list. Click Cancel to close the form right away; what you entered isn’t kept.