TF2 HUD Editing Guide
Sections on this Page:
In-Depth: More on Buttons
More info on button controls.
top
Button Properties
Buttons have a few extra color and border properties, which define its appearance in different states.
| defaultBgColor | Background color. |
| defaultFgColor | Text color. |
| border_default | Border style. |
| armedBgColor | Background color when the mouse is hovering above it. |
| armedFgColor | Text color when the mouse is hovering above it. |
| border_armed | Border style when the mouse is hovering above it. |
| depressedBgColor | Background color when the button is clicked down. |
| depressedFgColor | Text color when the button is clicked down. |
Here is an example of these properties:
"ExampleButton"
{
"ControlName" "CExButton"
"fieldName" "ExampleButton"
"xpos" "0"
"ypos" "0"
"wide" "169"
"tall" "24"
"visible" "1"
"enabled" "1"
"font" "DefaultLarge"
"textAlignment" "west"
"paintbackground" "1" // this needs to be 1 for bgcolor
// default style
"defaultBgColor_override" "MyColorGreyDark"
"defaultFgColor_override" "MyColorWhite"
"border_default" "MyBorderMidGrey"
// armed style
"armedBgColor_override" "MyColorBlueDark"
"armedFgColor_override" "MyColorWhite"
"border_armed" "MyBorderGreen"
// depressed style
"depressedBgColor_override" "MyColorButBack"
"depressedFgColor_override" "MyColorButTextNope"
}
For some buttons, the _override suffix may be necessary to alter these properties.
top
Shortcut Keys
Buttons can have shortcut keys, so when you push a specified key, the button is triggered. More info on that here.
top
Sub-Controls
Some buttons can have sub-controls. Like the CExImageButton has a image on it.
"NextButton"
{
"ControlName" "CExImageButton"
"fieldName" "NextButton"
"xpos" "210"
"ypos" "100"
"zpos" "10"
"wide" "30"
"tall" "30"
// ...
"SubImage"
{
"ControlName" "ImagePanel"
"fieldName" "SubImage"
"xpos" "0"
"ypos" "0"
"zpos" "1"
"wide" "30"
"tall" "30"
"visible" "1"
"enabled" "1"
"image" "blog_forward"
"scaleImage" "1"
}
}