THIS GUIDE IS IN PROGRESS DEC 2023. I will update and remove this message when done.

22 Dec 2023

The half-life 25th anniversary update is causing issues with custom GUI and HUD files.

I will investigate and redo this page. For now ...be careful with custom files.

Please be aware the "EngineFont" section where the net graph font is changed is now more complex with GUI and HUD scaling, I will be reworking that soon.

 

This article is about the GUI area and also a simple netgraph font change.

There are edits you can do in the GUI (Graphic User Interface - the controls area) and HUD (Heads Up Display - in game) areas.

These custom GUI's are popular in DoD:S and CSS and I make a lot of those. The Goldsource HL1 files are on the whole are adjustable too.

The default files for dod 1.3 are a bit of a mess and these days you really do need to install or adjust a custom GUI and HUD.

GameBanana has some files too, mostly GUI screens but it does have a "full blown" graphical HUD change that alters the .spr files that deliver a "minimal" HUD in the lower area. Those are very involved and another level of skill, However there is a program that makes that easy, I'll cover that part as well.

Jed made a set to adjust the HUD back in the day, its...OK but seems to suit only some resolutions.

But there are others that are not as comprehensive as Jed's and some are a one trick pony... like Rich Nagel’s (HUD) Scoreboard fix, INsane’s (Me - HUD) Top Spectator Bar fix, these are found in my Strumbot installer (2019 version 2 2023)

Then there are files (for the HUD mostly) floating around like "ClientScheme by acetamino" (for the HUD) and what I think is the best HUD panel text upgrade "ClientScheme By seveN" while that does fix the scoreboard font...it fails to address the height issue that is in Rich Nagel’s Scoreboard fix file. But I regard seveN's work as the top file (for font display) to build on. 

So, to date... no one has made the perfect set of GUI or HUD files (yet) to fix all these "broken" dod 1.3 standard files !!!!!

I will address that right now for the GUI area and record what the GUI files are, the problem and the adjustments that are possible.

We will also look at a few items that...I don't think anyone has done yet for a Half-Life 1 mod GUI.

Index

The Netgraph font - slim it down a bit. The fonts section.
 Working with .res files - How to find a GUI function in "TrackerScheme.res" when there isn't any documentation
Change the GUI panels
The Border Colors Section
Special buttons and some images
The GUI background
Dark and light panels. The "titlebar colors" section
The Main Titles area
Final Tips - when venturing further down the file.
Watch out for updates !

The Netgraph font - slim it down a bit.

We can start with a simple one.This will get you used to finding, adjusting and saving the GUI and HUD files.

You may have noticed the netgraph font looks a bit dated and on some modern screen resolutions it looks out of place.

Here are some images and below that what file to edit, where to put it as a custom file.

 netgrah font default  netgrah font small
  Screen size 1024 X 768 - The standard netgraph font.  Screen size 1024 X 768 - The changed font file result.

That change was achieved by...

  • Making a new folder in... Your drive:\Your folder\steamapps\common\Half-Life called "dod_addon" (this will be where we place our custom files read this to see why.)
  • Going to the folder...  Your drive:\Your folder\steamapps\common\Half-Life\valve\resource - Copy the "TrackerScheme.res" file.
  • Make a new folder in the "dod_addon" folder you made called "resource"
  • Paste the "TrackerScheme.res" file into the "dod_addon\resource" folder.

You should note the change also affected the player name and health as you look at them and also the Kills and Deaths font... so its a choice you have to be careful with.

 

Now before you start editing you need to know what a .res file is.

  • It's a text file, its a basic type we use to configure the GUI and HUD, game panels like a scoreboard.
  • You can use NotePad but I urge you to use NotePad++ as it will match my screens.
  • To make life easier, associate the file types .res, .cfg, .ini, .gam if you like but NotePad++ can open a file via the window right click menu.

Now we can do some edits to the "TrackerScheme.res" file.

Open the file and you will see a header (the top of the file) telling you what the file does. It's like a few in HL1 and HL2 games, its a "SCHEME RESOURCE FILE" it sets out colors and fonts, borders...all sorts of things in game panels and GUI and HUD items.

In this case we are altering a font.

Go to the Fonts section "EngineFont" section. That's what controls the font. The netgraph font color cannot be changed but we can make it thinner and get the font size down.

Here are my edits...

  • Note I have added comments by placing "// some words" after the item I am altering.
  • Do get into the practice of doing that and especially record the default setting values.
  • There are 9 font sizes for different screen resolutions, basically the height of the screen.
  • Note that adjusted all of them.
  • The font size is set via "tall"
  • The font bold setting is "weight" to make a thin font "600 is bold and going down to "550" thins it down to "normal"

