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