User:Raiguard/Tutorial:Modding tutorial/GUI/Style guide

This style guide is designed to give you an overview of the precepts and specific element styles used to create 0.18-esque GUIs. This guide is not to be taken as gospel - the contents are merely suggestions to help you improve your interfaces.

This style guide assumes you know how to create GUIs, assign styles to elements, and edit styles. If you do not know these things, this guide won't be of much use to you.

Window

Windows are created using standalone_inner_frame_in_outer_frame. For windows that contain multiple sub-windows (e.g. most windows that hold a character inventory) outer_frame is used as the outer frame and inner_frame_in_outer_frame is used for each internal window.

Titlebar

Each window should usually have a titlebar. Setting caption on a frame element will automatically create the titlebar for you. In cases where all you need is a title, this is fine.

However, for non-dialog windows, you will need to add a close button to the titlebar. This necessitates creating your own titlebar instead of using the frame's built-in one. For this reason, I usually never set caption on frames.

Titlebars are created using a simple horizontal flow with no special edits - the default style is perfect for this case.

• The title text is a label using the frame_title style.
• The "drag handle" is an empty-widget element with the draggable_space_header style. You will need to apply horizontally_stretchable to the element's style, and set the height to 24. If adding a close button or other frame action button, set the right_margin to 4.
• Close buttons, or any other frame action buttons you are adding, are created with sprite-button using the frame_action_button style. The default sprite should be colored (RGB) 227,227,227, and the hovered and clicked sprites should be colored (RGB) 29,29,29. Custom frame action sprites should be 26x26 with a 3px padding around the edges, making for a file size of 32x32. As of the time of writing, the base game does not use mipmaps for these icons, but it would probably be a good idea to add them to your own icons just in case.
• drag_target should be set for both the "drag handle" and the title text, to keep consistency with the base game.
• If your window is not in screen or is otherwise non-draggable, DO NOT add a drag handle. Instead, use an empty-widget with horizontally_stretchable enabled.

Content frame

The game's GUI style dictates that most windows should have an inner content frame, seen in the above screenshot as the light grey pane. For this, use inside_shallow_frame_with_padding, or inside_shallow_frame if you wish to manage the paddings yourself.

TO BE CONTINUED