Mostly after experimenting you will notice that all you have to do is to edit "weight" to "550" and leave the default "tall" setting alone unless you truly do have a problem monitor or resolution.

  • Ultrawide Monitors past 3440 X 1440 like mine have a problem, I just reduced my resolution in game to 2560 X 1080.
  • Font's like Courier will space out the text. Ifd you use "net_graph 3" it may go off the screen if placed on the right.
  • Trebuchet MS is a excellent, clear small "thin" font but take the weight back to "600" to stand out more.

From my testing I found "Trebuchet MS" good, "Calibri" is clearer, and both fix the netgraph off the right screen issue.

If you use Mac OS just check if you have the "Calibri" font, use "Trebuchet MS" instead.

"Calibri" does have readability issues and MicroSoft is dumping it soon. 

 

"Trebuchet MS" may be the best all rounder if you want to change the "Verdana" font.

 

Code:
		}
		
		"EngineFont" // Netgraph, You can change the text size but its not advised. The bold (weight) setting or font has a better effect.
		{
			"1"
			{
				"name"		"Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"		"13"           //13 (def)
				"weight"	"600"          //(def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	        "480 599"      // the screen res, in this case 480 wide X 640 (599) - 640 high screens
				"dropshadow"	"1"
			}
			"2"
			{
				"name"		"Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"	        "15"           // "15" (def) size of font
				"weight"	"600"          //(def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	        "600 767"      // the screen res, in this case 600 wide X 800 high (767) - 800 high screens
				"dropshadow"	"1"
			}
			"3"
			{
				"name"		"Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"		"16"       // "16" (def)
				"weight"	"600"      //(def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	     "768 1023"   // the screen res, in this case 768 wide X 1024 (1023) - 1024 high screens
				"dropshadow"	"1"				
			}
			"4"
			{
				"name"		"Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"		"21"           // "21" (def)
				"weight"	"600"          // (def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	        "1024 1299"    // the screen res, in this case 1024 wide X 1024 (1023)
				"dropshadow"	"1"
			}
			"5"
			{
				"name"		"Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"		"28"           //"28" (def)
				"weight"	"600"         // (def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	        "1300 1699"
				"dropshadow"	"1"
			}
			"6"
			{
				"name"		"Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"		"35"          //"35" (def) 
				"weight"	"600"         // (def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	        "1700 1899"
				"dropshadow"	"1"
			}
			"7"
			{
				"name"          "Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"		"42"           //"42" (def) 
				"weight"	"600"          // (def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	        "1900 2499"
				"dropshadow"	"1"
			}
			"8"
			{
				"name"		"Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"		"56"           // "56" (def)
				"weight"	"600"          // (def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	        "2500 2999"
				"dropshadow"	"1"
			}
			"9"
			{
				"name"		"Trebuchet MS" //"Verdana" //Def - small fonts "Calibri" and "Trebuchet MS" are good with "Calibri" is clearer, and fixs the netgraph off the right screen issue.
				"tall"		"70"           // "70" (def)
				"weight"	"600"          // (def) For adjusting bold, 600 is bold, 550 or less will make the font thin.
				"yres"	        "3000 10000" 
				"dropshadow"	"1"
			}
		}

Save the file and test it, make sure you have your Net Graph set up to see the change.

Also make it "net_graph 3" and "net_graphpos 1" to put it on the very right, check it doesn't run off the screen.

 

You should note that in most of this type of editing (not all) it will be to change this and that in a .res file, save, start up the game and see the change, close the game.

It's boring a tedious work.

In this case and for most editing in the GUI area... you can just change the resolution in the Options - Video tab and that does a refresh of the file!

 

Working with .res files - How to find a GUI or HUD function when there isn't any documentation.

This is one of the more frustrating items when working on a GUI or HUD file type, working out what to change.

Before we venture further we can look at some tips to "read" and test the files and where there is no information or settings that are obvious like the "tall" and "weight" settings we did above.

I found the "EngineFont" font section above by simply looking at the font section and figuring out what did what, obviously the name was a dead give away and I found that one quite quickly.

Before we start editing this file - a warning. 

  • In the GUI, Options - Content tab you will see a tickbox for allowing custom content.
  • Don't accidentally untick that, it kills your dod_addon folder custom files.
  • It will not delete them...just make them unavailable to view/use.
  • That's a good feature, it takes your files to default if you are going from Public to Competitive/strict game servers.

But what about GUI panel colors, font colours in the same file "TrackerScheme.res" we just edited?.The names on them is the Colors Section are sort of tell you what they are.

There is simple method you can use, when you don't know what a color does, change the color to a bright pink and see what changed in the GUI area.

