Creating Themes - Topics - Hag GUI for Cobra

Hag themes or "skins" consist of a folder containing a compiled theme file (e.g. "XP.bin") and several images that are used by Hag to draw complete GUI elements.

Themes must be placed in the themes\gui\ folder inside the hag base directory of any program that uses this unit.

Some themes may include a human-readable script file, e.g. "XP.bsd", that is used by the Hag Theme Compiler to create the compiled theme file. You can edit this file using any text editor, e.g. notepad, and use the Theme Compiler to create the binary theme file that Hag can use. The theme compiler can be found in the base hag directory.

Example Usage: ThemeCompiler.exe themes\gui\XP\XP.bsd

You do not have to redistribute the theme compiler or the theme .bsd script for a theme to work - only the compiled .bin file and images.

This is an example .bsd theme used by the Theme Compiler:

# -----------------------------------------------------------
# Theme Info
# -----------------------------------------------------------
$ Name = Example
$ Author = Author
$ Desc = This is an example theme
$ Version = 20100216
! Compatible = 2
# -----------------------------------------------------------



# -----------------------------------------------------------
# Notes
# -----------------------------------------------------------
# This theme data is compiled into binary - without a copy of
# the HAG Theme Compiler, editing it will have no effect.
#
# All colors should be given in length 3 or length 6 hex.
#
# e.g. 	#000 = black, #FFF = white, #F00 = red, #0F0 = green,
# 		#00F = blue, #FF0 = yellow, #F90 = orange,
#		#FFF = #FFFFFF, #000 = #000000, #123 = #112233
#
# Alpha should be given in range 0 to 255.
#
# See const.bsd in the directory of the HAG Theme Compiler for
# a list of accepted fontStyle and textAlignment constants,
# although note that some textAlignment styles are not always
# valid (e.g. radio buttons cannot be centered)
#
# Simple boolean and integer maths are supported (but don't go
# wild). To insert one string into another, use the format
# $ mystring = prefix[variable]suffix
# -----------------------------------------------------------



# -----------------------------------------------------------
# Local Theme Options (these aren't compiled)
# -----------------------------------------------------------
$ font = arial
! size_medium = 10
! size_small = 10

? any_aaliasing = FALSE
? button_aaliasing = any_aaliasing AND TRUE
? radiobutton_aaliasing = any_aaliasing AND FALSE
? checkbox_aaliasing = any_aaliasing AND FALSE
? dropdown_aaliasing = any_aaliasing AND FALSE
? tab_aaliasing = any_aaliasing AND TRUE
? listbox_aaliasing = any_aaliasing AND FALSE

# Recommended background colour for this theme: (235,233,237)
# -----------------------------------------------------------



# -----------------------------------------------------------
# Buttons (normal, hover, focus, active)
# -----------------------------------------------------------

? button = TRUE

$ button_normal_fontName = [font]
! button_normal_fontSize = size_medium
! button_normal_fontStyle = HAG_FONT_NORMAL
$ button_normal_fontColor_rgb = 000
! button_normal_fontColor_alpha = 255
! button_normal_textAlignment = HAG_TEXT_CENTER
? button_normal_textAAliasing = button_aaliasing

$ button_hover_fontName = [font]
! button_hover_fontSize = size_medium
! button_hover_fontStyle = HAG_FONT_NORMAL
$ button_hover_fontColor_rgb = 000
! button_hover_fontColor_alpha = 255
! button_hover_textAlignment = HAG_TEXT_CENTER
? button_hover_textAAliasing = button_aaliasing

$ button_focus_fontName = [font]
! button_focus_fontSize = size_medium
! button_focus_fontStyle = HAG_FONT_NORMAL
$ button_focus_fontColor_rgb = 000
! button_focus_fontColor_alpha = 255
! button_focus_textAlignment = HAG_TEXT_CENTER
? button_focus_textAAliasing = button_aaliasing

$ button_active_fontName = [font]
! button_active_fontSize = size_medium
! button_active_fontStyle = HAG_FONT_NORMAL
$ button_active_fontColor_rgb = 000
! button_active_fontColor_alpha = 255
! button_active_textAlignment = HAG_TEXT_CENTER
? button_active_textAAliasing = button_aaliasing

