Logo Rotation - Vbb 4.x

[AdminAdmin is verified member.]

Requirement: Nivo Slider

1. Download and decompress the Nivo Slider archive.
2. Upload the file jquery.nivo.slier.pack.js to your forums 'clientscript' folder.
3. Go to vB AdminCP --> Plugins & Products --> Plugin Manager --> Add New Plugin. Enter the following information:

Product: vBulletin
Hook Location: template_register_var
Title: Nivo Logo Rotator
Execution Order: 5
Plugin PHP Code:

 	$templater = vB_Template::create('banner_rotator');
$templatevalues['banner_rotator'] = $templater->render();
vB_Template::preRegister('header', $templatevalues);

4. Save the Plugin.
5. Go to vB AdminCP --> Styles & Templates --> Style Manager --> Add New Template. Enter the following information:

Title: banner_rotator
Template:

 	<link rel="stylesheet" href="clientscript/nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="clientscript/jquery.nivo.slider.pack.js" type="text/javascript"></script>

<div id="slider">
<a href="[COLOR=Red]your URL[/COLOR]"><img src="[COLOR=Red]link to your image file[/COLOR]" /></a>
</div>

<vb:literal>
<script type="text/javascript">
$(window).load(function() {
var total = $('#slider img').length;
var rand = Math.floor(Math.random()*total);
	$('#slider').nivoSlider({
		effect:'random',
		slices:15,
		animSpeed:500,
		pauseTime:7000,
                startSlide:rand,
		directionNav:false,
		directionNavHide:true,
		controlNav:false,
		controlNavThumbs:false,
                controlNavThumbsFromRel:false,
		keyboardNav:true,
		pauseOnHover:true,
		manualAdvance:false,
		captionOpacity:0.8,
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){}
	});
});
</script>
</vb:literal>

(Note: There are a lot of customizations for Nivo here, so I suggest you looking over the official website to get an idea of what you can do. These settings change the logo every seven seconds or so. Also, with each new logo you can click on it and be taken to a different URL.)

6. Save.
7. Edit the additional.css template. Add at the bottom:

 	/* CSS for Banner_Rotator */
.banner_rotator
#slider {
	position:relative;
	background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
#slider a{
	display:block;
}

8. Save.
9. Edit the header template. Find:

 	<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

Delete or comment it out, then replace add:

{vb:raw banner_rotator}

10. Save.

You should now have a rotating logo in the header of your vB forum.