Note the format of the colors is a RGB type. Red is the first, Green then Blue to make a vast amount of colors, 0 - 255 for the strength of each one.

See here... RGB Color Codes Chart and fool around with the RGB numbers.

The last one there is transparency, "0" is invisible (Transparent) and "255" is full (Opaque).

Go to the Colors section. Let's alter the first one, it does have a short description ...

"BaseText" "216 222 211 255"  // used in text windows

Paste in this "255 105 180 255" so now that line looks like this...

"BaseText" "255 105 180 255" //"216 222 211 255"  // used in text windows

Note I commented "//" after my change and kept the default colour so I can change it back. 

Open the game, look at the Options - Multiplayer panel, Player name title (and the name) are pink as are other items.

Now change it back.

But that isn't all, that "Colors" section is just a group of colours to create a group of colours in a descriptive name for text, backgrounds, borders, and panel colors.

You will notice they are referenced in another section called "BASE SETTINGS", further adding names to colours and GUI functions where they can separate out to many functions, all using that group of colors... the main scheme.

So if you wanted to change the Green panels and off white text to a light Grey panel and green text... the you can quickly adjust the entire theme by just editing the "Colors" section.

That is why it looks complex, it has the advantage of just changing a few base colours and and that will affect many functions in the "Base Settings" sections. Quite clever.

So I did some editing of the descriptions and found out what that affected.

The results with my expanded notes are below. 

