¶ Introduction
This page will show you how to mod the styles within Elegos.
¶ How do I mod the game styles?
Create a folder called styles inside of a mod folder. You should end up with a structure like <mod name>/styles.
- Create a
.jsonfile named with the name of the styles that you are creating (i.e.high contrast.json) and place inside of the<mod name>/stylesfolder. - Not all keys have to be in the JSON. Anything ommited then default values are used or if overriding then original values are used.
- JSON Reference and Example.
- See below for a complete Styles ID reference.
¶ Secret other way but good for quick testing...
A bit of a legacy thing but useful for quick testing, /data/styles is still a 'magic' folder and so will be processed in the same way as the styles folder inside of mods. I discourage adding stuff to the data folder as it's not easily or formally shared like a mod is, but it is there for quick iteration on style files before you have to create a complete and valid mod folder/zip.
¶ JSON Reference
Please note: This JSON object will evolve over time to contain more metadata and more options for styling
This JSON file contains all the metadata to uniquely style UI objects.
¶ Example file
{
"menu.button.border_normal":"#444131",
"menu.button.border_hover":"#444331",
"menu.button.border_selected":"#E3D393",
"menu.button.border_disabled":"#104D48",
"menu.button.background_normal":"#052724",
"menu.button.background_hover":"#444331",
"menu.button.background_selected":"#E2D293",
"menu.button.background_disabled":"#284E4B",
"menu.button.text_normal":"#84786C",
"menu.button.text_hover":"#E2D293",
"menu.button.text_selected":"#000000",
"menu.button.text_disabled":"#153A39",
"menu.button.text_align":"Center",
"menu.splash.font_size": 30,
"menu.splash.font_color":"#FFFFFF",
"menu.title.font_size":78,
"menu.title.font_color":"#FFFFFF",
"menu.header.font_size":48,
"menu.header.font_color":"#FFFFFF",
"menu.text.font_size":22,
"menu.text.font_color":"#85796D",
"menu.subheader.font_size":24,
"menu.subheader.font_color":"#85796D",
"menu.settings.item.background_hover":"#444331",
"menu.settings.item.text_normal":"#FFFFFF",
"menu.settings.item.text_hover":"#E3D393",
"menu.settings.item.text_disabled":"#FFFFFF",
"menu.settings.item.font_size":30
}
¶ Styles ID Reference
Whilst a Styles ID is essentially a string that labels a style/size/color, the Styles IDs in Elegos follow a standardised naming convention for ease of reference and organisation: (screen.section.item.description_with_underscores)
See below for a full list of Styles IDs currently available in Elegos.
Please note: This is still an ongoing work and these keys might evolve over time.
¶ Menu > Buttons
| ID | Type | Description |
|---|---|---|
menu.mainButton.borderNormal |
Hex Color | Button border color |
menu.mainButton.borderHover |
Hex Color | Button border color when hover |
menu.mainButton.borderSelected |
Hex Color | Button border color when selected |
menu.mainButton.borderDisabled |
Hex Color | Button border color when disabled |
menu.mainButton.backgroundNormal |
Hex Color | Button background |
menu.mainButton.backgroundHover |
Hex Color | Button background when hover |
menu.mainButton.backgroundSelected |
Hex Color | Button background when selected |
menu.mainButton.backgroundDisabled |
Hex Color | Button background when disabled |
menu.mainButton.textNormal |
Hex Color | Text color |
menu.mainButton.textHover |
Hex Color | Text color when hover |
menu.mainButton.textSelected |
Hex Color | Text color when selected |
menu.mainButton.textDisabled |
Hex Color | Text color when disabled |
menu.mainButton.fontSize |
Int | Text font size |
menu.mainButton.padding |
Int | /!\ not in use yet |
menu.mainButton.textAlign |
String | /!\ not in use yet |
| ID | Type | Description |
|---|---|---|
menu.button.border_normal |
Hex Color | Button border color |
menu.button.border_hover |
Hex Color | Button border color when hover |
menu.button.border_selected |
Hex Color | Button border color when selected |
menu.button.border_disabled |
Hex Color | Button border color when disabled |
menu.button.background_normal |
Hex Color | Button background |
menu.button.background_hover |
Hex Color | Button background when hover |
menu.button.background_selected |
Hex Color | Button background when selected |
menu.button.background_disabled |
Hex Color | Button background when disabled |
menu.button.text_normal |
Hex Color | Text color |
menu.button.text_hover |
Hex Color | Text color when hover |
menu.button.text_selected |
Hex Color | Text color when selected |
menu.button.text_disabled |
Hex Color | Text color when disabled |
menu.button.text_align |
String | Text alignment |
¶ Menu > Splash
| ID | Type | Description |
|---|---|---|
menu.splash.font_size |
Int | Splash screen font size |
menu.splash.font_color |
Hex Color | Splash screen text color |
¶ Menu
| ID | Type | Description |
|---|---|---|
menu.settings.title.fontsize |
Int | Menu title font size |
menu.settings.title.fontcolor |
Hex Color | Menu title font color |
menu.settings.item.fontsize |
Int | Menu item font size |
menu.settings.item.fontcolor |
Hex Color | Menu item font color |
menu.settings.item.fontcolor.hover |
Hex Color | Menu item font color when hover |
menu.settings.item.fontcolor.disabled |
Hex Color | Menu item font color when disabled |
| ID | Type | Description |
|---|---|---|
menu.title.font_size |
Int | Current menu title (font size) |
menu.title.font_color |
Hexa Color | Current menu title (font color) |
menu.header.font_size |
Int | Current submenu title (font size) |
menu.header.font_color |
Hexa Color | Current submenu title (font color) |
menu.subheader.font_size |
Int | Message under the header (font size) |
menu.subheader.font_color |
Hexa Color | Message under the header (font color) |
menu.text.font_size |
Int | Different texts on the main menu (font size) |
menu.text.font_color |
Hexa Color | Different texts on the main menu (font color) |
menu.settings.item.background_hover |
Hexa Color | Menu item background when hovered |
menu.settings.item.text_normal |
Hexa Color | Menu item font color |
menu.settings.item.text_hover |
Hexa Color | Menu item font color when hovered |
menu.settings.item.text_disabled |
Hexa Color | Menu item font color when disabled |
menu.settings.item.font_size |
Int | Menu item font size |
¶ Subtitles, bark and captions
Caption show ambient information, in this case the birds are chirping
Subtitles show dialog, for instance
And barks are interjetions from NPC, like an Ouch after beign punched
| ID | Type | Description |
|---|---|---|
game.subtitles.font_size |
Int | Subtitles and barks font size |
game.subtitles.character.font_color |
Hexa Color | Subtitles and barks' character color |
game.subtitles.text.font_color |
Hexa Color | Subtitles and barks' text line color |
game.caption.font_size |
Int | Caption's font size |
game.caption.font_color |
Hexa Color | Caption's font color |
game.subtitles.background_alpha |
Float | Value between 0-1 to change the transparency of any caption in game |