Configuring the UI: System Menus

[DarN]

Configuring the UI :: System Menus

In this article I will introduce you to the System Menus and the options available for tweaking them.

If you haven't read it yet, a useful intro to this would be "Configuring the UI". These articles are best read in sequence, as I tend to elaborate on new settings as we get to them.

Article 1: Main Menu

Config file: system_config.xml

The System Menus cover all menus reachable from the Main Menu and the Pause Menu in-game. The exception is the Credits Menu which has no settings.

So here you have the Load/Save Menus and the Options Menu with it's sub menus.


Labels

Let's start with the labels. Here's the relevant section:

Code

GeSHi (xml):
<!--======================================== Global ========================================-->
	<!-- Labels (def. 3,0,0,0,200) -->
	<_lfont> 3 </_lfont>
	<_lred> 0 </_lred>
	<_lgreen> 0 </_lgreen>
	<_lblue> 0 </_lblue>
	<_lalpha> 200 </_lalpha>
 

The "Global" comment at the top is there because all labels in these menus use these settings. Even some other menus use them actually.
This is the standard lineup for a text entry in these configs; which font to use, it's color, and it's transparency. Some also have position info (x, y) settings, and we tackle those later in the article.
I won't go into details on what the parameters for these are here, as those are covered in the previous article on the Main Menu.

Basically, I define a label as being the text preceding any control (i.e explaining what that control does). Call it the setting's name if you will.

We'll use the Audio Menu for this example:


There's your default look. You'll find a lot of text in the ui with these very same settings; black text with a hint of transparency. Adding a slight bit of alpha (or lowering opaqueness if you will) softens the text up a bit.

So what would it look like with Oblivions default parameters you wonder? Let's find out.

First off, Oblivion is very fond of font 1, as that is very big and will be visible on your 15 inch tv set from across the room where your couch is located... Let's set the font to 1:

Code

GeSHi (xml):
<_lfont> 1 </_lfont>

Lovely:


I've left the custom font 1 to default for this one. You'll notice the menu expanded to fit the new font to some degree. The entire UI will be overhauled to do this properly in the future, but for now be advised that changing any font to a larger one than the default DarNified size, will most likely break the layout in some form or another. I'm doing this here only for illustrative purposes.

Now for the color. The standard Oblivion brown color is the same color you see in the buttons in the above image. Here are the settings for that:

Code

GeSHi (xml):
<_lred> 117 </_lred>
<_lgreen> 59 </_lgreen>
<_lblue> 33 </_lblue>

If you'd like to experiment with colors, but don't know which values to use, you can get a free program called Paint .Net , which will show you these numbers while letting you use a color wheel:


Finally, let's set the alpha to max as per Oblivion defaults:

Code

GeSHi (xml):
<_lalpha> 255 </_lalpha>

And voila - our labels in their Bethesda glory:


Controls

Next section in the config is the already covered Main Menu, so we skip that and end up on the controls section:

Code

GeSHi (xml):
<!--======================================= Controls =======================================-->
	<!-- Number of items in list (def. 20, max. 20) -->
	<_clinumitems> 20 </_clinumitems>
	<!-- Y Offset for bottom line graphic in list (def. 0) -->
	<_clboffset> 0 </_clboffset>
	<!-- Controls list item labels (def. 2,0,0,0,200,0,-4) -->
	<_clifont> 2 </_clifont>
	<_clired> 0 </_clired>
	<_cligreen> 0 </_cligreen>
	<_cliblue> 0 </_cliblue>
	<_clialpha> 200 </_clialpha>
	<!-- Controls list labels offsets - Handy if you make your own fonts... -->
	<_clixoffset> 0 </_clixoffset>
	<_cliyoffset> -4 </_cliyoffset>

The settings here are for page two of the Controls Menu, which let's you assign the different hotkeys used in the game.

The default look:


We start with the number of items in the list. The default suits the font choice and let's us see all of them on one page, however Oblivion has a thing for using 6 items in it's lists, so that's what we'll use:

