How to recreate this editor style?

Unity Engine
1

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!

2

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.

3

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 :stuck_out_tongue:

4

I would say it is quite custom, but see for yourself, the Post Processing stack is open source:

5 
GUILayout.BeginVertical(EditorStyles.helpBox);
{

    //Foldouts
    GUILayout.BeginHorizontal(EditorStyles.helpBox);
    {
        EditorGUILayout.Foldout(false, "The Title");
        GUILayout.FlexibleSpace();
        GUILayout.Button(CustomStyle)
    }
    GUILayout.BeginHorizontal(EditorStyles.helpBox);
    {
        EditorGUILayout.Foldout(false, "The Title");
        GUILayout.FlexibleSpace();
        GUILayout.Button(CustomStyle)
    }

//Toggles
    GUILayout.BeginHorizontal(EditorStyles.helpBox);
    {
        EditorGUILayout.Toggle(false, "The Title");
        GUILayout.FlexibleSpace();
        GUILayout.Button(CustomStyle)
    }
}
GUILayout.EndVertical();

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.

1 Like