Skip to content

Restyle the menus

Designer · 45 min · No code

Result: the menus use your own colours and font. List rows, tab strips and headings all change together, because you edit the few shared style assets rather than each screen.

Before you start

  • UI shell and HUD: how screens, buttons and styles relate.
  • Import your font first if you want one (see step 4).

Where the look lives

XenoCore's menus are built with Epic's CommonUI, the same toolkit Lyra uses. In CommonUI a widget does not store its own colours; it points at a style asset. Change the style and every widget using it changes.

The shared pieces are in UserInterface/Foundation:

Asset What it styles
ButtonStyle_XenoCore_Menu List rows and small buttons: item rows, art rows, party member buttons, trade rows, and the Skills screen's branch headers (Selected = the selected branch). Normal, hovered, pressed and selected looks.
ButtonStyle_XenoCore_TitleEntry The title screen's entries
W_XenoCore_TabButton Every tab strip (Items, Equipment, Shop, Trade)
MI_XenoCore_FontColor_TabButton The tab labels' text colour, as a material
MI_XenoCore_FontColor_MenuButton, MI_XenoCore_FontColor_TitleEntry Text colour materials for menu buttons and title entries
W_XenoCore_MenuButton The larger menu button, used by the shop and trade screens
TextStyle_XenoCore_TitleEntry, TextStyle_XenoCore_TitleEntrySelected Title screen text

The main menu and its entries

The in-game main menu (UserInterface/W_XenoCore_MenuShell, built on XenoCoreMainMenuBase) and the party tactics panel share one house palette: a navy panel with a blue rim, Orbitron text, steel-grey secondary text and a blue accent. Its pieces are drawn in C++, so their look is a set of class defaults rather than a style asset:

  • The menu entries are XenoCoreMenuEntryButton, the default Project Settings › Game › XenoCore UI › Menu › Menu Button Class. Make a Blueprint child of it, set Label Font, Text Colour, Dim Colour, Highlight Colour and Accent Colour under XenoCore › Look, and point Menu Button Class at your child. Any CommonButtonBase child works there, including W_XenoCore_MenuButton.

  • The party cards are XenoCorePartyCardBase. Make a Blueprint child, change its XenoCore › Look settings, and set it as Card Class in W_XenoCore_MenuShell's Class Defaults (XenoCore › Menu).

  • The main menu's own panel is not a class default. Open W_XenoCore_MenuShell in the Designer: the entry panel is the Border EntriesPanel (change its Brush › Tint and the outline colour), and the darkening over the world is the Border ScreenDim (Brush Color).

Steps

1. Back up what you are about to change

Style assets are shared, so this recipe edits shipped XenoCore assets in place. Write down each asset you change (or commit before and after), so you can reapply your changes after a template update.

2. Change the row colours

  1. Open UserInterface/Foundation/ButtonStyle_XenoCore_Menu. It is a small Blueprint: open Class Defaults.
  2. Under Normal, Selected and Disabled, each state has a brush: Normal Base, Normal Hovered, Normal Pressed, Selected Base, Selected Hovered, Selected Pressed, and Disabled. Each brush is a rounded box. (They are greyed out while Single Material is ticked; leave it off.)
  3. Change each brush's Tint to your colours. Keep Normal Base close to your panel colour so rows read as a list, and make Selected Base clearly different; that is where the cursor is.
  4. Compile and Save.

Every row that uses this style changes at once: the Items list, Equipment rows, Arts rows, the Party screen's member buttons and the trade rows.

3. Change the tab strip

  1. Open UserInterface/Foundation/MI_XenoCore_FontColor_TabButton and change its colour parameters for the unselected and selected states. Save.
  2. Open UserInterface/Foundation/W_XenoCore_TabButton if you want to change its size, padding or background. Keep Min Width at 0.

Don't swap in Lyra's tab button

Lyra's W_LyraButtonTab has a minimum width of 320. A twelve-tab strip of them is 3840 pixels wide and pushes headers, tables and titles off screen, which looks like three unrelated bugs. Keep using W_XenoCore_TabButton.

4. Change the font

  1. Import your font file (.ttf or .otf) into MyGame/UI/Fonts. Unreal creates a Font Face and asks whether to create a Font asset from it too: click Yes. The Font is named after the face with _Font on the end.
  2. Open each style that names a font and set its Font Family to your new Font:
    • TextStyle_XenoCore_TitleEntry, TextStyle_XenoCore_TitleEntrySelected
    • W_XenoCore_TabButton and W_XenoCore_MenuButton, which set their font directly
  3. Text blocks placed directly in screens also carry a font. In a screen, select a text block and set Font › Font Family in Details.
  4. Two screens are drawn in C++ and take their font from a Font Family class default instead: the party tactics panel (XenoCoreTacticsPanelBase, Tactics › Text) and the Change Time screen (XenoCoreChangeTimeScreen, Change Time › Text). Set it on a Blueprint child; the tactics panel's child goes in Tactics Panel Class (see Party tactics).