Code

GeSHi (xml):
<_clinumitems> 6 </_clinumitems>

6 items:


The menu now has a scrollbar. What's not apparent in this image is that the items themselves are not expanded height wise, so they appear separate from the text. This will be dealt with (sigh - I'm making more work for my self here ).

The next setting - "_clboffset", will move the bottom line up or down according to what you set it to. We'll leave it for this one, as it looks ok as is.
Any setting with "offset" in the name will be meant for this kind of tweak. Ie. it will move the element in question a number of pixels in a direction from the designed location. You can also use negative numbers for these. If you need something to move left or up, use negative numbers. Down and right will be positive.

Next up is the labels in the list. We already know what these do, so let's try a setup that fits our new item number a little better:

Code

GeSHi (xml):
	<_clifont> 3 </_clifont>
	<_clired> 51 </_clired>
	<_cligreen> 79 </_cligreen>
	<_cliblue> 142 </_cliblue>
	<_clialpha> 255 </_clialpha>

We upped font size a notch by using 3 instead of 2. This color setup is something you'll see by default in several menus. The headers in the Inventory Menu uses this for instance.

We're now blue:


Here you see clearly what I alluded to on the item size earlier.

The next settings are for nudging the text inside the items around. Like the comment in the code says; it's handy when making your own fonts. Making fonts in the Font Generator is something I'll get to in a later article.

Well, we already know from the previous image that the label text is outside the item boundries, so let's make an effort to at least get them inside until the UI dude fixes this mess!

After some trial and error, this is what the UI dude has come up with:

Code

GeSHi (xml):
	<_clixoffset> 0 </_clixoffset>
	<_cliyoffset> -38 </_cliyoffset>

I left the horizontal position at the designed position, as that's fine.

Final look:



Video

The video section only has one setting to adjust, which is the number next to the sliders that have them. You already know where the labels are configured, right?

Video section:

Code

GeSHi (xml):
<!--======================================== Video =========================================-->
	<!-- Where the slider quantity number should go (def. &left;) -->
	<_vqtypos> &left; </_vqtypos> <!-- choices: &left;, &right; and &center; -->

The choices available are found in the comment by the setting, so I'll just show the different positions here.

Left (default):


Right:


Center:



Audio

The Audio section has the same setting as the video section does, only this one takes effect on the Audio Menu (duh). I made it separate in case you'd like these numbers in other positions here. We'll skip the screens for this one.


Load/Save

This section covers both the Load and Save Menus:

Code

GeSHi (xml):
<!--====================================== Load/Save =======================================-->
	<!-- List text (def. 3,117,59,33,200,0,-2) -->
	<_lsifont> 3 </_lsifont>
	<_lsired> 117 </_lsired>
	<_lsigreen> 59 </_lsigreen>
	<_lsiblue> 33 </_lsiblue>
	<_lsialpha> 200 </_lsialpha>
	<_lsixoffset> 0 </_lsixoffset>
	<_lsiyoffset> -2 </_lsiyoffset>
	<!-- Game description text (def. 3,0,0,0,200) -->
	<_lsgdfont> 3 </_lsgdfont>
	<_lsgdred> 0 </_lsgdred>
	<_lsgdgreen> 0 </_lsgdgreen>
	<_lsgdblue> 0 </_lsgdblue>
	<_lsgdalpha> 200 </_lsgdalpha>
	<!-- Help text on top of page (def. 3,117,59,33,255) -->
	<_lshfont> 3 </_lshfont>
	<_lshred> 117 </_lshred>
	<_lshgreen> 59 </_lshgreen>
	<_lshblue> 33 </_lshblue>
	<_lshalpha> 255 </_lshalpha>

These three sub sections all deal with text settings, so should be familiar by now.

Here's an image showing the different "hot spots":


I'll leave it up to you to tweak this if you want to!

Happy tweaking.