$ button_disabled_fontName = [font]
! button_disabled_fontSize = size_medium
! button_disabled_fontStyle = HAG_FONT_NORMAL
$ button_disabled_fontColor_rgb = 777
! button_disabled_fontColor_alpha = 255
! button_disabled_textAlignment = HAG_TEXT_CENTER
? button_disabled_textAAliasing = button_aaliasing



# -----------------------------------------------------------
# Progress Bars
# -----------------------------------------------------------

# This element has no styles that can be applied to it.



# -----------------------------------------------------------
# Radio Buttons (normal, hover, active, disabled)
# -----------------------------------------------------------

? radiobutton = TRUE

$ radiobutton_normal_unselected_fontName = [font]
! radiobutton_normal_unselected_fontSize = size_small
! radiobutton_normal_unselected_fontStyle = HAG_FONT_NORMAL
$ radiobutton_normal_unselected_fontColor_rgb = 000
! radiobutton_normal_unselected_fontColor_alpha = 255
! radiobutton_normal_unselected_textAlignment = HAG_TEXT_LEFT
? radiobutton_normal_unselected_textAAliasing = radiobutton_aaliasing

$ radiobutton_hover_unselected_fontName = [font]
! radiobutton_hover_unselected_fontSize = size_small
! radiobutton_hover_unselected_fontStyle = HAG_FONT_NORMAL
$ radiobutton_hover_unselected_fontColor_rgb = 000
! radiobutton_hover_unselected_fontColor_alpha = 255
! radiobutton_hover_unselected_textAlignment = HAG_TEXT_LEFT
? radiobutton_hover_unselected_textAAliasing = radiobutton_aaliasing

$ radiobutton_active_unselected_fontName = [font]
! radiobutton_active_unselected_fontSize = size_small
! radiobutton_active_unselected_fontStyle = HAG_FONT_NORMAL
$ radiobutton_active_unselected_fontColor_rgb = 000
! radiobutton_active_unselected_fontColor_alpha = 255
! radiobutton_active_unselected_textAlignment = HAG_TEXT_LEFT
? radiobutton_active_unselected_textAAliasing = radiobutton_aaliasing

$ radiobutton_disabled_unselected_fontName = [font]
! radiobutton_disabled_unselected_fontSize = size_small
! radiobutton_disabled_unselected_fontStyle = HAG_FONT_NORMAL
$ radiobutton_disabled_unselected_fontColor_rgb = 777
! radiobutton_disabled_unselected_fontColor_alpha = 255
! radiobutton_disabled_unselected_textAlignment = HAG_TEXT_LEFT
? radiobutton_disabled_unselected_textAAliasing = radiobutton_aaliasing

$ radiobutton_normal_selected_fontName = [font]
! radiobutton_normal_selected_fontSize = size_small
! radiobutton_normal_selected_fontStyle = HAG_FONT_NORMAL
$ radiobutton_normal_selected_fontColor_rgb = 000
! radiobutton_normal_selected_fontColor_alpha = 255
! radiobutton_normal_selected_textAlignment = HAG_TEXT_LEFT
? radiobutton_normal_selected_textAAliasing = radiobutton_aaliasing

$ radiobutton_hover_selected_fontName = [font]
! radiobutton_hover_selected_fontSize = size_small
! radiobutton_hover_selected_fontStyle = HAG_FONT_NORMAL
$ radiobutton_hover_selected_fontColor_rgb = 000
! radiobutton_hover_selected_fontColor_alpha = 255
! radiobutton_hover_selected_textAlignment = HAG_TEXT_LEFT
? radiobutton_hover_selected_textAAliasing = radiobutton_aaliasing

$ radiobutton_active_selected_fontName = [font]
! radiobutton_active_selected_fontSize = size_small
! radiobutton_active_selected_fontStyle = HAG_FONT_NORMAL
$ radiobutton_active_selected_fontColor_rgb = 000
! radiobutton_active_selected_fontColor_alpha = 255
! radiobutton_active_selected_textAlignment = HAG_TEXT_LEFT
? radiobutton_active_selected_textAAliasing = radiobutton_aaliasing

