YaBB Community and Support Forum
YaBB Home About YaBB Download YaBB YaBB Support Customize Your Forum Development Contribute to the Project

This Codex is Read Only, there is No reason or requirement to Login to view any and all posts.

FoxLingo Afrikaans Arabic Bulgarian Catalan Chinese Simplified Chinese Traditional Croatin Czech Danish Nederlands/Dutch Esperanto Filipino Finnish French German Greek Hebrew Hungarian Icelandic Indonesian Italian Japanese Korean Norwegian Polish Portuguese Portuguese Brazilian Romanian Russian Serbian Slovenian Spanish Swedish Thai Turkish Welsh
Page Index Toggle Pages: 1
Changing the Forum Logo (Read 6461 times)
Changing the Forum Logo  {yabbadmin}
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:

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

Let's pick that code apart.

Code Select All
<a href="http://www.yabbforum.com"> 

That's a simple HTML link. You can replace the "http://www.yabbforum.com" with any other web address you desire.

Code 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.


Video Tutorial - How to Change Your Forum's Logo Image  {yabbadmin}
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 Select All
<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 Select All
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 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, 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 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 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

Replacing the Forum Logo with a Flash file.  {yabbadmin}
Replace the YaBB Codex logo in the default template with the code below.

Code Select All
	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="_width_" height="_height_" id="myMovieName">
	<param name="movie" value="http://www.yourdomain.com/images/forumsbanner.swf" />
	<param name="quality" value="high" />
	<param name="bgcolor" value="#FFFFFF" />
	  <param name="menu" value="false'
	<embed src="http://www.yourdomain.com/images/forumsbanner.swf" quality="high" bgcolor="#FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>


Page Index Toggle Pages: 1

Get Yet another Bulletin Board at SourceForge.net. Fast, secure and Free Open Source software downloads Support This Project BoardMod - YaBB features and templates YaBB Codex - support on installation and usage YaBB Toolbar for your browser YaBB Facebook Group Page

Valid RSS Valid XHTML Valid CSS Powered by Perl
YaBB Support Codex » Powered by YaBB Next Edition!
YaBB Forum Software © 2000-2011. All Rights Reserved.