Code:
//
// TRACKER SCHEME RESOURCE FILE - Edited by INsane (sturmbot.org) for a smaller and thinner netgraph font. Should work on all HL 1 mods if placed in the resource folder
//
// sections:
//		colors			- all the colors used by the scheme
//		basesettings	- contains settings for app to use to draw controls
//		fonts			- list of all the fonts used by app
//		borders			- description of all the borders
//
// notes:
// 		hit ctrl-alt-shift-R in the app to reload this file
//      For a test color try Pink... "255 105 180 255"
Scheme
{
	//////////////////////// COLORS ///////////////////////////
	Colors
	{
		// base colors - These are the GUI area not in game all affect the text in GUI screens like Options.
		"BaseText"		"216 222 211 255"	// used in text windows, lists like Options - Multiplayer -Player name title (and the name)
		"BrightBaseText"	"255 255 255 255"	// brightest text, used on Options tabs for the inactive tabs and a lot of the text inside the pages and also most buttons.
		"SelectedText"		"255 255 255 255"	// selected text only like when you edit your player name.
		"DimBaseText"		"160 170 149 255"	// dim base text This is like the above, it is the test of the inactive choices in dropdown boxes like the "Options - create server and the unslected map names
		"LabelDimText"		"160 170 149 255"	// used for info text like Options = Content "Press this button..."
		"ControlText"		"216 222 211 255"	// used in all text controls but only titles of tickbox that are not ticked....disabled.
		"BrightControlText"	"196 181 80 255"	// use for selected controls - Like ticked tickbox title Options- Content "Allow custom content" but only when ticked. 
		"DisabledText1"		"117 128 111 255"	// disabled text - go to Options Keyboard and the "Clear Key" It affects the text colour right/bottom shadow  
		"DisabledText2"		"40 46 34 255"		// disabled text go to Options Keyboard and the "Clear Key" It affects the text colour left/top shadow
		"DimListText"		"117 134 102 255"	// offline friends, unsubscribed games, etc. I can't see any change in this 
		
		//Special color called "test" a pink for locating a item in "Base settings" section
		"test"  "255 105 180 255" // test color

		// background colors - This is the main panels like Options
		"ControlBG"			"76 88 68 255"		// background color of controls
		"ControlDarkBG"		"90 106 80 255"		// darker background color; used for background of scrollbars
		"WindowBG"			"62 70 55 255"		// background color of text edit panes (chat, text entries, dropdowns etc.)
		"SelectionBG"		"149 136 49 255"	// background color of any selected text or menu item
		"SelectionBG2"		"40 46 34 255"		// selection background in window w/o focus
		"ListBG"			"62 70 55 255"		// background of server browser, buddy list, etc.

	       // titlebar colors - The main title text and BG colours on the panels only like "Options" also handles dim colours of text and Backgrounds
		"TitleText"		"255 255 255 255" // White is standard for main titles only - change only on light panels or white is too contrasting (on Black)
		"TitleDimText"		"136 145 128 255" //Def is a LT green when opening another panel, the other one is a dull color - changed to a mid grey 
		"TitleBG"		"76 88 68 0" // Mid Green note its turned off "0" (last number transparency). Its the background of the main panels title back ground. Leave "0" looks best, so does "50" 
		"TitleDimBG"		"76 88 68 0" // Mid Green note its turned off "0"(last number transparency). Its the background of the main panels title back ground. Leave "0" looks best, so does "50" 
		
		// slider tick colors - The text on items like Options - Video "Brightness"
		"SliderTickColor"	"127 140 127 255" // The dark to light text and increments
		"SliderTrackColor"	"31 31 31 255" // The track inset (a dark black)

		// border colors - The borders on the GUI panels and buttons.
		"BorderBright"		"136 145 128 255"	// the lit side of a control - that is the left and the top of panels and buttons.
		"BorderDark"		"40 46 34 255"		// the dark/unlit side of a control - that is the right and bottom of panels and buttons.
		"BorderSelection"	"0 0 0 255"			// the additional border color for displaying the default/selected button - see this in Options = Keyboard and the "Edit Key" button (disabled) has this boarder 
	}

 

Change the GUI panels

Let's say I wanted to change the Green panels of the GUI area, in my expanded edits up there I have that explained, its "ControlBG"    "76 88 68 255" in the "// background colors" section.

I want a Brownish Tan (Winsor Brown) GUI, the panel is a good place to start. As advised above keep the old color! My new color is "98 74 8 255",  tan/brown.

The edit looks like this...

// background colors - This is the main panels like Options
"ControlBG"    "98 74 8 255"    //"76 88 68 255" // background color of controls

  • Now save the file, open dod.
  • Change the resolution to a windowed mode, something like a screen height of 800 will do.
  • Go to Options - Keyboard, look at the change. Then come back to this page.
 controlbg standard green  controlbg tan
 "ControlBG" Standard Green  "ControlBG"  now main panels are Tan.

Keep dod open, we are going to edit some more.

Warning: My system can handle this kind of resolution change I mention below "on the fly" multiple times, your experience may end in a crash.

If so, shut down dod on each edit.

As you can see the main panel changed but the text area background is still green, so is the slider bar background.

However, if you view other areas like the Video tab and drop down to change the resolution... that panel changed too, even though the box BG is still green. (see image below right)

That's something to keep in mind, make sure you look at all the panels as the "Scheme" is changing more than one thing that are referenced in the "BASE SETTINGS" section.

  • Change the next color. "ControlDarkBG" "105 81 14 255" //"90 106 80 255"
  • Save the file.
  • Return to dod, adjust your Screen resolution to a the next choice. (Keeping in mind the warning above

Look at  Options - Keyboard.

  • Note the slider bar background has changed. (Image below on the left)
  • Note the background in the Video drop down background didn't change (image on the right) But drop it down and that area did change.

 

 controlbgdarkbg tan  controlbgdarkbg tan video
 ControlDarkBG - Slider bar is now Tan. ControlDarkBG - BG of the drop down area is still green

Let's do the next one.

"WindowBG" "107 79 30 255" //"62 70 55 255" // background color of text edit panes (chat, text entries dropdowns, etc.)

Look at the image below (Left), the green in the "Resolution" and other boxes is now tan.

 windowbg tan video res  selectionBG highlight txt
 WindowBG - BG of the drop down panel...now changed  SelectionBG - note that active items highlight in tan not yellow green (see above image on the left)

Next... 

"SelectionBG" "134 101 45 255" //"149 136 49 255" // background color of any selected text or menu item

Look at the image in the above right, the highlighted text has a tan background now.

Next...

"SelectionBG2" "40 46 34 255" // selection background in window w/o focus

 This one you can leave alone, notice if you make this a Pink you will see a flash of pink on some highlighted items in the Keyboard panel, the selected text.

 Next...

"ListBG" "135 106 25 255" //"62 70 55 255" // background of server browser, buddy list, etc.

This affects the BG of items in the Keyboard text zone and the Find servers "internet" list.

 listbg tan text areas  listbg sever list
ListBG - Background of many text panels - Keyboard.  ListBG - Background of many text panels - server panel.

That's it for the "background colors" section.

The "titlebar colors" I left as standard as white is OK for my scheme. If you had lighter panels you would consider changing them.

The "slider tick colors" are two that are still greenish, lets change both, the "SliderTickColor" is the increments in Brightness and Gamma slider and "SliderTrackColor" is the BG of the slider slit.

"SliderTickColor" "192 192 192 255" //"127 140 127 255" // The dark to light text and increments
"SliderTrackColor" "101 77 11 255" //"31 31 31 255" // The track inset (a dark green)

 controlbgdarkbg tan video  slider change

 Brightness and Gamma - Slider colors before the change.

Lower section of the image only, (Ignore the green in the top input lines from a previous image change)

 Brightness and Gamma - Slider colors after the change 

 

The Border Colors Section

We are just about done.

In the GUI area, go to the Options - Keyboard panel, note the Clear Key button has a green tint around the Button border and other buttons like OK are affected.

If we go to the "border colors" Section, this will fix that issue...

"BorderSelection" "192 192 192 255" //"0 0 0 255" // the additional border color for displaying the default/selected button - see this in Options = Keyboard and the "Edit Key" button (disabled) has this border.

You could also consider the two settings above that "BorderBright" and "BorderDark" if you have to, for this Tan hud looked OK but on higher resolutions you could just make out the greenish grey on them.

These two are add a lighting effect to the button, the "BorderBright" is the "lit" or "shadow" sides, the Left and Top, it should be a light grey as if it is shining in the sun, the Right and Bottom is a shadow so, "BorderDark" should be a darker grey 

"BorderBright" "160 160 160 255" //"136 145 128 255" // the lit side of a control - that is the left and the top of panels and buttons.

"BorderDark" "40 40 40 255" //"40 46 34 255" // the dark/unlit side of a control - that is the right and bottom of panels and buttons.

Up in the "Colors" section now for this Tan GUI, I needed to make changes to this Tan Scheme to tidy up.

Next is a pair of colors that work together on fonts to make a drop shadow embossed effect, it stands out and looks disabled or depressed.

This affects the same button we just edited. Options Keyboard and the "Clear Key" is a good place to see the change, do the Pink test one at a time to see what this is.

"DisabledText1"

"DisabledText1" "96 96 96 255" //"117 128 111 255" // disabled text - go to Options Keyboard and the "Clear Key" It affects the text colour right/bottom shadow

"DisabledText2"
"DisabledText2" "160 160 160 255" //"40 46 34 255" // disabled text go to Options Keyboard and the "Clear Key" It affects the text colour left/top shadow 

The next two are check box text edits.

"ControlText" is the color of the text color beside a unticked checkbox. I made mine dullish light grey by changing this... 

 "ControlText" "192 192 192 255" //"216 222 211 255" // used in all text controls but only titles of tickbox that are not ticked....disabled.

"BrightControlText" like above, is the text color beside the ticked checkbox. It also affects the Active tab Title Text. I made mine a whitish grey by changing this... 

"BrightControlText" "246 242 235 255" //"196 181 80 255" // use for selected controls - Like ticked tickbox title Options- Content "Allow custom content" but only when ticked.

 The result so far is this.

 GUI button boaders
 Check box, titles, button borders

You can't see it much in the image but you do on resolutions way up in the 2000's (21:9 ultrawide full screen) but you can still see some "greenish" items there.

Look closely at the text below the gamma slider, its green...ish grey. Those notes are in a lot of places. Also doing something like the "Create Server" panel and where you dropdown to select a map the inactive map names are greenish too.

 

Special buttons and some images

Also the Steam icon top left has a green background and so does the Mic level image in the Audio tab.

Now you could get away with that, but we will look at those too.

The Text for those panels with notes is in the "Colors" Section...

"LabelDimText"  Edit that like this for a light grey...

 "LabelDimText" "160 160 160 255" //"160 170 149 255" // used for info text like Options = Content "Press this button..."

Now the other one, it displays items like the dropdown panel for maps that are not selected, we will do a light grey...

"DimBaseText" Edit that like this for a light grey...

"DimBaseText" "160 160 160 255" //"160 170 149 255" // dim base text This is like the above, it is the test of the inactive choices in dropdown boxes like the "Options - create server and the unselected map names

 GUI panel note text map fix text
 The panel notes text are fixed with "LabelDimText" edits... but look at the Mic Meter and the Steam icon images...yuck! "DimBaseText" fixed the dropdown panel map text. (Oh and yes...I made my own GUI background.)

 

That looks OK but you do have to watch item like the Steam logo and the Mic Meter.

Close the "TrackerScheme.res" file. We need to edit images.

Fortunately Valve made these a .TGA file and we can alter that in a editor, plus... .tga files can have transparent edges so they will suit any panel color after editing.!!!

I'll use paint.net.

The files we are hunting for are in Your Drive:\Your folders\steamapps\common\Half-Life\platform\resource

Grab the files for the Steam Icon... icon_steam.tga and  icon_steam_disabled.tga (one is active and one is for disabled panels.)

You will note in the image above - right that "disabled and active" icons, the game (internet server) browser window is inactive, look at the icons on each panel.

Put them in Your drive:\your folders\steamapps\common\Half-Life\dod_addon\resource

Rename them ... put "OLD" on the end of the file name... icon_steamOLD.tga and  icon_steam_disabledOLD.tga.

Just in case we want another attempt, we will rename after editing.

Open them with your image editor.

In my case I was using the eraser brush and adjusting hardness from 100% around the image edge, to 25% when getting in real close with a 2 pixel size brush. Work on it until the strong green pixels is gone and everything looks clear or white and semi transparent greys.

Do the same for both files.

You can also edit just the icon_steamOLD.tga file first (icon_steam_disabled.tga), then use that file for the disabled one, just fool around with the image contrast (Adjustments - Brightness and contrast) and make it dimmer... save it as "icon_steam_disabled.tga".

 steamicon
 Paint.Net editing the Steam Icon... icon_steam.tga and  icon_steam_disabled.tga

 The Microphone level images (2) are in the same folder.

Your Drive:\Your folders\steamapps\common\Half-Life\platform\resource

  • mic_meter_dead.tga
  • mic_meter_live.tga
  1. Use the magic brush - set at around 32-34% Tolerance
  2. Select the green.
  3. Select black and with the bucket tool apply that
  4. Note there will be a greenish border bottom and right, select that and make it a grey.
  5. Do that for both.
  6. Save the files
 tan final final gui tan BG
 Mic level files, black background now.  Final edits ... can include the background too.

 

 

The GUI background

The GUI background is another guide... but here are some basic's.

You could just go to sites like the gamebanana dod GUI section and pick one.

If you are making your own I strongly advise you use this one by Jan (Kober) Kobersky as it's updated in August 2023 and does wide-screen files...properly.

I made my own GUI background as the higher screen resolutions cut off the heads of the characters in the standard dod GUI.

The files (yes many) are in a grid, .tga files. Go to ... Your Drive:\Your folders\steamapps\common\Half-Life\dod\resource\background

It's looks like a mess, the aforementioned program makes that easy.

Just look at this excellent guide by " Mr_Floyd" on how to do that manually.

That's a lot of work. 

 gui BG 16 9 green
 The background files for dod...NUTS!!! The Result - 16:9 ratio 1920 X 1080

 

Again...put those in the "dod_addon" folder. The correct address is ... Half-Life\dod_addon\resource\background

I think you know what the "TrackerScheme.res" file is now. You take it out of Half-Life directory and place that in the dod_addon folder, adjust as above.

 

The input file, the actual "artwork" is a matter of picking a target resolution before hand and realizing that the game files were made for a aspect ratio of 4:3 and a size of 800 wide X 600 high.

These days we are all using 16:9 wide screen or 21:9 ultra wide screen monitors.

Read about that here and look at the differences.

 

Try and use a file size of 1920 X 1080 that is a 16:9 aspect ratio it has enough pixels to make a decent image for most images up to 2560X1080 for a 21:9 Ultrawide monitor.

Be aware the while most use a 16:9 ratio the 21:9 will stretch the image.

You can see that in the image below looking at the stretching that occurs between the different aspect ratios in the image below The template size was 1920 X 1080.

I would use 1080 as a default height and then if making different sizes for all resolutions, expand your sizes based on the height size below... 

 aspect ratios
 Monitor size - widths are important in your image

 

 

32:9 aspect ratio: 3840×1080, 5120×1440, 7680×2160

 

21:9 aspect ratio: 2560×1080, 3440×1440, 3840×1600, 5120×2160

 

16:9 aspect ratio: 1280×720, 1366×768, 1600×900, 1920×1080, 2560×1440, 3840×2160, 5120×2880, 7680×4320

 

16:10 aspect ratio: 1280×800, 1920×1200, 2560×1600 (not popular but close too 16:9 1920x1080)

 

4:3 aspect ratio: (800 X 600 in Half-Life games is the default) 1400×1050, 1440×1080, 1600×1200, 1920×1440, 2048×1536

 Example screen sizes in aspect ratios - 1080 is a good height to make a default.

The graphics program is another issue.

Paint.net is OK but for removing and manipulating backgrounds and removing objects from backgrounds you may consider GIMP (Free) or a paid graphics program. 

GIMP by the way is starting to have some AI plugins. 

Out of all of the paid ones I selected Cyberlink's DirectorSuite 365 (Photo and video package with Audio and more), it is hands down excellent value over Adobe photoshop and the related Video editing package.

 

These subscription only image, audio and video programs are... like MS Office subscriptions and seem like a rip-off? For MS Office...yes is my view.

But in this case the rapid development in AI enhanced graphics it's moving too fast to justify the cost to buy a "lifetime" program.

Its AU$99 per year for the Cyberlink's DirectorSuite 365, that was my choice as I have YouTube Videos to make and also some family photos (from 1930's) to restore in 2024.

The "lifetime" price for the Photo Director 365 (competitor to Adobe Photoshop) is affordable but lacks the features of the subscription packages.

 

Using AI in images. Good and bad?

The AI for removing foreground and backgrounds... will save you hours. The upscaling AI stuff is very, very good.

I didn't like the AI for making images from scratch based on me putting in a suggestion, I like to do that myself although, some of the outputs I tried would be OK to "cartoon" real images. 

 

The answer is... it depends on you, what your feelings are and your needs.

Paint.Net is fine, its free. I use all of these including my (very old) version of Photoshop.

My personal opinion on AI is... use it for corrections but if you know a real artist employ them. They actually matter.

There are two sides to AI, image corrections and image creation. I don't like where the AI image creation issue is going but the correction tools for your own created graphics are.. awesome. 

 

Do you need Template files with the GUI final output?

Here is my Template for paint.net and Photoshop programs, (88 MB) Was checked with Virus total - OK, some browsers may report a problem as it has Paint.net and Photoshop files.

It's for the 16:9 1920 X 1080 resolution but does have a 21:9 2650 X 1080 and 32:9 3440 X 1080 size.

Also includes some edited images plus the Green, Tan and black backgrounds with the dod US and Brit models in separate layers.

It wasn't that hard to cut around the Brit and US guys in Paint.net but the paid AI did a great job so I used them in a paint.net and photoshop layer. 

You could use those layers to paste into a 21:9 2650 X 1080 or 32:9 ratio image but you would have to alter the width (down to 1920 X 1080) of the 32:9 3440 X 1080 size as the GUI tool has a 1920 X 1080 size limit for the 1080 widths.

Sure it would looked "squashed" as a raw image but the game will stretch it out.

That download includes the final GUI files for 16:9 only.

 

 

Dark and light panels. The "titlebar colors" section

In my Green and Tan panels I didn't have to edit these, they control fonts and backgrounds of the panel title area.

This may become important if you make a light panel background, or a Black one like below.

When editing my black version I did change these colours in the titlebar section.... 

Code:
		// titlebar colors - The main title text and BG colours on the panels only like "Options" also handles dim colours of text and Backgrounds
		"TitleText"			"245 245 245 255"  //"255 255 255 255" // White is standard for main titles only - change only on light panels or white is too contrasting (on Black)
		"TitleDimText"		"160 160 160 255"  // "136 145 128 255" //Def is a LT green when opening another panel, the other one is a dull color - changed to a mid grey 
		"TitleBG"			"96 96 96 50"      //"76 88 68 0" // Mid Green note its turned off "0" (last number transparency). Its the background of the main panels title back ground. Leave "0" looks best, so does "50" 
		"TitleDimBG"		"64 64 64 50"      //"76 88 68 0" // Mid Green note its turned off "0"(last number transparency). Its the background of the main panels title back ground. Leave "0" looks best, so does "50" 
  • "TitleText" - The full white was contrasting too much, I lowered it to "245 245 245 255".
  • "TitleDimText" - Like we saw in the steam icon, when opening two panels the one behind will "dim", this controls that text title.
  • "TitleBG" - As you can see in the colour the default mid green color has transparency "0". Its turned off. I turned on a grey and put "50" so it only slightly adjusts the bar at the top of the panel (the active one)
  • ."TitleDimBG" -  same as above but "Dimmed" down when the panel is inactive...that is behind a active panel.

That change looked like this, look closely at the top bar of the active (on top) and disabled (behind) text and backgrounds...

 blackGUI titles text
 Title bar text and background altered in the Black GUI.

 

 

The Main Titles area.

The GUI area also has some defaults that were OK for a Green or Tan GUI but may be out of place for the Black version.

It's the Main titles where you have "New game" "Find servers"...etc..

They can be found in the "BASE SETTINGS" section and is the only section that uses the RGB codes and not the references from the "Colors" section. It is the section called "InGameDesktop // the main GUI text and other adjustments"

While that Yellowish font colors ("238 174 0 255" - "255 186 0 255" - "255 178 67 255" in the top three below) does look OK on most screen backgrounds, and it is a colour that most color blind persons can see, you have to be careful with some combinations. If so then use contrast, simple white, light greys on dark or blacks and dark greys on whiteish backgrounds will help define the text clearly.

Here is that section I changed for the Black GUI...

Code:
 
		}

		InGameDesktop // the main GUI text and other adjustments
		{
			"MenuColor"			"238 174 0 255"   // the inactive New game, Find servers ...ect titles "255 255 255 255" may be better
			"ArmedMenuColor"		"255 186 0 255"   // the active New game, Find servers ...ect titles
			"BlurMenuColor"			"255 178 67 255"  //the active "mouse over" effect of New game, Find servers ...ect titles
			"DepressedMenuColor" 		"16 16 16 255"    // changes when you press a main menu item
			"MenuHintColor"			"104 104 104 255" //didn't notice anything
			"WidescreenBarColor" 		"0 0 0 0"         // the "Day of Defeat" title below "Quit" the background stip along the entire GUI bottom screen
			"MenuItemVisibilityRate"	"0.02"            // time it takes for one menu item to appear
			"MenuItemHeight"		"48"              // this is proportional to resolution
			"GameMenuInset"			"110"
		}
  •  "MenuColor" -           I changed that to White - "255 255 255 255" - Titles are now white
  • "ArmedMenuColor" - I changed that to a Mid grey - "96 96 96 255" - Mouse over text colour 
  • "BlurMenuColor" -     I changed that to a grey than the above. "128 128 128 255" - Mouse over background Blur.

