[TUT] EASY : Modify UI/HUD colors & fonts in BtS

[Fabrysse]

You have to know that english is not my first language. So if something is not clear, please ask questions, I'll try to answer and help you...

Notes :
Toft has made several UI/HUD colors. I used his mods to create mines. This tutorial is written by me, but his work represents 80% of what I know about UI/HUD modifications.
And, I listen historical members, Ryanth (I don't know him) was the first one who tried to mod HUD. Even if I never seen his work, I give him credits...

• To begin, download one of my Mods as an exemple :
  • UI/HUD Gold
  • UI/HUD Green
  In those Mods the file "Resource\Themes\Civ4\Civ4Theme_HUD.thm" has been modified (lines 882 to 892). You won't have to do that.
  If you have any problem with the advisor's icons at top-right of main interface, open this file in any text editor, search for "../Beyond the Sword/Resource/Civ4/HUD/HUD_BTS_icons.tga" and replace it with "Resource/Civ4/HUD/HUD_BTS_icons.tga".

• Unzip the folder in [Your Civilization IV folder]\Beyond the Sword\Mods"

• If you rename the unzipped folder or if you use it in an other Mod :
  • Open the file "Resource\Civ4.thm" (with any text editor), and change the text to :
    

    // *** Control Bitmap Theme file
    
    // Set the resource 
    resource_path	"Mods/[B][THE NAME OF YOUR MOD][/B]/Resource";
    
    // Setup common properties
    include			"Mods/[B][THE NAME OF YOUR MOD][/B]/Resource/Themes/Civ4/Civ4Theme.thm";

  • Open the file "Assets\XML\Art\CIV4ArtDefines_Misc.xml" and search for "DEFAULT_THEME_NAME". In the next line, change the "path" to :
    

    <Path>Mods/[B][THE NAME OF YOUR MOD][/B]/Resource/Civ4.thm</Path>

• To modify the color : Open the file "Resource\Themes\Civ4\Civ4Theme_Common.thm", and go to the line 204 (you'll find th line 203 by searching "// Used for backgrounds of Window and Menu/ComboBox popup")
  
  The line 204, for the gold color contains :
  

  GColor( 239,209,111,150)

• Modify the 3 first values.
  • You have to know that your work with the RGB system : the first value (239 here) is for Red, the second (209 here) is for Green, and the third (111 here) is for Blue.
  • A RVB value may be between 0 and 255 (0 = don't add this color, 255 = maximum of this color, 20 = a little bit of this color, etc.).
  • Some exemples of values :
    • a RED could be : GColor( 240,10,10,150)
    • a GREEN could be : GColor( 10,240,10,150)
    • a BLUE could be : GColor( 10,10,240,150)
    • a YELLOW could be : GColor( 240,240,10,150) (red + green = yellow)
    • a MAGENTA could be : GColor( 240,10,240,150) (red + blue = magenta)
    • a CYAN could be : GColor( 10,240,240,150) (green + blue = cyan)
    • a BLACK could be : GColor( 20,20,20,150) (low values : near to black)
    • a GREY could be : GColor( 100,100,100,150)
    • a WHITE could be : GColor( 255,255,255,150) (hight values : near to white)

• Transparency :
  Modify the 4th value ("150" in this exemple) to modify the transparency. Read here for more explainations (thanks dutchking and TAfirehawk).

• To modify the fonts : go to the line 371(find it by searching "with SF_CtrlTheme_Civ4_Control_Font")

• You'll find 5 sizes for the texts (form size0 to size4). Modify the font with your font(s). Each text size can have a different font : Why not have a special font for the titles (size4) for exemple ?...

• If you change the font to a new one, copy/paste your font file from your folder "C:\WINDOWS\Fonts" to "Resource\Fonts" if this font can be distributed (look at the copyright). If not, change your font.
  You can find a lot of free fonts, for exemple on http://www.downloadfreefonts.com/

 

[Fabrysse]

In the HUD_icons you'll find all the advisor's buttons (top-right of the main interface).

To modify these icons, just open et change the pics in the two files :

• "Resource\Civ4\HUD\HUD_icons.tga"
• "Resource\Civ4\HUD\HUD_BTS_icons.tga"

Be carefull, you'll have to modify 2 things for each file :

• The pics (several elements for each one : normal, roll-over, clic, etc)
• The Alpha channel that creates the transparency of the background.

To open/modify the .tga files, you can use :

• The Gimp with TGA plug-in

 

[dutchking]

Nice tutorial! It'll help a lot. I'd give Toft some credit too, and maybe Ryanth. They were the first ones to figure this stuff out.

 

[Fabrysse]

Nice tutorial! It'll help a lot. I'd give Toft some credit too, and maybe Ryanth. They were the first ones to figure this stuff out.

You're right. I've added Toft. But I can't find any user called Ryanth...

 

[dutchking]

You're right. I've added Toft. But I can't find any user called Ryanth...

He hasn't been on in 2 years anyway! He was the guy who wrote journal entries about modding the hud 3 years ago. Where Toft started out.

 

[dutchking]

There's one small problem, the corporation button is fixed, but the Espionage button is still blank. Can't be that big of a problem, eh? Probably simple...
[EDIT] I fixed it, you forgot to change the Espionage button in your UI! It's very simple, all you have to do is delete the "..\Beyond the Sword\Resource" in some line above 804 or something, the same way you did the corporation button.

 

[Fabrysse]

There's one small problem, the corporation button is fixed, but the Espionage button is still blank. Can't be that big of a problem, eh? Probably simple...
[EDIT] I fixed it, you forgot to change the Espionage button in your UI! It's very simple, all you have to do is delete the "..\Beyond the Sword\Resource" in some line above 804 or something, the same way you did the corporation button.

I've added a line in the first post about that.
Thanks.
Wich color did you use ? One of mines, a Toft's one or one that you created ?

 

[dutchking]

Made a tourquoise-grayish-silverish one for my mod. It mixes in good with the music and menu. I made my own. Just copied the Resource folder from Vannila, then put the BTS buttons there, and then fixed it up like you said! Works perfect, thanks for this tutorial!

 

[TAfirehawk]

I am using the Dark Blue UI with Blue Marble terrain and Times New Roman font....the transparency of the popup windows is a bit too much and makes the text harder to read. Any info on changing the level of opacity/tranparency?

 

[dutchking]

The fourth value:

a BLUE could be : GColor( 10,10,240,150)

I believe controls opacity, anywhere from 0 to 255 255 being solid. I think.

 

[TAfirehawk]

The fourth value:

I believe controls opacity, anywhere from 0 to 255 255 being solid. I think.

You are correct....I played with it after I posted and got the Dark Blue UI Mod working nicely with the Blue Marble Terrain and my font tweak in the WoC.

 

[Fabrysse]

The fourth value:
I believe controls opacity, anywhere from 0 to 255 255 being solid.

Very interesting. I added a line about this 4th value in the tut.
Thanks dutchking and TAfirehawk

 

[snipperrabbit!!]

I'm doing one now, thanks.

 

[dutchking]

http://forums.civfanatics.com/showthread.php?t=136949
There's Rayanth's diary thing.
Maybe we can build on his theorys and figure out how to mod the HUD (the little borders surrounding the themes) And make an ultimately customizable interface!

 

[snipperrabbit!!]

To begin, download one of my Mods as an exemple :
UI/HUD Gold
UI/HUD Green
In those Mods the file "Resource\Themes\Civ4\Civ4Theme_HUD.thm" has been modified (lines 882 to 892). You won't have to do that.
If you have any problem with the advisor's icons at top-right of main interface, open this file in any text editor, search for "../Beyond the Sword/Resource/Civ4/HUD/HUD_BTS_icons.tga" and replace it with "Resource/Civ4/HUD/HUD_BTS_icons.tga".

Fabrysse, I found that it doesn't work if you keep The Resource folder in the path. One must replace "../Beyond the Sword/Resource/Civ4/HUD/HUD_BTS_icons.tga" with "Civ4/HUD/HUD_BTS_icons.tga".

 

[OzzyKP]

Thanks for the good guide.

• To modify the fonts : go to the line 371(find it by searching "with SF_CtrlTheme_Civ4_Control_Font")

• You'll find 5 sizes for the texts (form size0 to size4). Modify the font with your font(s). Each text size can have a different font : Why not have a special font for the titles (size4) for example ?...

• If you change the font to a new one, copy/paste your font file from your folder "C:\WINDOWS\Fonts" to "Resource\Fonts" if this font can be distributed (look at the copyright). If not, change your font.
  You can find a lot of free fonts, for example on http://www.downloadfreefonts.com/

I can't get this to work properly. Most of the fonts I've tried don't work. But a few do. And I can't at all figure out the difference between the working ones and the non-working ones. Any help is appreciated.

 

[TAfirehawk]

Thanks for the good guide.



I can't get this to work properly. Most of the fonts I've tried don't work. But a few do. And I can't at all figure out the difference between the working ones and the non-working ones. Any help is appreciated.

I had to go thru a lengthy trial and error procedure....I found no pattern linking 'good' or 'bad' to font data reported by Windows

 

[dutchking]

I haven't tried fonts yet. I think I'll just stick with the windows default fonts if I do try though.

 

[OzzyKP]

I had to go thru a lengthy trial and error procedure....I found no pattern linking 'good' or 'bad' to font data reported by Windows

Darn.

I've noticed that some font filenames are capitalized and some have capitalized extensions. Did that make a difference at all in your testing?

If I can at least be sure that there isn't something else causing the trouble I can at the very least do my trial and error quicker to find a font I like for my mod.

 

[asioasioasio]

I tried to get Resources to game for about three hours (comparing final frontier etc.) - without result.
And than i looked here and find this tutorial (I didn't knew i need to change .xml file) Now works awsome and i won't go to bed frustrated