Blue Helm Studios JSON
Learn how the Blue Helm Studios JSON configuration system works, what each property does, and how supported parts of the website can be customized.
If you already know how standard JSON works, this documentation should be very easy to understand. Our system uses familiar JSON concepts such as objects, arrays, strings, booleans, and values.
Introduction
The Blue Helm Studios JSON system is our own configuration format for supported website components. It provides a structured way to configure things such as navigation, dropdowns, colors, content, and other supported features.
The system is designed to be simple enough to understand while still providing enough control for advanced website customization.
Important: Only properties specifically supported by the Blue Helm Studios JSON system can be changed. Unsupported properties will not automatically modify the website.
JSON Structure
A JSON configuration is made up of properties and values. Properties describe what should be configured, while values determine what the configuration should contain.
{
"name": "Example",
"enabled": true,
"color": "#1769e0",
"items": [
"Home",
"Games",
"About"
]
}JSON uses different types of values, including strings, numbers, booleans, arrays, and objects.
Properties
Properties control individual parts of a supported configuration.
| Property | Type | Description |
|---|---|---|
name |
String | Defines a name or title. |
enabled |
Boolean | Enables or disables a supported feature. |
color |
String | Defines a supported hexadecimal color. |
items |
Array | Contains multiple values or entries. |
title |
String | Defines visible text for supported components. |
url |
String | Defines a destination for supported navigation items. |
Color Codes
Supported colors use hexadecimal color codes. A
hexadecimal color begins with
#
and contains six characters representing red,
green, and blue values.
{
"color": "#1769e0"
}Examples
| Color | Code | Example |
|---|---|---|
| Blue | #1769e0 |
Blue |
| Dark Blue | #0d47a1 |
Dark Blue |
| White | #ffffff |
White |
| Black | #000000 |
Black |
| Light Blue | #eaf2ff |
Light Blue |
Content Types
Supported content configurations can use different content types depending on what is being displayed.
Paragraph
A paragraph displays normal text.
{
type: "paragraph",
text: "This is a paragraph."
}Image
Images can contain a source, alternative text, and an optional caption.
{
type: "image",
src: "images/example.png",
alt: "Example image",
caption: "Example image"
}List
Lists contain multiple individual items.
{
type: "list",
items: [
"First item",
"Second item",
"Third item"
]
}Dropdowns
Dropdowns allow navigation to contain additional pages or options without displaying every option directly in the main navigation.
The dropdown system was originally introduced in v2.4.0 and has since been expanded to support additional dropdown content.
{
"dropdown": {
"enabled": true,
"title": "Games",
"items": [
{
"title": "Game One",
"url": "/game-one"
},
{
"title": "Game Two",
"url": "/game-two"
}
]
}
}Dropdown configurations can be used in supported desktop and mobile navigation systems.
Custom Hamburger
Blue Helm Studios supports custom hamburger navigation for mobile and sidebar-based interfaces. The hamburger controls access to the navigation menu.
The hamburger can be configured using supported properties such as its enabled state and icon.
{
"hamburger": {
"enabled": true,
"icon": "☰",
"label": "Open menu"
}
}No Tween
Some Blue Helm Studios interfaces intentionally use instant opening and closing instead of tween animations. This keeps menus fast and predictable.
Examples
The following example combines navigation, dropdown, colors, and hamburger configuration.
{
"navigation": {
"enabled": true,
"color": "#1769e0",
"dropdown": {
"enabled": true,
"title": "Games",
"items": [
{
"title": "Game One",
"url": "/game-one"
},
{
"title": "Game Two",
"url": "/game-two"
}
]
},
"hamburger": {
"enabled": true,
"icon": "☰",
"label": "Open menu"
}
}
}Frequently Asked Questions
Answers to common questions about the Blue Helm Studios JSON configuration system and how it can be used to customize supported parts of the website.
Knowing regular JSON is not strictly required, but it is recommended. If you already understand objects, arrays, strings, booleans, commas, brackets, and quotation marks, the Blue Helm Studios JSON system should be very easy to understand. The system uses familiar JSON concepts while adding Blue Helm Studios-specific configuration options.
The Blue Helm Studios JSON system is our own configuration system that allows supported parts of the website to be customized using a structured JSON-based format.
Depending on the configuration being used, you can change supported navigation options, dropdown content, colors, text, images, lists, hamburger menu settings, and other website components that have been made configurable.
No. The JSON system only controls properties that Blue Helm Studios has specifically made configurable. Adding an unsupported property will not automatically create new functionality.
Unsupported properties are not used by the website. They will not create new functionality unless that property has specifically been programmed into the Blue Helm Studios JSON system.
The system uses standard JSON value types such as strings, numbers, booleans, arrays, and objects. The exact value type required depends on the property being edited.
The enabled property controls whether a
supported feature is turned on or off. It
normally uses either
true or
false.
If the component supports color configuration,
use its supported color property and provide
a hexadecimal color such as
#1769e0.
Hexadecimal color codes are six-character
color values beginning with
#.
For example,
#ffffff
represents white and
#000000
represents black.
Yes. Supported dropdown configurations can contain multiple navigation items. Each item can have its own title and destination.
Yes, where supported. The expanded dropdown system allows additional supported options and content to be organized inside a dropdown instead of placing everything directly in the main navigation.
Supported dropdown navigation can be used with both the desktop navigation and mobile navigation system. The exact appearance may differ depending on the device.
Yes. Supported hamburger configuration can control properties such as whether the menu is enabled, the displayed icon, and its accessible label.
If the hamburger configuration supports a custom icon, you can provide the supported icon value. The available options depend on how the website component has been implemented.
No. The custom hamburger system does not require tweening. A menu can be designed to open and close instantly if that is how the website component has been implemented.
Yes. Supported image content can define an image source, alternative text, and an optional caption. The image must use the structure supported by the content system.
Yes. Supported list content uses an array of items, with each item representing one entry in the resulting list.
A string is text, such as
"Games".
A boolean is either
true or
false and
is commonly used for settings such as
enabled or disabled.
Check that your JSON syntax is valid and that every property is supported. Common problems include missing commas, incorrect quotation marks, mismatched brackets, incorrect value types, and misspelled property names.
This documentation contains explanations, examples, supported properties, and common questions about the Blue Helm Studios JSON configuration system.