The effect is the menu is now white, on mouse over it is grey and a light grey blur.

The next two, I didn't see any change, I suggest you leave them alone.

  • "DepressedMenuColor" -  "16 16 16 255"       // A dark grey...blue "changes when you press a main menu item" no effect seen.
    "MenuHintColor" -            "104 104 104 255"  //A  Dark grey... Green I didn't notice anything on the change.

The others below that, I normally just leave alone but as you can see they are obvious what they do.

Here is the main menu look after my edits to the black GUI Main titles area, the "Find Servers" is blurred from a mouse over.

 blackgui main titlesPNG
 Black GUI - main titles changed to Whites and greys.

You can see the DAY of DEFEAT image there is still a Tan/Gold.

I didn't change that as I like it for all my GUI's. But as with the other images you can.

It's in Your Drive:\Your folders\steamapps\common\Half-Life\dod\resource

The file is called "game_menu.tga" and it does have another file called "game_menu_mouseover.tga" that doesn't seem to be active in the GUI. 

   

 

Final Tips - when venturing further down the file.

I added a special color in my Colors section the pink test colour.

You should do this too...

//Special color called "test" a pink for locating a item in "Base settings" section
"test" "255 105 180 255" // test color

It is what it is.

The BASE SETTINGS section uses the title of the scheme colours in the colours section. Colors below that section are not a RGB color... they are words...titles, text.

