IPB guru help needed! Problems with special header!

Discussion in 'IP.Board Discussions' started by DaveUK, Dec 21, 2010.

  1. DaveUK

    DaveUK Regular Member

    Joined:
    Nov 3, 2009
    Messages:
    21
    Likes Received:
    1
    Ive had a header logo designed which allows for rotation banners, however im not quite sure how I implement it with IPB! I did ask the desiner but they wasnt much help.

    I was sent the JPEG image which I know how to upload and set as the header. I was then sent a <img> file which I upload and place my banners inside.

    I was then sent a html file which has all the code in (banner links, rotation speed etc) but I have no idea where to place this code.

    From having a play around it appears I need to place it in my "defaultHeader" template, but im struggling to get the below html to work with the default header code already in place

    Defaut Header Code
    Code:
    <a href='{$this->settings['board_url']}'  title='{$this->lang->words['go_home']}' rel="home"  accesskey='1'><img src='{parse replacement="logo_img"}'  alt='{$this->lang->words['logo']}' class="logo" width='100%'  height='100%' /></a>


    New Banner HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rotator ::</title>
<style type="text/css">
body {
margin:0;
padding:0;
color: #4E3D4E;
font: normal 0.6em sans-serif, Arial;
background-color: #EDEDED;
}
h1 {
padding-left: 0px;
font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
text-transform:uppercase;
letter-spacing:.0.5em;
}
a {
outline: none;
}
</style>

<style type="text/css">
/* rotator in-page placement */
div#rotator {
position:relative;
}
/* rotator css */
div#rotator ul li {
float:left;
position:absolute;
list-style: none;
left: 27px;
top: 16px;
}
/* rotator image style */    
div#rotator ul li img {
background: #FFF;
}
div#rotator ul li.show {
z-index:500
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">

function theRotator() {
//Set the opacity of all images to 0
$('div#rotator ul li').css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$('div#rotator ul li:first').css({opacity: 1.0});

//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('rotate()',2000);

}

function rotate() {    
//Get the first image
var current = ($('div#rotator ul li.show')?  $('div#rotator ul li.show') : $('div#rotator ul li:first'));

//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ?  ((current.next().hasClass('show')) ? $('div#rotator ul li:first')  :current.next()) : $('div#rotator ul li:first'));    

//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

};

$(document).ready(function() {        
//Load the slideshow
theRotator();
});

</script>
</head><body>
<table width="1565" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="280" valign="top"  background="http://www.doverlocals.co.uk/forum/public/style_images/20_logo.jpg"  style="background-repeat:no-repeat;"><table width="100%"  border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="475"><div id="rotator">
<ul>
<li class="show"><img src="img/01.jpg" width="468" height="60"  alt="pic1" /></li>
<li><img src="img/02.jpg" width="468" height="60"  alt="pic2" /></li>
<li><img src="img/03.jpg" width="468" height="60"  alt="pic3" /></li>
</ul>
</div></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table></td>
</tr>

</table>
</body></html>
    Any help really would be appreciated :)
     
    DaveUK, Dec 21, 2010
    #1
  2. Webmist

    Webmist Champion

    Joined:
    Jan 30, 2008
    Messages:
    305
    Likes Received:
    18
    Location:
    US
    First Name:
    Jen
    It lookes like you are placing that code in the defaultheader when it should be put in the globalTemplate. The default header is used, well by default for the link itself.

    Me personally, I would break the code up and put it in the appropiate templates. CSS is the css template, javascript in the globaltemplate, and banner code in the defaultHeader.
     
    Webmist, Dec 23, 2010
    #2

Share This Page