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

Fabrysse

Charming-snake learner
Joined
Sep 11, 2006
Messages
430
Location
Toulouse - France
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 :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 :
      Code:
      // *** 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 :
      Code:
      <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 :
    Code:
    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)


  • 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

Charming-snake learner
Joined
Sep 11, 2006
Messages
430
Location
Toulouse - France
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 :
 

dutchking

Deity
Joined
Apr 30, 2007
Messages
3,317
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. :D
 

Fabrysse

Charming-snake learner
Joined
Sep 11, 2006
Messages
430
Location
Toulouse - France
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. :D

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

dutchking

Deity
Joined
Apr 30, 2007
Messages
3,317
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! :lol: He was the guy who wrote journal entries about modding the hud 3 years ago. Where Toft started out. :)
 

dutchking

Deity
Joined
Apr 30, 2007
Messages
3,317
There's one small problem, the corporation button is fixed, but the Espionage button is still blank. :hmm: 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! :mischief: 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

Charming-snake learner
Joined
Sep 11, 2006
Messages
430
Location
Toulouse - France
There's one small problem, the corporation button is fixed, but the Espionage button is still blank. :hmm: 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! :mischief: 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

Deity
Joined
Apr 30, 2007
Messages
3,317
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

WoC Team Manager
Joined
Aug 25, 2006
Messages
2,326
Location
Florida
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?
 

TAfirehawk

WoC Team Manager
Joined
Aug 25, 2006
Messages
2,326
Location
Florida
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.
 
Joined
Nov 23, 2006
Messages
3,396
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

Emperor
Joined
Dec 16, 2000
Messages
1,773
Location
Washington, DC USA
Thanks for the good guide. :goodjob:

  • 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

WoC Team Manager
Joined
Aug 25, 2006
Messages
2,326
Location
Florida
Thanks for the good guide. :goodjob:



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

Deity
Joined
Apr 30, 2007
Messages
3,317
I haven't tried fonts yet. I think I'll just stick with the windows default fonts if I do try though.
 

OzzyKP

Emperor
Joined
Dec 16, 2000
Messages
1,773
Location
Washington, DC USA
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

Fallout Scrubber
Joined
Mar 4, 2006
Messages
3,058
Location
Poland, EU
:thanx:
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 :banana: (I didn't knew i need to change .xml file) Now works awsome and i won't go to bed frustrated ;) :lol:
 
Top Bottom