If you are in that BASE SETTINGS section, put in "test" as the color of the function you are trying to find.

For example to find out what ..."FgColor" does...

///////////////////// BASE SETTINGS ////////////////////////
// default settings for all panels
// controls use these to determine their settings
// to test put "test" after the setting, e.g. "FgColor" "test" //"ControlText"
BaseSettings
{
"FgColor"   "test" //"ControlText" //see the menu below too basically these are just following the "Colors" section. Edit the scheme and leave these alone.

 

The fonts section, for other fonts just remember the first section where we adjusted the Net Graph font.

Just do the same process, search for the obvious titles, keep the default, change to a bigger font and see what changed.

I hope you had a coffee while doing all that.

 

Watch out for updates !

When writing this article a interesting comment on the ValVe Software GitHub Half-Life forum was made and added as an "issue".

Here is the quote... (SamVanheer)

The anniversary update added a second TrackerScheme.res file in the Half-Life/valve/resource directory. This file defines things like menu button text color and font.

These changes should be made to the main TrackerScheme.res file in Half-Life/platform/resource instead. The reason for this is that the game is currently loading the platform version and then the version in valve anyway so it's applying those changes no matter what.

Having two files only accomplishes one thing and that's confusing people who want to change things like menu button text color since the color isn't defined in the platform version of the file.

If the idea was to leave the platform version unchanged so mods keep their original scheme values then this isn't working as intended.

 So what does that mean?

We got our file from Half-Life/valve/resource and yes I think Sam is correct, they are different.

They may update files in Half-Life/valve/resource directory and not the dod directory, it will affect the game but if they do that the file we made may get old.

In our case we have more settings and it looks up-to-date...for now. Keep an eye out for new features in updates.

That brings us to... how would we compare the files to see if one is different to the other?

There is a tool you can use. WinMerge.

 

I loaded all three files.

Left - Half-Life/platform/resource directory

Middle - Half-Life/valve/resource directory.

Right -  Half-Life/dod_addon/resource directory (Our file started from the one above)

 

On the Left you can see the program has colored bars to detect file differences.

The Half-Life/platform/resource file on the Left does have less in it. 

 win merge tool
 Win Merge tool - Very handy for comparing files!

 

The point is... look for updates, read what they are, check your custom files with WinMerge.

We..are done. ?

 

But what about the HUD area?

That file has a twin that is just involved.

That is another file called Clientscheme.res.

It's in another article and very similar to what we just did but it controls the HUD panels Color and Font "Scheme".