$ radiobutton_disabled_selected_fontName = [font]
! radiobutton_disabled_selected_fontSize = size_small
! radiobutton_disabled_selected_fontStyle = HAG_FONT_NORMAL
$ radiobutton_disabled_selected_fontColor_rgb = 777
! radiobutton_disabled_selected_fontColor_alpha = 255
! radiobutton_disabled_selected_textAlignment = HAG_TEXT_LEFT
? radiobutton_disabled_selected_textAAliasing = radiobutton_aaliasing



# -----------------------------------------------------------
# CheckBoxes (normal, hover, active, disabled)
# -----------------------------------------------------------

? checkbox = TRUE

$ checkbox_normal_unselected_fontName = [font]
! checkbox_normal_unselected_fontSize = size_small
! checkbox_normal_unselected_fontStyle = HAG_FONT_NORMAL
$ checkbox_normal_unselected_fontColor_rgb = 000
! checkbox_normal_unselected_fontColor_alpha = 255
! checkbox_normal_unselected_textAlignment = HAG_TEXT_LEFT
? checkbox_normal_unselected_textAAliasing = checkbox_aaliasing

$ checkbox_hover_unselected_fontName = [font]
! checkbox_hover_unselected_fontSize = size_small
! checkbox_hover_unselected_fontStyle = HAG_FONT_NORMAL
$ checkbox_hover_unselected_fontColor_rgb = 000
! checkbox_hover_unselected_fontColor_alpha = 255
! checkbox_hover_unselected_textAlignment = HAG_TEXT_LEFT
? checkbox_hover_unselected_textAAliasing = checkbox_aaliasing

$ checkbox_active_unselected_fontName = [font]
! checkbox_active_unselected_fontSize = size_small
! checkbox_active_unselected_fontStyle = HAG_FONT_NORMAL
$ checkbox_active_unselected_fontColor_rgb = 000
! checkbox_active_unselected_fontColor_alpha = 255
! checkbox_active_unselected_textAlignment = HAG_TEXT_LEFT
? checkbox_active_unselected_textAAliasing = checkbox_aaliasing

$ checkbox_disabled_unselected_fontName = [font]
! checkbox_disabled_unselected_fontSize = size_small
! checkbox_disabled_unselected_fontStyle = HAG_FONT_NORMAL
$ checkbox_disabled_unselected_fontColor_rgb = 777
! checkbox_disabled_unselected_fontColor_alpha = 255
! checkbox_disabled_unselected_textAlignment = HAG_TEXT_LEFT
? checkbox_disabled_unselected_textAAliasing = checkbox_aaliasing

$ checkbox_normal_selected_fontName = [font]
! checkbox_normal_selected_fontSize = size_small
! checkbox_normal_selected_fontStyle = HAG_FONT_NORMAL
$ checkbox_normal_selected_fontColor_rgb = 000
! checkbox_normal_selected_fontColor_alpha = 255
! checkbox_normal_selected_textAlignment = HAG_TEXT_LEFT
? checkbox_normal_selected_textAAliasing = checkbox_aaliasing

$ checkbox_hover_selected_fontName = [font]
! checkbox_hover_selected_fontSize = size_small
! checkbox_hover_selected_fontStyle = HAG_FONT_NORMAL
$ checkbox_hover_selected_fontColor_rgb = 000
! checkbox_hover_selected_fontColor_alpha = 255
! checkbox_hover_selected_textAlignment = HAG_TEXT_LEFT
? checkbox_hover_selected_textAAliasing = checkbox_aaliasing

$ checkbox_active_selected_fontName = [font]
! checkbox_active_selected_fontSize = size_small
! checkbox_active_selected_fontStyle = HAG_FONT_NORMAL
$ checkbox_active_selected_fontColor_rgb = 000
! checkbox_active_selected_fontColor_alpha = 255
! checkbox_active_selected_textAlignment = HAG_TEXT_LEFT
? checkbox_active_selected_textAAliasing = checkbox_aaliasing

$ checkbox_disabled_selected_fontName = [font]
! checkbox_disabled_selected_fontSize = size_small
! checkbox_disabled_selected_fontStyle = HAG_FONT_NORMAL
$ checkbox_disabled_selected_fontColor_rgb = 777
! checkbox_disabled_selected_fontColor_alpha = 255
! checkbox_disabled_selected_textAlignment = HAG_TEXT_LEFT
? checkbox_disabled_selected_textAAliasing = checkbox_aaliasing



