How to recreate this editor style?

Unity's Post Processing pack has an interesting UI, mainly the way they categorize settings like so:



Does anyone have ideas on how to achieve this kind of look?

Thanks!

 

I don't think they have a quick reference for that particular one. Could be wrong though.

You can always write your own that using a Box and a couple of Toggles.

 

Thing is, this kind of style is also used for Particle System Editor:



I've also seen other Asset Store publishers use this kind of style.

I think there's some Editor Style hidden away inside of Unity

 

I would say it is quite custom, but see for yourself, the Post Processing stack is open source:
https://github.com/Unity-Technologi...rocessing/Editor/PostProcessingModelEditor.cs

 

Code (CSharp):

1.  
2. GUILayout.BeginVertical(EditorStyles.helpBox);
3. {
4.  
5.     //Foldouts
6.     GUILayout.BeginHorizontal(EditorStyles.helpBox);
7.     {
8.         EditorGUILayout.Foldout(false, "The Title");
9.         GUILayout.FlexibleSpace();
10.         GUILayout.Button(CustomStyle)
11.     }
12.     GUILayout.BeginHorizontal(EditorStyles.helpBox);
13.     {
14.         EditorGUILayout.Foldout(false, "The Title");
15.         GUILayout.FlexibleSpace();
16.         GUILayout.Button(CustomStyle)
17.     }
18.  
19. //Toggles
20.     GUILayout.BeginHorizontal(EditorStyles.helpBox);
21.     {
22.         EditorGUILayout.Toggle(false, "The Title");
23.         GUILayout.FlexibleSpace();
24.         GUILayout.Button(CustomStyle)
25.     }
26. }
27. GUILayout.EndVertical();
28.  

That psuedo code above gives you the basic format you are looking for. This is actually a mix of the two styles. The first image you showed did not have the main container wrapping all of the. The second image did, which creates that multi-tone look when a section is open. If you do not want the main wrapper, just remove the Vertical layout.

The main vertical layouts EditorStyles.helpBox is not 100% accurate. You would need to copy this style and set all the padding values to 0 and use that style. This allows the inner horizontal boxes to be directly against the edge of this box creating

The horizontal layouts are not actually supposed to use a help box but its the "closest" style. You would need to create a copy of the EditorStyles.helpBox style and set the margins to be 0 and use this style for the horizontal layouts. This is also needed to make these containers stretch the full width of their parents creating the multi-tone look.

The Toggles are using a custom style as well to give them the circle checked look, and the menu drop down on the right of each one is just a built in editor style as well.

Hope that helps.