<div id="box_$block[title]">
<div class="ContentBox">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="topleft"></td>
  <td class="toptile"><div class="ContentBoxTitle"><img src="http://www.axiomfiles.com/Files/111111/$block[title].png" alt="$block[title]"></div></td>
  <td class="topright"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="lefttile"></td>
  <td class="ContentBoxBody2">$block[content]&nbsp;</td>
  <td class="righttile"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
  <td class="bottomleft"></td>
  <td class="bottomtile">&nbsp;</td>
  <td class="bottomright"></td>
</tr>
</table>
</div>
<br>
</div>

• ADD THE CODE FIRST: You can add the Custom Content Box HTML without worrying about having all your images done. When the <img> tag doesn't find an image, it displays the "alt" text instead. The style may not match your site so you may have to add some CSS (see below). So when you complete a title image, upload it to your hosting site and it should automatically display the image.


• IMAGES: First off, you need title images. They must all be the same type of image - In my opinion, the best image file type to use is the ".png". The font I used is called Scriptina. Here are my examples:
  
  

  Text	Image	Image URL
  News		http://www.axiomfiles.com/Files/272209/News.png
  Information		http://www.axiomfiles.com/Files/272209/Information.png
  Test Text		http://www.axiomfiles.com/Files/272209/TestText.png
  Welcome		http://www.axiomfiles.com/Files/272209/Welcome.png



• HOSTING: Now save all your images into the same place; BUT, the site can't be photobucket (or any site that does the same thing photobucket does), because if an image isn't found, it displays an "image not found" image like this:
  
  
  
  I saved these images to my GuildPortal file area. Replace the URL root in orange in the Content Box HTML above with your root URL and the file type (.png), and leave all the parts in green intact.
  
  <img src="http://www.axiomfiles.com/Files/111111/$block[title].png" alt="$block[title]">


• SPACES: One thing about using the GuildPortal file area is that it removes all spaces from the file name. So in my examples above, I have a "Test Text" area. The image it will look for will be named "Test Text.png" but when saving it to GuildPortal (axiomfiles.com) the file name is changed to "TestText.png". So you'll need this tiny script to remove the space from the image name.
  

  <script type="text/javascript">
  $(document).ready(function(){
   // Replace image filename spaces with nothing
   $(".ContentBoxTitle img").each(function(){
    $(this).attr('src', unescape($(this).attr('src')).replace(/\s/g,"") );
   })
  })
  </script>

  * Note: This is an issue with GuildPortal, so if you save your image elsewhere, don't bother with this script.


• CSS: One last thing. I had to add some additional CSS to add style to the image alternate text, as it doesn't follow the CSS of the ContentBoxTitle. Here are my examples for coloring and positioning the images:
  

  #box_Information .ContentBoxTitle img { color:#a52a2a; font-size:12pt; position:relative; top:10px; }
  #box_News .ContentBoxTitle img { color:#a52a2a; font-size:12pt; position:relative; top:20px; }
  #box_Test_Text .ContentBoxTitle img { color:#000000; font-size:12pt; position:relative; top:10px; }
  #box_Welcome .ContentBoxTitle img { color:#ffffff; font-size:18pt; }
  

  if you don't have multiple styles on your site, you can just add an overall style for the alt text.
  

  img { color: #ffffff; }