# -----------------------------------------------------------
# Textboxes (default, disabled, selection, cursor, pointer)
#			[normal, hover, focused, disabled]
#
# textbox_pointer_width will be divided by two to make
# mouse-selection more accurate (I know that here is hardly
# the most ideal place to specify it, considering that the
# text mouse pointer may be of a different width to that
# specified, so be aware that this setting may move soon).
# -----------------------------------------------------------

? textbox = TRUE

$ textbox_default_fontName = arial
! textbox_default_fontSize = 10
$ textbox_default_fontColor_rgb = 000
! textbox_default_fontColor_alpha = 255

$ textbox_disabled_fontColor_rgb = 777
! textbox_disabled_fontColor_alpha = 255

$ textbox_selection_fontColor_rgb = FFF
! textbox_selection_fontColor_alpha = 255
$ textbox_selection_backColor_rgb = 5E81BC
! textbox_selection_backColor_alpha = 255

$ textbox_cursor_color_rgb = 000
! textbox_cursor_color_alpha = 255
! textbox_cursor_width = 2
! textbox_cursor_height = 15

! textbox_pointer_width = 6


# -----------------------------------------------------------
# Text (normal, title, href)
# -----------------------------------------------------------

? text = TRUE

$ text_normal_fontName = arial
! text_normal_fontSize = 10
! text_normal_fontStyle = HAG_FONT_NORMAL
$ text_normal_fontColor_rgb = 000
! text_normal_fontColor_alpha = 255
! text_normal_textAlignment = HAG_TEXT_LEFT
? text_normal_textAAliasing = FALSE

$ text_title_fontName = arial
! text_title_fontSize = 14
! text_title_fontStyle = HAG_FONT_NORMAL
$ text_title_fontColor_rgb = 000
! text_title_fontColor_alpha = 255
! text_title_textAlignment = HAG_TEXT_LEFT
? text_title_textAAliasing = TRUE

$ text_href_fontName = arial
! text_href_fontSize = 10
! text_href_fontStyle = HAG_FONT_UNDERLINED
$ text_href_fontColor_rgb = 00F
! text_href_fontColor_alpha = 255
! text_href_textAlignment = HAG_TEXT_LEFT
? text_href_textAAliasing = FALSE



# -----------------------------------------------------------
# DropDowns (normal, hover, active, disabled)
# -----------------------------------------------------------

? dropdown = TRUE

$ dropdown_normal_fontName = arial
! dropdown_normal_fontSize = 10
! dropdown_normal_fontStyle = HAG_FONT_NORMAL
$ dropdown_normal_fontColor_rgb = 000
! dropdown_normal_fontColor_alpha = 255
! dropdown_normal_textAlignment = HAG_TEXT_LEFT
? dropdown_normal_textAAliasing = dropdown_aaliasing

$ dropdown_hover_fontName = arial
! dropdown_hover_fontSize = 10
! dropdown_hover_fontStyle = HAG_FONT_NORMAL
$ dropdown_hover_fontColor_rgb = 000
! dropdown_hover_fontColor_alpha = 255
! dropdown_hover_textAlignment = HAG_TEXT_LEFT
? dropdown_hover_textAAliasing = dropdown_aaliasing

$ dropdown_active_fontName = arial
! dropdown_active_fontSize = 10
! dropdown_active_fontStyle = HAG_FONT_NORMAL
$ dropdown_active_fontColor_rgb = 000
! dropdown_active_fontColor_alpha = 255
! dropdown_active_textAlignment = HAG_TEXT_LEFT
? dropdown_active_textAAliasing = dropdown_aaliasing

$ dropdown_disabled_fontName = arial
! dropdown_disabled_fontSize = 10
! dropdown_disabled_fontStyle = HAG_FONT_NORMAL
$ dropdown_disabled_fontColor_rgb = 777
! dropdown_disabled_fontColor_alpha = 255
! dropdown_disabled_textAlignment = HAG_TEXT_LEFT
? dropdown_disabled_textAAliasing = dropdown_aaliasing



# -----------------------------------------------------------
# DropDown Box Items (normal, hover)
# -----------------------------------------------------------

! dropdown_box_above_yoffset = 2
! dropdown_box_below_yoffset = -2

