> For the complete documentation index, see [llms.txt](https://irrelevant-pixel.gitbook.io/irrelevant-pixel/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://irrelevant-pixel.gitbook.io/irrelevant-pixel/getting-to-know-how-to-use-it/stylizing-interactive-widgets.md).

# 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 <mark style="color:blue;">**Class Defaults**</mark>. 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.

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2F7jwGHxwsoEBK03upLViw%2FOptionBase%20class%20defaults.png?alt=media&amp;token=6b7aae80-c58b-4805-a5dc-2de8790a3439" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In this entire project, if you see the prefix `(C)` - it means this particular thing is directly involved in Common Styling.
{% endhint %}

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`.

{% hint style="danger" %}
While you do this **Styling** in `OptionBase`, <mark style="color:red;">do not</mark> switch to the tabs of those particular widgets:  <mark style="color:red;">**`WBP_MainMenu`**</mark> and <mark style="color:red;">**`WBP_GameMenu`**</mark>.

Such particular action <mark style="color:red;">crashes the Editor</mark> most of the time. Instead, <mark style="color:green;">just run the game</mark>, and after that you can (most of the time) switch to those widgets.&#x20;

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

{% hint style="success" %}
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:

![](https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FPNiYQc9wS44DodqXHcxL%2Fshiftclick%20copy.png?alt=media\&token=57e99334-7b78-427a-88f3-0780a47c1be7) ![](https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FB9hsMeY1ZVejcVMIBWAE%2Fshiftclickpaste.png?alt=media\&token=fa4fd17b-dc89-4db4-a12c-4e8c9e772955)
{% endhint %}

***

In the section `(Common) Stylizing` there is also a <mark style="color:yellow;">checkbox</mark>, 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.&#x20;

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

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FmcKkLp47mP3iUifWzZcz%2FKeybinder%20class%20defaults%20common%20styling.png?alt=media&amp;token=60635e6b-3817-4d6c-8d1c-8a01cc1b2fb8" alt=""><figcaption></figcaption></figure>

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` <mark style="color:green;">**applied**</mark> and adjust some of those `(C)` properties of the parent.

***

#### <mark style="color:green;">In this chapter, we've covered the basic idea of how to deal with styling for those widgets.</mark>