Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Replace Content Box Titles with Images
Mottie (MVP) 4/8/2009 2:01 PM EST : Replace Content Box Titles with Images
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster


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



Replace Content Box Titles with Images




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
    News
    Information
    Test Text
    Welcome
  • 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; }
TopBottom

Thrashlol (Guild Admin) 4/23/2011 6:28 PM EST : RE: Replace Content Box Titles with Images
Thrashlol
Posts: 36
Becoming Adept!

Where do you put that HTML? Do we put it in all three left side, center, and right side? Also, how does the code distinguish which box to put the image that you are using?
TopBottom

Mottie (MVP) 4/23/2011 9:13 PM EST : RE: Replace Content Box Titles with Images
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Trashlol!

Oh oops, you did find this post... I have duplicates on my Help site as well.

Basically that HTML goes into your custom HTML section for specifically the left, center and right content zones. When you open the Control Panel, go to Custom HTML & Script then look for "Boxes, Left Side", "Boxes, Center" and "Boxes, Right Side". Each one will get the custom HTML I posted above. Make sure you check "Enable?" before Saving Changes.

Edit: Oops, I didn't answer your question. The CSS targets the unique box ID number (as stated in the post, each title on a page should be unique). You could also target specific widgets in any of the three zones by adding ".LeftContentZone", ".CenterContentZone" or ".RightContentZone" in front of the box ID - but it only necessary if you don't have unique widget titles.
TopBottom

Thrashlol (Guild Admin) 4/24/2011 4:10 AM EST : RE: Replace Content Box Titles with Images
Thrashlol
Posts: 36
Becoming Adept!

Okay, I'm still a little confused.

I understand what the CSS does for the default alt text, but, lets say I wanna replace my recruitment titled widget under the recruitment tab. How can I post a .png (which is a recruitment specific .png title) as that title instead of that alt text.

I guess I am little confused as to how the HTML is targeting the widget I want because I posted all CSS, changed names of the widgets to the ones I have and I got the alt text, just need to get images in that spot now.

Thanks,
Thrash
TopBottom

Mottie (MVP) 4/24/2011 10:27 AM EST : RE: Replace Content Box Titles with Images
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Thrashlol!

If you look at the content box HTML, you'll see this image wrapped by the ContentBoxTitle div.
<img src="http://www.axiomfiles.com/Files/111111/$block[title].png" alt="$block[title]">
The URL for the image should match the root directory of your GuildPortal files. Replace the "111111" with the number pointing to your guild file directory. The css is for both the alt text styling in case the image isn't found and the positioning of the image when it does exist.
TopBottom

Thrashlol (Guild Admin) 4/24/2011 3:57 PM EST : RE: Replace Content Box Titles with Images
Thrashlol
Posts: 36
Becoming Adept!

That doesn't really answer my question.

Correct me if I am wrong, but with this code I can specifically target one single widget in a column and change it's title to a .png?

If that is the case, how is this HTML code (not the css, because that is just the alt text that I don't care about if there is an image in the way) targeting a specific widget.
For example: I want my "Recruiting" widget's title to be replaced by a .png, not an alt text, but not my "Guild News" widget's title replaced because the image that I am sourcing is a specific image for "Recruiting"

I am new to a majority to all of this, so I'm sorry if I am making you pull your hair out over this

Thanks,
Thrash



TopBottom

Thrashlol (Guild Admin) 4/24/2011 4:43 PM EST : RE: Replace Content Box Titles with Images
Thrashlol
Posts: 36
Becoming Adept!

I think I figured it out, I feel really dumb, but I had no idea that we had to make the image saved as the correct name

Thanks for all the help though!
TopBottom

~Rhaeven~ (Guild Admin) 9/8/2011 7:36 AM EST : RE: Replace Content Box Titles with Images
~Rhaeven~
Posts: 88
Posts With Wolves

I have a slight problem with centering my images and to place them in the right spot. No matter what i do, it doesn't work. Please if you have the time point my nose in the right direction.
You can see what i mean on my old guild site  Ghost Thank you.
* Come to the dark side.....we have cookies !!! *
TopBottom

Mottie (MVP) 9/8/2011 9:05 AM EST : RE: Replace Content Box Titles with Images
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi ~Rhaeven~!

Actually a newer, better method would be to use a custom font, check out this post. If you can't get that to work, then you can reposition the image using css sort of like this (negative numbers work too)
.ContentBoxTitle { position: relative; top: 2px; left: 2px; }
TopBottom

~Rhaeven~ (Guild Admin) 9/8/2011 9:26 AM EST : RE: Replace Content Box Titles with Images
~Rhaeven~
Posts: 88
Posts With Wolves

Thank you so much, the negative did the trick
* Come to the dark side.....we have cookies !!! *
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%