$ dropdown_box_normal_fontName = arial
! dropdown_box_normal_fontSize = 10
! dropdown_box_normal_fontStyle = HAG_FONT_NORMAL
$ dropdown_box_normal_fontColor_rgb = 000
! dropdown_box_normal_fontColor_alpha = 255
! dropdown_box_normal_textAlignment = HAG_TEXT_LEFT
? dropdown_box_normal_textAAliasing = dropdown_aaliasing

$ dropdown_box_hover_fontName = arial
! dropdown_box_hover_fontSize = 10
! dropdown_box_hover_fontStyle = HAG_FONT_NORMAL
$ dropdown_box_hover_fontColor_rgb = FFF
! dropdown_box_hover_fontColor_alpha = 255
$ dropdown_box_hover_backColor_rgb = 5E81BC
! dropdown_box_hover_backColor_alpha = 255
! dropdown_box_hover_textAlignment = HAG_TEXT_LEFT
? dropdown_box_hover_textAAliasing = dropdown_aaliasing



# -----------------------------------------------------------
# Listbox Items (normal, active, hover, disabled)
# -----------------------------------------------------------

? listbox = TRUE

$ listbox_normal_fontName = arial
! listbox_normal_fontSize = 10
! listbox_normal_fontStyle = HAG_FONT_NORMAL
$ listbox_normal_fontColor_rgb = 000
! listbox_normal_fontColor_alpha = 255
$ listbox_normal_backColor_rgb = FFF
! listbox_normal_textAlignment = HAG_TEXT_LEFT
? listbox_normal_textAAliasing = listbox_aaliasing

$ listbox_hover_fontName = arial
! listbox_hover_fontSize = 10
! listbox_hover_fontStyle = HAG_FONT_NORMAL
$ listbox_hover_fontColor_rgb = 000
! listbox_hover_fontColor_alpha = 255
$ listbox_hover_backColor_rgb = FFF
! listbox_hover_textAlignment = HAG_TEXT_LEFT
? listbox_hover_textAAliasing = listbox_aaliasing

$ listbox_active_fontName = arial
! listbox_active_fontSize = 10
! listbox_active_fontStyle = HAG_FONT_NORMAL
$ listbox_active_fontColor_rgb = FFF
! listbox_active_fontColor_alpha = 255
$ listbox_active_backColor_rgb = 00A
! listbox_active_textAlignment = HAG_TEXT_LEFT
? listbox_active_textAAliasing = listbox_aaliasing

$ listbox_disabled_fontName = arial
! listbox_disabled_fontSize = 10
! listbox_disabled_fontStyle = HAG_FONT_NORMAL
$ listbox_disabled_fontColor_rgb = 777
! listbox_disabled_fontColor_alpha = 255
$ listbox_disabled_backColor_rgb = FFF
! listbox_disabled_textAlignment = HAG_TEXT_LEFT
? listbox_disabled_textAAliasing = listbox_aaliasing



# -----------------------------------------------------------
# Tabs (inactive, hover, active)
# -----------------------------------------------------------

? tab = TRUE

$ tab_inactive_fontName = [font]
! tab_inactive_fontSize = size_medium
! tab_inactive_fontStyle = HAG_FONT_NORMAL
$ tab_inactive_fontColor_rgb = 000
! tab_inactive_fontColor_alpha = 255
! tab_inactive_textAlignment = HAG_TEXT_CENTER
? tab_inactive_textAAliasing = tab_aaliasing

$ tab_hover_fontName = [font]
! tab_hover_fontSize = size_medium
! tab_hover_fontStyle = HAG_FONT_NORMAL
$ tab_hover_fontColor_rgb = 000
! tab_hover_fontColor_alpha = 255
! tab_hover_textAlignment = HAG_TEXT_CENTER
? tab_hover_textAAliasing = tab_aaliasing

$ tab_active_fontName = [font]
! tab_active_fontSize = size_medium
! tab_active_fontStyle = HAG_FONT_NORMAL
$ tab_active_fontColor_rgb = 000
! tab_active_fontColor_alpha = 255
! tab_active_textAlignment = HAG_TEXT_CENTER
? tab_active_textAAliasing = tab_aaliasing



# -----------------------------------------------------------
# Frames
# -----------------------------------------------------------

