[TUTORIAL] Simple Guide to Creating Themes

[ancestral]

[font="Palatino, Palatino Linotype, URW Palladio L"]How to Create a New UI Theme for your Mod[/font]
After embarking upon some experimentation due to lack of good documentation I have a clean way to make themes and allow you to save up to 17 MB for redundant icons, images and fonts that already exist in the default installation. This tutorial is designed with getting you started on a new theme from scratch, or starting with the default theme.

This is geared towards creating a new mod, but you can easily take an existing mod and clean out the redundant parts. It’s written with BTS in mind.

[font="Palatino, Palatino Linotype, URW Palladio L"]Easy Download[/font]
Download the attachment below. Find the mod name in CIV4ArtDefines_Misc.xml and YourThemeName.thm as well as the mod folder, simply change the mod name to what you’d like it to be called, and then you’re ready to continue to add content to your mod!

[font="Palatino, Palatino Linotype, URW Palladio L"]From Scratch[/font]

Spoiler :

1. Go to /Beyond the Sword/Mods/ and create your new mod by adding a new folder. Give your mod a name.
2. In it, create the folders Assets/XML/Art/ and also Resource/ .
3. Copy the file from /Beyond the Sword/Assets/XML/Art/CIV4ArtDefines_Misc.xml and put the duplicate in /Beyond the Sword/Mods/Your Mod Name/Assets/XML/Art/CIV4ArtDefines_Misc.xml .
4. Edit the file, making changes:
   
   

   <MiscArtInfo>
     <Type>DEFAULT_THEME_NAME</Type>
     <Path>Mods/Your Mod Name/Resource/YourThemeName.thm</Path>
     <fScale>0.0</fScale>
     <NIF>None</NIF>
     <KFM>None</KFM>
   </MiscArtInfo>

5. In /Beyond the Sword/Resource/ copy the folder Themes/ and the file Civ4.thm and put the duplicates in /Beyond the Sword/Mods/Your Mod Name/Resource/ .
   
6. Edit the YourThemeName.thm file, making changes:
   
   

   resource_path  "Mods/Your Mod Name/Resource";
   include        "Mods/Your Mod Name/Resource/Themes/YourThemeName/Civ4Theme.thm";

7. If you are using a new font, create a new folder in Resource called Fonts/ and place them here. (TrueType and OpenType fonts both appear to be compatible.)
   
   The folder hierarchy will look like this:
   
   
   
   
   
   
8. For all the Civ4Theme files prepend the paths for each image with ../../../../Resource . Yes, that means traverse up 4 directories and go to the Resource folder. This way you can avoid having to bundle all those default targa and font files which come with Civ IV already, thereby saving considerable space. In Civ4Theme_Common.thm a chunk of this will look like:
   
   

     .File_Unknown_Small   = GBitmap("../../../../Resource/Icons/Civ4/file_16x16.tga");
     .File_Unknown_Medium  = GBitmap("../../../../Resource/Icons/Civ4/file_32x32.tga");
     .File_Text_Small      = GBitmap("../../../../Resource/Icons/System/file text_16x16.tga");
     .File_Text_Medium     = GBitmap("../../../../Resource/Icons/System/file text_32x32.tga");
     .File_Image_Small     = GBitmap("../../../../Resource/Icons/System/file paint_16x16.tga");
     .File_Image_Medium    = GBitmap("../../../../Resource/Icons/System/file paint_32x32.tga");

9. If you end up using your own custom icons, no worries. You can create an Icons folder in your mod’s Resource folder and then on an individual basis you can change the resource location. If you had an icons folder but you’re just using the default images then you’re good to delete the folder now.

[font="Palatino, Palatino Linotype, URW Palladio L"]Modifying Fonts[/font]
One of the great things about themes is the ability to set the game text to your own chosen typefaces. To change the fonts used in your mod, follow these steps:

1. Edit Civ4Theme_Common.thm and scroll down to the with SF_CtrlTheme_Civ4_Control_Font section.
2. To change the font from “Sylfaen” to another font, like “PT Sans”, just change the name. In this example, font file is named [font="Courier New”]PTC55F.ttf[/font] but the system calls the typeface “PT Sans” so a chunk of the file should look like this:
   

       GFont .Size1_Normal     = GFont("PT Sans", "Regular",     12, GFlags(GFontFeature, GFC_FONT_ALPHA));
   //  GFont .Size1_Bold       = GFont("PT Sans", "Bold",        12, GFlags(GFontFeature, GFC_FONT_BOLD, GFC_FONT_ALPHA));
   //  GFont .Size1_Italic     = GFont("PT Sans", "Italic",      12, GFlags(GFontFeature, GFC_FONT_ITALIC, GFC_FONT_ALPHA), 0, GRectMargin(1));
   //  GFont .Size1_BoldItalic = GFont("PT Sans", "Bold Italic", 12, GFlags(GFontFeature, GFC_FONT_BOLD, GFC_FONT_ITALIC, GFC_FONT_ALPHA), 0, GRectMargin(1));

   
   (The file name could be different than the font name; the easiest way to find out is to install the font if you haven’t already and see how WordPad or TextEdit shows the font name in the Font Panel.)
   
   The format works like this: GFont(typeface, style, pointSize, GFlags(GFontFeature, flags), [unknown], margin);
   
   typeface is the font family name. style is probably going to be 99% of the time “Regular”, “Bold”, “Italic”, or “Bold Italic”. pointSize is the size of the text, generally 10 points and higher. margin draws a number of pixels for top, bottom, left and right.
   
   You can choose to have different fonts for different sizes. You could even change Bold to be Italic instead. Just be sure the fonts are in the correct folder and you specify the fonts right.

Hopefully this helps someone out. If you have questions, or run into trouble with what I have, let me know.

 

[deanej]

I've linked to this from the modiki.

 

[BackseatTyrant]

How do I edit vertical spacing?