The shipped menus use Lyra's Orbitron font from Content/UI/Foundation/Fonts. Search the Content Browser for widgets referencing it (right-click the font, Reference Viewer) to find every place to change.

Fails silently: a text block with a Style ignores its Font

A Common Text Block that has a Style set draws with the style's font and colour, and ignores the Font and Color and Opacity you type in its own Details. Nothing marks this. If a label refuses to change, clear its Style (set it to None) or change the style asset instead.

5. Replace a whole screen

Restyling changes how shared pieces look. To swap an entire screen or HUD widget for your own, use the two XenoCore pages in Edit › Project Settings › Game. Each setting starts at the shipped asset.

XenoCore UI: the widgets XenoCore opens from code, plus the in-game menu.

Group Settings Must derive from
Screens Save Screen, Quest Log Screen, Quest Offer Screen, Shop Screen, Trade Screen, Arts Screen, Skills Screen, Gem Popup The matching XenoCore base, for example XenoCoreShopScreenBase
HUD Interact Prompt, Loot Popup, Battle Notify, Dialogue Box XenoCoreInteractPromptBase, XenoCoreLootPopupBase, XenoCoreBattleNotifyBase; the dialogue box should derive from XenoCoreDialogueBoxBase
HUD Damage Taken Numbers, Damage Dealt Numbers, Heal Numbers Niagara systems. Each number's colour is set inside its system
Items Item Rarity Table, Rarity Pip Size, the Gem Socket icons See Set and style item rarity
Tutorials Tutorial Table, Tutorial Card See Add a tutorial card
Menu Menu Entries, Additional Menu Entry Sets, Menu Button Class, Menu Button Padding, Menu Group Gap See Add a menu screen

XenoCore Content: non-UI assets C++ spawns or applies.

Group Setting What it is
Dialogue Dialogue Anchor The actor that carries the speech box. Must derive from XenoCoreDialogueAnchor; its Blueprint holds the box height
Feedback Beam Material The light shaft over a healed or buffed character
Debug Reaction Break Effect, Reaction Topple Effect, Reaction Daze Effect What the XenoCore.Reaction debug command applies

To replace one:

  1. Duplicate the shipped widget into Content/MyGame/UI (for example W_XenoCore_ShopScreen to W_MyGame_ShopScreen) and change it. Keep its parent class.
  2. Set the matching setting to your copy. Settings are saved to Config/DefaultGame.ini.
  3. Add your folder to Project Settings › Packaging › Additional Asset Directories to Cook (an advanced setting; it is DirectoriesToAlwaysCook in DefaultGame.ini). See below.

If a setting is cleared, fails to load, or names a widget with the wrong parent, XenoCore logs a warning (XenoCore UI setting '...' did not load) and uses the shipped asset, so a mistake costs your change, never the feature.

Fails silently in a packaged build: your replacement is not cooked

A setting holds a soft reference, and the cooker does not follow soft references in settings. The shipped widgets are cooked only because Config/DefaultGame.ini always cooks /XenoCore/UserInterface and /XenoCore/Characters/NPC, or because other cooked assets reference them. A replacement stored anywhere else works in the editor and is missing from a packaged build, which then quietly falls back to the shipped screen. Add your folder (for example /Game/MyGame/UI) to Additional Asset Directories to Cook (DirectoriesToAlwaysCook), or make sure something that is cooked references it.

6. Author your own styles, not references to Lyra's

When you create new widgets, create your own style assets in MyGame/UI/Styles: right-click, Blueprint Class, and pick CommonButtonStyle or CommonTextStyle as the parent. Point your widgets at those.

Referencing Lyra's style assets from /Game/UI/... works today, but it ties your look to host content you don't own, and any change there changes you.

Test it

  1. Open Maps/L_XenoCore_Gym and press Play.
  2. Open the menu (pad Y, keyboard I) and open the Items screen. Rows and tabs use your colours; move the cursor and the selected state uses yours too.
  3. Open Equipment and the Party screen; their rows changed as well.
  4. Talk to the gym's shopkeeper and check the shop's buttons.

If it doesn't work

One label won't take the new font or colour

It is a Common Text Block with a Style set. Clear the style or edit that style.

The main menu's entries didn't change

They are XenoCoreMenuEntryButton, drawn in C++, not a style asset. Set XenoCore UI › Menu Button Class to your own child of it. See The main menu and its entries.

My replacement screen shows in the editor but the packaged game uses the old one

Your folder is not cooked. See step 5.

Tab strip runs off the screen

A tab list is using a tab button with a large Min Width. Use W_XenoCore_TabButton.

Going further