? frame = TRUE

# Placeholder styles
$ frame_tab_fontName = null
! frame_tab_fontSize = 0
! frame_tab_fontStyle = 0
$ frame_tab_fontColor_rgb = 000
! frame_tab_fontColor_alpha = 0
! frame_tab_textAlignment = 0
? frame_tab_textAAliasing = FALSE

$ frame_roundborder_fontName = [font]
! frame_roundborder_fontSize = 8
! frame_roundborder_fontStyle = HAG_FONT_NORMAL
$ frame_roundborder_fontColor_rgb = 4C7AD0
! frame_roundborder_fontColor_alpha = 255
! frame_roundborder_textAlignment = HAG_TEXT_LEFT
? frame_roundborder_textAAliasing = FALSE

$ frame_roundsolid_fontName = [font]
! frame_roundsolid_fontSize = size_medium
! frame_roundsolid_fontStyle = HAG_FONT_BOLD
$ frame_roundsolid_fontColor_rgb = 000
! frame_roundsolid_fontColor_alpha = 255
! frame_roundsolid_textAlignment = HAG_TEXT_LEFT
? frame_roundsolid_textAAliasing = any_aaliasing

# Placeholder styles
$ frame_squareborder_fontName = null
! frame_squareborder_fontSize = 0
! frame_squareborder_fontStyle = 0
$ frame_squareborder_fontColor_rgb = 000
! frame_squareborder_fontColor_alpha = 0
! frame_squareborder_textAlignment = 0
? frame_squareborder_textAAliasing = FALSE

# Placeholder styles
$ frame_squaresolid_fontName = null
! frame_squaresolid_fontSize = 0
! frame_squaresolid_fontStyle = 0
$ frame_squaresolid_fontColor_rgb = 000
! frame_squaresolid_fontColor_alpha = 0
! frame_squaresolid_textAlignment = 0
? frame_squaresolid_textAAliasing = FALSE

$ frame_mockwindow_fontName = [font]
! frame_mockwindow_fontSize = size_medium
! frame_mockwindow_fontStyle = HAG_FONT_BOLD
$ frame_mockwindow_fontColor_rgb = E0E0E0
! frame_mockwindow_fontColor_alpha = 255
! frame_mockwindow_textAlignment = HAG_TEXT_LEFT
? frame_mockwindow_textAAliasing = any_aaliasing

$ frame_header_fontName = arial
! frame_header_fontSize = 12
! frame_header_fontStyle = HAG_FONT_BOLD
$ frame_header_fontColor_rgb = 000
! frame_header_fontColor_alpha = 255
! frame_header_textAlignment = HAG_TEXT_LEFT
? frame_header_textAAliasing = TRUE

For a theme named "Example", the following files (relative to the themes\gui\ folder) are required:

\Example\
\Example\Example.bin

\Example\button\
\Example\button\active_left.png
\Example\button\active_mid.png
\Example\button\active_right.png
\Example\button\disabled_left.png
\Example\button\disabled_mid.png
\Example\button\disabled_right.png
\Example\button\focused_left.png
\Example\button\focused_mid.png
\Example\button\focused_right.png
\Example\button\hover_left.png
\Example\button\hover_mid.png
\Example\button\hover_right.png
\Example\button\normal_left.png
\Example\button\normal_mid.png
\Example\button\normal_right.png

\Example\checkbox\
\Example\checkbox\active_selected.png
\Example\checkbox\active_unselected.png
\Example\checkbox\disabled_selected.png
\Example\checkbox\disabled_unselected.png
\Example\checkbox\hover_selected.png
\Example\checkbox\hover_unselected.png
\Example\checkbox\normal_selected.png
\Example\checkbox\normal_unselected.png

\Example\dropdown\
\Example\dropdown\box\
\Example\dropdown\box\bottom_left.png
\Example\dropdown\box\bottom_mid.png
\Example\dropdown\box\bottom_right.png
\Example\dropdown\box\mid_left.png
\Example\dropdown\box\mid_mid.png
\Example\dropdown\box\mid_right.png
\Example\dropdown\box\top_left.png
\Example\dropdown\box\top_mid.png
\Example\dropdown\box\top_right.png
\Example\dropdown\active_left.png
\Example\dropdown\active_mid.png
\Example\dropdown\active_right.png
\Example\dropdown\disabled_left.png
\Example\dropdown\disabled_mid.png
\Example\dropdown\disabled_right.png
\Example\dropdown\hover_left.png
\Example\dropdown\hover_mid.png
\Example\dropdown\hover_right.png
\Example\dropdown\normal_left.png
\Example\dropdown\normal_mid.png
\Example\dropdown\normal_right.png

