The above image is classified as your forums default logo, after you've set up your forumer board that logo will be displayed on the default.
To change this image to one of your own custom images follow these steps:
Upload your image to an online
image host and get the
Direct URL.
Then go to your
Admin CP ->
Skins & Templates ->
HTML Templates ->
Manage HTML.
Now click on the
Global HTML elements link and then go down to the 14th section entitled
Board Header (logo, links, etc) click on the
Edit Single link to the right of this section.
Once in this section of the HTML templates you'll be displayed with a code, in this code find the following:
Quote:
<!--IBF.BANNER-->
<div id='logostrip'>
<a href='{ibf.script_url}' title='Board Home'><img src='{ibf.vars.img_url}/logo4.gif' alt='Powered by Invision Power Board' border="0" /></a>
</div> |
and replace the code marked in
red with the URL of the image you wish to use as your logo.
Once you've completed the edit click on the
Update templates button.
To change your logo for your
IP Dynamic Lite page, do the following.
Goto
AdminCP -> HTML Templates -> Manage HTML -> IP Dynamic Lite -> MAIN TEMPLATENow this is what you should have for the code in there.
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="IPDynamic Lite">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title><!--CS.TEMPLATE.TITLE--></title>
<!--CS.TEMPLATE.JAVASCRIPT-->
<!--CS.TEMPLATE.CSS-->
</head>
<body>
<div id='ipbwrapper'>
<!--Header-->
<div id='logostrip'>
<a href='{ibf.script_url}' title='Board Home'><img src='{ibf.vars.img_url}/logo4.gif' alt='Powered by Invision Power Board' border="0" /></a>
</div>
<table width="100%" cellspacing="6" id="submenu">
<tr>
<td><a href='{ibf.vars.home_url}'>{ibf.vars.home_name}</a><!--IBF.RULES--></td>
<td align="right">
<img src="{ibf.vars.img_url}/atb_help.gif" border="0" alt="" /> <a href='{ibf.script_url}act=Help'>{ibf.lang.tb_help}</a>
<img src="{ibf.vars.img_url}/atb_search.gif" border="0" alt="" /> <a href='{ibf.script_url}act=Search&f={$ibforums->input['f']}'>{ibf.lang.tb_search}</a>
<img src="{ibf.vars.img_url}/atb_members.gif" border="0" alt="" /> <a href='{ibf.script_url}act=Members'>{ibf.lang.tb_mlist}</a>
<img src="{ibf.vars.img_url}/atb_calendar.gif" border="0" alt="" /> <a href='{ibf.script_url}act=calendar'>{ibf.lang.tb_calendar}</a>
<!--IBF.CHATLINK-->
</td>
</tr>
</table>
<!--CS.TEMPLATE.LINKS-->
<!--End Header-->
<!--Main Content-->
<table width="100%" class='tableborder' cellspacing="0" cellpadding="6">
<tr>
<td width="200" class='row3' valign="top">
<!-- LEFT -->
<!--CS.TEMPLATE.WELCOMEBOX-->
<!--CS.TEMPLATE.SEARCH-->
<!--CS.TEMPLATE.SITENAV-->
<!--CS.TEMPLATE.CHANGESKIN-->
<!--CS.TEMPLATE.ONLINEUSERS-->
<!--CS.TEMPLATE.POLL-->
<!--CS.TEMPLATE.LATESTPOSTS-->
<!--CS.TEMPLATE.RECENTARTICLES-->
<!--CS.TEMPLATE.AFFILIATES-->
<!--END LEFT-->
<br /><img src='{ibf.vars.img_url}/spacer.gif' alt='' width='200' height='1' />
</td>
<!--SPACER-->
<td width="5" class='row3'> </td>
<td width="90%" class='row3' valign="top">
<!--MAIN-->
<!--CS.TEMPLATE.ARTICLES-->
<!--END MAIN-->
</td>
</tr>
<!--End Main Content-->
<tr>
<td colspan='3' class='row3' align='center'>
<!--CS.TEMPLATE.COPYRIGHT-->
<!--CS.TEMPLATE.DEBUG-->
</td>
</tr>
</table>
<div class='titlemedium'> </div>
</div>
</body>
</html> |
Now change what is in red to the link to your banner.
======================================================================
You can make your logo flexible so it will adjust according to the browser width ...
This is what you have to do:
After the url of your image in the code add
width="100%" so the code looks like this:
Quote:
<!--IBF.BANNER-->
<div id='logostrip' >
<a href='{ibf.script_url}' title='Board Home'><img src='http://your image url' width="100%" alt='Powered by Invision Power Board' border="0" /></a>
</div> |
PS: if the image is too stretched or to squeezed the quality can be affected... it will adjust in proportion though.
Logo Url Re-directing (52.81%)
If you wish for your logo to re-direct to another website upon clicking it...