# Advanced Topics

### Vibe's file structure in the Assets folder

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2F9B2M7LtKoqZpvScDCcFK%2Fimage.png?alt=media&#x26;token=c705c412-6a52-4d5a-a6a1-8aabdad07c15" alt=""><figcaption></figcaption></figure>

**Vibe** folder -> Contains Core and Optional files. These are the same in every project you import Vibe into.

**Vibe / Core** folder -> Contains scripts and other files required for Vibe to function. Do not modify the contents of this folder.

**Vibe / Optional** folder -> Contains Examples and other optional files. Feel free to modify or delete it altogether.

**Vibe Project Files** folder -> Contains definitions specific to your project. This includes your settings, custom inspectors you created, etc.



### Adding Styles to Properties, Buttons and Groups

Styles change the look of their parent Element. If you make a Style a child of a Property or a Button, the Style will apply its effect to its parent.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FqCFbeqpJb5pVKafqe83V%2Fimage.png?alt=media&#x26;token=78063f2d-d319-4730-a35d-5d7a769b857c" alt=""><figcaption><p>A Color Style is a child of a Property "Origin". The Style is applied only to that Property.</p></figcaption></figure>

If you make a Style a child of a Group, the Style will be applied to the Group itself and all children of that Group.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FQ9lZVg3CSBlnmKaelEtF%2Fimage.png?alt=media&#x26;token=722a49b8-28bd-4466-9d83-c4f99a7a745e" alt=""><figcaption><p>A Color Style is a child of a Group. The Style is applied to all elements inside the Group, and the Group itself.</p></figcaption></figure>



### Using Style Conditions

Conditions are used to decide whether their parent Style should be applied.&#x20;

A Style is applied if it has no Conditions, or all Conditions are satisfied.&#x20;

In the example below, the "Origin" property is disabled in Play Mode

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FbZzgwjrs4zbfizOI0A0T%2Fimage.png?alt=media&#x26;token=1e46ec0f-4779-4160-bb7e-7e45c924d699" alt=""><figcaption><p>We are in Play Mode. The Play Mode Condition returns True - the Disabled Style is applied. This disables the "Origin" Property in the Inspector.</p></figcaption></figure>

### Renaming Classes, Properties

When you create a Custom Inspector for a components using Vibe, it saves names of classes and their members (properties, methods) to retrieve it later. This means the references can potentially be lost when you rename them in your code.



Vibe will automatically try to fix any such occurrences in the background. There are some good practices to make it failproof:

1. Don't rename a class and its members at the same time. Rename the class, select it in the Inspector for Vibe to automatically update the saved config, then rename the members.
2. When renaming properties, use Unity's [FormerlySerializedAs ](https://docs.unity3d.com/ScriptReference/Serialization.FormerlySerializedAsAttribute.html)attribute.



Troubleshooting:

*   **If you lose a reference to your class**, you can easily create a new Custom Inspector and one-click copy the old settings:



    <figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FLCLrWeWp2rC2QSuBTHHT%2Fimage.png?alt=media&#x26;token=3c6e7d7a-889f-4093-97d1-26a32bbbf96f" alt=""><figcaption><p>Use this option to copy inspector element hierarchy from another saved custom inspector.</p></figcaption></figure>



* **If you lose a reference to a property or a method**, you can select it under its new name or delete it from the Inspector altogether.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FiS7svqofPQ3rpgbs6m8S%2Fimage.png?alt=media&#x26;token=35910cba-4572-48d7-b270-911f4bc36319" alt=""><figcaption></figcaption></figure>





### Deleting a Custom Inspector created with Vibe

If you decide you no longer want to use the custom inspector created with Vibe, take the following steps:

1. Open the Inspector Builder by selecting "Edit Inspector with Vibe" from the component's Context menu.
2. In the Inspector Builder, select the "Reset to Default" option.&#x20;

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FW91S0bWCCUzeTUP7qZVJ%2Fimage.png?alt=media&#x26;token=3e6901f4-4048-44ca-9496-13d5b23d7de2" alt=""><figcaption></figcaption></figure>



### Using Vibe with Odin or other Custom Inspectors

If your project contains other Custom Inspector scripts or assets (i.e. Odin, Naughty Attributes), these will be used by default.

When you create a new Custom Inspector using Vibe, it will become the default custom inspector for that specific class.

If you decide you no longer want to use Vibe for that class, follow these steps:

1. Open Vibe's Inspector Builder.
2. Select "Reset to Default"
3. (If using Odin) Go to Tools > Odin > Preferences → Editor Types Tab → Update Editors button to re-enable Odin's custom inspector for this class.

{% hint style="info" %}
There is currently no way to use Odin features in Vibe's Custom Inspector.
{% endhint %}





### Adding Custom Icons

1. Add icons to the Vibe/Optional/Icons folder.
2. (Optional) Copy import settings from an original Vibe icon to make sure they look good.
3. Find "**VibeIconDatabase**" Scriptable Object in your project and select it.
4. In the Inspector, click on the Context Menu (three dots, top right corner) and select the "Scan Asset Folder for Icons" option.
5. That's it!



### Creating a Custom Inspector for Pure C# Class

Vibe can be used to create a Custom Inspector for Pure C# classes, like the one below:

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FikWygdTfQv5nePsl63Zp%2Fvibe-example-image-02-pure-c-sharp.png?alt=media&#x26;token=736332d0-b767-48d7-9ece-4019bb08d270" alt="" width="277"><figcaption></figcaption></figure>

To do do it, simply click on "Edit Inspector" on a Property that contains a Pure C# object.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FU4AZEbiFdF2mOKVgs3WA%2Fedit.png?alt=media&#x26;token=8a72aa87-d7e2-460e-815f-45de222a5ea3" alt="" width="402"><figcaption></figcaption></figure>

A New Inspector Builder will open, allowing you to customize the inspector.

<figure><img src="https://671643331-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHHrpueWyxbTTXBL0oWJO%2Fuploads%2FYapgLu8FuFliCYiZpZ9R%2Fimage.png?alt=media&#x26;token=277cc5c8-1bbc-4214-b0ad-fe9aa3ea8c3c" alt="" width="411"><figcaption></figcaption></figure>

Once you're finished, save your changes. From now on, everywhere where this pure C# class is displayed by Vibe Inspector, it will be presented with this newly defined look.