\Example\frames\
\Example\frames\header\
\Example\frames\header\bottom_left.png
\Example\frames\header\bottom_mid.png
\Example\frames\header\bottom_right.png
\Example\frames\header\mid_left.png
\Example\frames\header\mid_mid.png
\Example\frames\header\mid_right.png
\Example\frames\header\top_left.png
\Example\frames\header\top_mid.png
\Example\frames\header\top_right.png
\Example\frames\mockwindow\
\Example\frames\mockwindow\bottom_left.png
\Example\frames\mockwindow\bottom_mid.png
\Example\frames\mockwindow\bottom_right.png
\Example\frames\mockwindow\mid_left.png
\Example\frames\mockwindow\mid_mid.png
\Example\frames\mockwindow\mid_right.png
\Example\frames\mockwindow\top_left.png
\Example\frames\mockwindow\top_mid.png
\Example\frames\mockwindow\top_right.png
\Example\frames\roundborder\
\Example\frames\roundborder\bottom_left.png
\Example\frames\roundborder\bottom_mid.png
\Example\frames\roundborder\bottom_right.png
\Example\frames\roundborder\mid_left.png
\Example\frames\roundborder\mid_mid.png
\Example\frames\roundborder\mid_right.png
\Example\frames\roundborder\top_left.png
\Example\frames\roundborder\top_mid.png
\Example\frames\roundborder\top_right.png
\Example\frames\roundsolid\
\Example\frames\roundsolid\bottom_left.png
\Example\frames\roundsolid\bottom_mid.png
\Example\frames\roundsolid\bottom_right.png
\Example\frames\roundsolid\mid_left.png
\Example\frames\roundsolid\mid_mid.png
\Example\frames\roundsolid\mid_right.png
\Example\frames\roundsolid\top_left.png
\Example\frames\roundsolid\top_mid.png
\Example\frames\roundsolid\top_right.png
\Example\frames\squareborder\
\Example\frames\squareborder\bottom_left.png
\Example\frames\squareborder\bottom_mid.png
\Example\frames\squareborder\bottom_right.png
\Example\frames\squareborder\mid_left.png
\Example\frames\squareborder\mid_mid.png
\Example\frames\squareborder\mid_right.png
\Example\frames\squareborder\top_left.png
\Example\frames\squareborder\top_mid.png
\Example\frames\squareborder\top_right.png
\Example\frames\squaresolid\
\Example\frames\squaresolid\bottom_left.png
\Example\frames\squaresolid\bottom_mid.png
\Example\frames\squaresolid\bottom_right.png
\Example\frames\squaresolid\mid_left.png
\Example\frames\squaresolid\mid_mid.png
\Example\frames\squaresolid\mid_right.png
\Example\frames\squaresolid\top_left.png
\Example\frames\squaresolid\top_mid.png
\Example\frames\squaresolid\top_right.png
\Example\frames\tab\
\Example\frames\tab\bottom_left.png
\Example\frames\tab\bottom_mid.png
\Example\frames\tab\bottom_right.png
\Example\frames\tab\mid_left.png
\Example\frames\tab\mid_mid.png
\Example\frames\tab\mid_right.png
\Example\frames\tab\top_left.png
\Example\frames\tab\top_mid.png
\Example\frames\tab\top_right.png

\Example\listbox\
\Example\listbox\disabled_bottom_left.png
\Example\listbox\disabled_bottom_mid.png
\Example\listbox\disabled_bottom_right.png
\Example\listbox\disabled_mid_left.png
\Example\listbox\disabled_mid_mid.png
\Example\listbox\disabled_mid_right.png
\Example\listbox\disabled_top_left.png
\Example\listbox\disabled_top_mid.png
\Example\listbox\disabled_top_right.png
\Example\listbox\normal_bottom_left.png
\Example\listbox\normal_bottom_mid.png
\Example\listbox\normal_bottom_right.png
\Example\listbox\normal_mid_left.png
\Example\listbox\normal_mid_mid.png
\Example\listbox\normal_mid_right.png
\Example\listbox\normal_top_left.png
\Example\listbox\normal_top_mid.png
\Example\listbox\normal_top_right.png

