Page Index Toggle Pages: 1 Print
Changing the Forum Logo (Read 7531 times)
Captain John

Changing the Forum Logo
Sep 26th, 2007 at 7:52pm
Print Post  
How Do I Put My Own Logo At The Top Of My Boards?

In order to replace the default YaBB logo with your own, you will need to go to Admin Center -> Templates and edit your template's html file.

Within that template file, you should find some code that looks something like:

Select All
<a href=""><img src="<yabb images>/yabblogo.png"
 alt="YaBB - Yet another Bulletin Board" border="0" /></a>

Let's pick that code apart.

Select All
<a href=""> 

That's a simple HTML link. You can replace the "" with any other web address you desire.

Select All
<img src="<yabb images>/yabblogo.png" 

That's the beginning of a rather simple HTML image tag. The <yabb images> tag refers to the default YaBB images directory. That directory is usually something like /public_html/yabbfiles/Templates/Forum/default. The "yabblogo.png" refers to the filename of the logo image.

If you have your own logo, you should replace that entire line with the address to your logo image.

alt="YaBB - Yet another Bulletin Board"

That's the alternate text that will display in place of the image, in case the image cannot be loaded or located on your server. You can replace that text with anything you desire.

Once you have changed all of those elements to meet your standards, you will have your own YaBB logo in place of the default logo, and clicking on it will lead you to the web address you desire, rather than leading you to the main YaBB web site.

Back to top
IP Logged
OH Eng

Video Tutorial - How to Change Your Forum's Logo Image
Reply #1 - Aug 15th, 2008 at 5:04am
Print Post  
Please read before watching the video.

Note: This tutorial will show the Admin how to make the necessary changes in their forum's template to change the forum's logo, the link associated with the logo (where you go if you click on it), and the Alt text, which is the text you see when you mouseover the logo.  This is also the text that will show in place of your logo in the event the browser cannot render the image.

First, a breakdown of what we will change.  The HTML code we are looking for in the template is this:
Select All
<td align="center" valign="middle" width="460" height="100" rowspan="2">
<a href=""><img src="{yabb images}/yabblogo.png"
alt="YaBB - Yet another Bulletin Board" border="0" /></a></td> 

There are 3 sections that will concern us -

Select All
1. <a href=""> 

The highlighted URL can be any URL.  This is where a user will go when they click on the logo.  For this tutorial, it will go to a test page with some simple text.

Select All
2. <img src="{yabb images}/yabblogo.png"  

This is the path to the file your template will use as a logo.  You can change this one of three ways:

- upload your image to the same directory as the existing yabblogo.png image.
Normally, that will be the yabbfile2/Templates/Forum/default directory.  

- Simply replace the existing file yabblogo.png with your own image, renaming it yabblogo.png

- use an image from another directory, and provide the full URL of the image (for example, )

This tutorial will use the first method, and the image is already uploaded.  Since I am altering the black template, the folder my image is in
the yabbfiles/Templates/Forum/black folder.

Select All
3. alt="YaBB - Yet another Bulletin Board" 

This is the Alt text that you will see if you mouseover the logo, or if the logo doesn't render in a browser.  You can change the text to any text you want.

The tutorial starts on the home page (the Board Index) with the Administrator logged in.  Notice it uses the default logo image.  To change it, we will click on the Admin tab to go to the Admin Center/Forum Layout/Template.  

Normally, you would be editing the file default/default.html to edit the template that comes with YaBB, but since I am using a custom template (Black), the file I will be editing is black/black.html.  The basic contents are the same.  So we select the file to edit in the box next to the word "Templates."

In the editing window, we scroll down to find the text shown in the code box (above in Notes section).

First we will change the destination URL, where a user will be taken if they click on the logo.  For purposes of this tutorial, we will use a test page on a website.  So we replace the URL inside the quote marks, changing it from to the URL for the test page.

Next, we replace the logo image. Since my new image is already uploaded to the same directory as the existing yabblogo.png image, I do not have to change the yabb images inside the brackets.  We could, if we wanted to, replace it and use the full URL of the image, but let's keep it simple and just replace the file name.

Finally, we replace the Alt text with words of our own choice.

When complete, we hit the Save button and we are done.  We return to our Board Index and see the default logo has changed to the new image.

Whenever you make a change, it's always good to test it to make sure it works, so we will mouseover the new logo and check the Alt text.  Then we click on the logo to test that it takes us where we want it to, and we see it does.  We'll click the link to return to the forum's Board Index and end the tutorial.

How to Change the Forum Logo Tutorial
Back to top
IP Logged
Captain John

Replacing the Forum Logo with a Flash file.
Reply #2 - Oct 15th, 2007 at 9:53pm
Print Post  
Replace the YaBB Codex logo in the default template with the code below.

Select All
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=",0,40,0" width="_width_" height="_height_" id="myMovieName">
	<param name="movie" value="" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#FFFFFF" />
	  <param name="menu" value="false'
	<embed src="" quality="high" bgcolor="#FFFFFF" type="application/x-shockwave-flash" pluginspage=""></embed>

Back to top
IP Logged
Page Index Toggle Pages: 1
  « Board Index ‹ Board  ^Top