Step 5 Theming

Step 5: Theming & Reskin

Everything the player sees is a UMG widget resolved through one Data Asset - UOkTheme. Reskinning means duplicating widgets, restyling them and pointing a theme copy at the duplicates. No C++ anywhere in the process.

How the pieces fit

UOkSettings.DefaultTheme ──► UOkTheme (DA_OkThemeDefault)
                              ├─ ToggleRowClass    ─► WBP_OkRow_Toggle
                              ├─ SliderRowClass    ─► WBP_OkRow_Slider
                              ├─ OptionRowClass    ─► WBP_OkRow_Option
                              ├─ TriggerRowClass   ─► WBP_OkRow_Trigger
                              ├─ KeyBindRowClass   ─► WBP_OkRow_KeyBind
                              ├─ CategoryPageClass ─► WBP_OkCategoryPage
                              ├─ TabButtonClass    ─► WBP_OkTabButton
                              ├─ DialogClass       ─► WBP_OkDialog
                              ├─ CountdownDialogClass ─► WBP_OkCountdownDialog
                              ├─ FpsCounterClass   ─► WBP_OkFpsCounter
                              ├─ KeyIconLibrary    ─► DA_OkKeyIcons
                              └─ NavigateSound / AcceptSound / BackSound

The menu widget resolves its theme from its own Theme property first, then Project Settings → Plugins → OptiKit → Default Theme. The shipped default menu leaves Theme empty, so the project setting drives it out of the box - swap the theme there and the whole menu follows. The ThemeProof menu pins its own theme on the widget: the per-widget override in action.

Reskin in five steps

1. Duplicate the WBPs you want to change from /OptiKit/Theme/ into your project content. Duplicate DA_OkThemeDefault too.
2. Restyle the copies freely - layout, colors, fonts, animations. Keep the BindWidget names (below); everything else is yours.
3. Point your theme copy's class fields at your WBP copies.
4. Assign the theme: project-wide in Project Settings, or per-menu on the widget's Theme property.
5. Validate: Tools → OptiKit → Check Settings Catalog flags anything your theme cannot render.

You can replace as little as one widget - unchanged fields keep pointing at the shipped WBPs. The plugin ships a second complete skin (/OptiKit/ThemeProof/) as proof; the automation suite drives both skins through the same interactions.

Example Theme Default

Example Theme Prof

Example widgets in the designer

Runtime-populated areas ship with real, hierarchy-visible example children (tabs, a category page, one row per type) so the designer shows the menu as it will look. The slot layout (padding, size, alignment) you give the first example child carries onto every runtime-built tab, page and row. Looks come from the building-block WBPs; texts come from the catalog (Preview Label is designer-only).

BindWidget contracts

Required widgets fail the WBP compile when missing (better than a dead menu); optional ones can simply be left out.

Widget	Required	Optional
Toggle row	ValueCheckBox	LabelText, ModifiedDot
Slider row	ValueSlider	ValueText, LabelText, ModifiedDot
Option row	-	PreviousButton, NextButton, ValueText, LabelText, ModifiedDot
Trigger row	ActionButton	ActionText, LabelText, ModifiedDot
Key-bind row	PrimaryButton	SecondaryButton, key texts/icons, ResetButton, LabelText
Tab button	Button	Label
Dialog	ConfirmButton	CancelButton, AlternateButton, caption/title/message texts
Countdown dialog	ConfirmButton	CancelButton, SecondsText
Menu	-	everything (TabContainer, PageSwitcher, SearchBox, description texts, footer buttons, RestartNotice, DialogOverlay, device buttons)
FPS counter	-	FpsText

Built-in behavior: CancelButton closes the menu like the close keys, the active tab auto-disables so it reads as selected, and device buttons only show on key-bind pages. The C++ headers are the source of truth for the exact contracts.

Key icons & sounds

DA_OkKeyIcons maps keys to glyph textures for the key-bind rows (empty = key-name text fallback). Assign NavigateSound / AcceptSound / BackSound on the theme and the whole menu becomes audible, identical for mouse and gamepad; route them to the SC_OkUI sound class so the UI volume slider controls them.

Per-setting row override

A single definition can override its row class (UOkSettingDefinition.RowWidgetClass) without touching the theme - useful for one special row in an otherwise standard menu.

Next: Step 6: Your Own Settings