\Example\progressbar\
\Example\progressbar\horizontal_item.png
\Example\progressbar\horizontal_left.png
\Example\progressbar\horizontal_mid.png
\Example\progressbar\horizontal_right.png
\Example\progressbar\vertical_item.png
\Example\progressbar\vertical_left.png
\Example\progressbar\vertical_mid.png
\Example\progressbar\vertical_right.png

\Example\radiobutton\
\Example\radiobutton\active_selected.png.ptr
\Example\radiobutton\active_unselected.png.ptr
\Example\radiobutton\disabled_selected.png
\Example\radiobutton\disabled_unselected.png
\Example\radiobutton\hover_selected.png
\Example\radiobutton\hover_unselected.png
\Example\radiobutton\normal_selected.png
\Example\radiobutton\normal_unselected.png

\Example\scrollbar\
\Example\scrollbar\active_down.png
\Example\scrollbar\active_slider.png
\Example\scrollbar\active_up.png
\Example\scrollbar\bar.png
\Example\scrollbar\disabled_bar.png.ptr
\Example\scrollbar\disabled_down.png
\Example\scrollbar\disabled_up.png
\Example\scrollbar\hover_down.png
\Example\scrollbar\hover_slider.png
\Example\scrollbar\hover_up.png
\Example\scrollbar\normal_bar.png
\Example\scrollbar\normal_down.png
\Example\scrollbar\normal_slider.png
\Example\scrollbar\normal_up.png

\Example\slider\
\Example\slider\horizontal_disabled_slider.png
\Example\slider\horizontal_normal_slider.png
\Example\slider\horizontal_active_slider.png
\Example\slider\horizontal_bottom.png
\Example\slider\horizontal_hover_slider.png
\Example\slider\horizontal_mid.png
\Example\slider\horizontal_top.png
\Example\slider\vertical_active_slider.png
\Example\slider\vertical_bottom.png
\Example\slider\vertical_disabled_slider.png
\Example\slider\vertical_hover_slider.png
\Example\slider\vertical_mid.png
\Example\slider\vertical_normal_slider.png
\Example\slider\vertical_top.png

\Example\tab\
\Example\tab\active_left.png
\Example\tab\active_mid.png
\Example\tab\active_right.png
\Example\tab\hover_left.png
\Example\tab\hover_mid.png
\Example\tab\hover_right.png
\Example\tab\inactive_left.png
\Example\tab\inactive_mid.png
\Example\tab\inactive_right.png

\Example\textbox\
\Example\textbox\disabled_left.png
\Example\textbox\disabled_mid.png
\Example\textbox\disabled_right.png
\Example\textbox\focused_left.png
\Example\textbox\focused_mid.png
\Example\textbox\focused_right.png
\Example\textbox\hover_left.png
\Example\textbox\hover_mid.png
\Example\textbox\hover_right.png
\Example\textbox\normal_left.png
\Example\textbox\normal_mid.png
\Example\textbox\normal_right.png

For each image the PNG alpha (transparency) channel is fully supported but only PNGs saved in RGB-mode will work - "indexed" PNG images will not.

Much of the theme behaviour is inferred automatically by the images. For example, the height of individual ListBox options (and therefore clickable area or padding of each one) is equal to the height of the \Example\listbox\normal_mid_mid.png image.

If an image is not found hag will look for a file with the suffix ".ptr", e.g.\Example\button\disabled_left.png becomes \Example\button\disabled_left.png.ptr. This file should contain a single line pointing to a file relative to the base of the theme directory to use instead, e.g. if the file contains the line "button\normal_left.png" then hag will load \Example\button\normal_left.png.

This is useful when theme images are identical, e.g. a disabled button may look the same as a normal button but the theme .bin file specifies that a different text colour should be used.

Stay Subscribed

@golightlyb, subscribe to the RSS feed or get updates by e-mail.

You can also contact me directly - I make an effort to reply to every e-mail.