I know there are lots of questions on how to be able to make easy dialogs with minimal amount of dialog triggers (instead of create dialog item, set size, move/attach dialog item to dialog item, set dialog item text, set dialog item style ... this list goes on..). In addition, the information here (Helral's override method) is outdated and not efficient anymore. (but kudo's for it!)
Now I don't have a lot of time as I have exams coming up this week, so no cool pictures and other funny business, but I still wanted to get people started on how to smoothly edit all Blizzard UI and how to create templates so you can use those to easily create new dialogs (items).
Introduction to the UI editor
To create a template dialog, you first need to understand how XML works. There are many tutorials on the internet. It's not hard, and all the information is relevant to the UI editor. You should be able to learn it in an evening. Just be sure that you know what elements and attributes are and how to properly open/close these trees.
Anyways! The UI editor is basically a compilation of all of Blizzards UI info. It is the exact same you find in the ingame UI editor. You will need to understand how both work to be able to work efficiently. Let's just start at the beginning. In the UI editor, you will find many files or layouts. These are all read-only and you cannot edit them at all. Within these files you will find many frames, images, labels and so on. How the structure exactly works will become clear as you create your first dialog with items using the UI editor.
Creating a custom dialog item
Now, before I begin (and this is the last time I will delay) I want to talk about resolution and aspect ratios for a moment. Starcraft II is based on a 1600x1200 resolution. This means that any dialog wider than 1600 will fall out of the screen if the user's resolution width is smaller than 1600. Therefore, your dialogs may never exceed 1600 or it will result in overlapping for smaller resolution. This does indeed mean that there will be gaps for larger resolutions, and we will all have to deal with this until someone comes with a solution.
So, for those who want to create completely custom UIs, I strongly recommend you to set up multiple dialogs. I will explain this later this month. For the purposes of this tutorial however, just create a dialog using triggers, set it to full screen and set it to a variable. We'll call it GlobalDialog. We do not create dialogs using the UI editor. We use the UI editor to create templates from which we can copy dialog items into dialogs.
Create a layout in the UI editor (Ctrl+L) and name it CustomUI. Copy the following XML code and paste it between <Desc></Desc>:
Save the project. You will find that that your layout now has content in the tree view!
Let's go over this code. I am assuming you know how XML works. It's really simple and nothing to brag about. We have created three frames. DialogFrame is our invisible frame that we will use to mark the anchor for the children frames. See it as a container, with inside labels and images (and some other stuff). DialogImage is our image. No image has been set, we do this in triggers. The height, width and positioning however, has been already set. It will be 25x25 and will be anchored to DialogFrame's Top,Left with offsets 5,5. Note that $parent basically tells it to anchor to its parent. Easy!
DialogBody works the exact same as DialogImage, but I added the Style element. Let's go off on a tangent.
Open the Text editor. Go to Font Styles and add a style. Name it "DialogBody". Give it some style. You may see the connection here. DialogBody will use the "DialogBody" font style in its text.
Now that our UI template is set up, we can go ahead and create a copy. There are two very important triggers that we will use: "Create Dialog Item From Template" and "Hookup Dialog Item". Create a trigger with Map Initialization and add the action "Create Dialog Item From Template" and create the dialog item variable DialogFrame.
Then, we will edit the templates children. Use "Hookup Dialog Item".
Dialog-HookupanexistingImagecalledDialogImageindialogitemDialogFrameDialog-Set(Lastcreateddialogitem)imagetoAssets\Textures\btn-unit-terran-marine.ddsfor(ActivePlayers)Dialog-HookupanexistingLabelcalledDialogBodyindialogitemDialogFrameDialog-Set(Lastcreateddialogitem)textto"This is a marine. There are many li..."for(ActivePlayers)
We don't necessarily need to give these items variables unless you plan to change them later on.
Editing Blizzard UI
This is as far as I will write my tutorial for now. I'll add more next week.
Edit Blizzard UI
How to use the ingame UI editor
Quick notes for those who can figure it out themselves and/or can't wait and love badly formatted scribblings:
Edit blizzard UI: Hookup Standard Blizzard UI
Dialog - Hooks up an existing Panel in the standard UI called "UIContainer/ConsoleUIContainer/CommandPanel/CommandButton00"
edit size and positioning. Set CommandPanel to fullscreen and you can individually move around all command buttons. This works for everything in the blizzard UI (such as the minimap). GameUI works with templates, but hookups are runtime so the above will work.
You can't create new unapproved types in your CustomUI layout. I don't know them all, but approved examples are Label, Image, Panel, Button, Slider.
Unapproved examples are all specific panel types "LogMessagePanel", "SocialManagementPanel". Some other stuff too. For a complete list of all the field/value for each type, see http://www.sc2mapster.com/paste/7445/
In ingame UI editor, I don't know how to move stuff but I don't really mind. Frame Tree is edittime, Desc Tree is runtime. Or something. Press F11 to show anchors neatly. Press F10 for dimension and parent information. I recommend selecting frames using the trees. Trees.