Stylizing Interactive Widgets

Here you will get the basic understanding of Common Styling

Go to the folder Widgets/EssentialSubParts. There you'll find WBP_OptionBase, open it. This is the Base Widget Class for all four Modular Options we've covered in the previous chapters. And go straight ahead to the Event Graph.

Select Class Defaults. There will be the section called (Common) Stylizing, filled with the most basic things used to make appearances for all those widgets you already know.

In this entire project, if you see the prefix (C) - it means this particular thing is directly involved in Common Styling.

Play with those properties and see the results in the game, or in most cases, you could see it right in the Editor 's Widget Designer of certain widgets, like in your WBP_PageExamples or WBP_Options.

While you do this Styling in OptionBase, do not switch to the tabs of those particular widgets: WBP_MainMenu and WBP_GameMenu.

Such particular action crashes the Editor most of the time. Instead, just run the game, and after that you can (most of the time) switch to those widgets.

Or better don't even open those high-level widgets at the first place.

Useful hint:

In case you did not know, in Unreal Engine Editor you can copy-paste very quickly any field or property by Shift+RightClick -> Shift+LeftClick. In situations like when you styling those brushes, once you are just styled the Normal brush, you then want to copy-paste it to the others:

In the section (Common) Stylizing there is also a checkbox, but this one intended for rather 'external' usage by derived widgets, then directly in the OptionBase. So go to the folder where Modular Options are, and open one of the four.

The same way in the Class Defaults you will find this section of the parent:

Uncheck this checkbox and see the effect in the game.

Now this Modular Option uses appearance directly from the Editor's slate interface.

So with a simple action like that, you can detach one of the Modular Widgets entirely from the rest. It might be useful, let's say when you want all widgets to maintain a unified look but you want Keybinders to be different. Or even you can keep Common Styling applied and adjust some of those (C) properties of the parent.

In this chapter, we've covered the basic idea of how to deal with styling for those widgets.

Last updated