Forum Display Enhancements - Logo Rotation

I had a client who wanted a rotating logo system that allowed them to have fancy transitions and have each logo link to a specific page. No mod I could find allowed this so, utilizing a jQuery app called Nivo Slider, I've managed to create exactly what they wanted.

Please note that I've only attempted this with a fixed theme. I do not know how it will behave with a fluid one. If someone wants to test it and let me know I'll make changes to the instructions as necessary.

DEMO

Special Thanks: Lynne for helping me get the plug-in portion working properly.

Requirement: Nivo Slider

1. Download and decompress the Nivo Slider archive.
2. Upload the files jquery.nivo.slider.pack.js and nivo-slider.css 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="your URL"><img src="link to your image file" /></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:

<div style="width:XXXpx; height:XXXpx;">
{vb:raw banner_rotator}
</div>

(Replace the "XXX" in width and height to that suite your graphic. Width might need a little extra room so experiment a bit.)

10. Save.

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

Version History
0.7: Added code at step 9 to help lock the header dimensions for your logo.
0.6: Fixed IE bug
0.5: Initial Release

[tekram]

Yes make it to 4.0.8 please....

[thunderclap82]

The developer of my theme has said he plans to have the theme updated for 4.0.8 within a week. Once I can upgrade successfully I will look into the 4.0.8 issue.

[abbasbsp]

Originally Posted by thunderclap82

Is your template fixed or fluid? If it's fixed create a banner the exact size you want with the logo in the middle.

Why not be made by using the code, so that all can be used template, I'm sure you can and be able to find a solution under centering logo

[thunderclap82]

I upgraded to vB 4.0.8 today and the rotating logo still works fine. I'm not sure why others are having the problem mentioned above.

[baghdad4ever]

Originally Posted by thunderclap82

I upgraded to vB 4.0.8 today and the rotating logo still works fine. I'm not sure why others are having the problem mentioned above.

we put like that

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

is that right???


note : in the demo site the login area gone away behind the banner

[thunderclap82]

Originally Posted by baghdad4ever

we put like that

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

is that right???

Yes. That's exactly right.

note : in the demo site the login area gone away behind the banner

I was working on some other template issues. The site should be fine again.

[baghdad4ever]

thanks for your update

plz i have 2 questions

1- how to center the logo

2- how to show the login area above the logo

bec now the login behind logo

thanks again

[thunderclap82]

Originally Posted by baghdad4ever

1- how to center the logo

2- how to show the login area above the logo

1. To center modify the following code:

<div style="width:XXXpx; height:XXXpx; align:center;">
{vb:raw banner_rotator}
</div>

2. It all depends on your template. Move the header code around to see where it best fits.

[baghdad4ever]

Originally Posted by thunderclap82

1. To center modify the following code:

<div style="width:XXXpx; height:XXXpx; align:center;">
{vb:raw banner_rotator}
</div>

2. It all depends on your template. Move the header code around to see where it best fits.

thanks

now the logo go to left and not in the center !!!

how to fix that?

[thunderclap82]

Try changing "align:center;" to "align-text:center;". I'm not sure if that will work but give it a try. Otherwise, try using <center></center> around the <div></div>.