Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Theme > Replace Content Box Titles with Images
Mottie (SuperAdmin) 4/8/2009 2:08 PM EST : Replace Content Box Titles with Images
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike


** Update: Consider using Custom Fonts now instead of using images **
 

Replace Content Box Titles with Images

GuildPortal admin site link to original post



You can see this working on my test-site 3... Making this change is actually surprisingly simple. You just need to modify the Content Box HTML (Control Panel > Custom Code > Content Boxes: Left Side, Center, Right Side). The major change from previous versions of the Content Box HTML is in green & orange below.

Content Box HTML
<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>
Using this Code
  • 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; }
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%