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:
| Code |  |
<td align="center" valign="middle" width="460" height="100" rowspan="2">
<a href="http://www.yabbforum.com"><img src="{yabb images}/yabblogo.png"
alt="YaBB - Yet another Bulletin Board" border="0" /></a></td>
There are 3 sections that will concern us -
| Code | |
1. <a href="http://www.yabbforum.com">
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.
| Code | |
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,
http://www.yoursite.com/myimages/mylogo.jpg )
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.
| Code | |
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
www.yabbforum.com 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
Home
Pages: 1
