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

[baghdad4ever]

i try all of above methods without benefit

is there any chance to center it from css code?

[thunderclap82]

Originally Posted by baghdad4ever

i try all of above methods without benefit

is there any chance to center it from css code?

Unknown.

[baghdad4ever]

Originally Posted by thunderclap82

Unknown.

so plz can you tell me how to center it like in your site

i appreciate your help

thanks

[thunderclap82]

Originally Posted by baghdad4ever

so plz can you tell me how to center it like in your site

I just made sure my logo was the exact width of my fixed site.

[baghdad4ever]

Originally Posted by thunderclap82

I just made sure my logo was the exact width of my fixed site.

hi

i dont understand , my logo width 874

so you mean to decrease it or what?

bec i made every center code without benefit

see by your self plz


http://www.baghdad4ever.net/vb

thanks

[thunderclap82]

First, your style is fluid and not fixed. So it probably is centered until you start widening the browser. I don' think there is a way to keep the logo centered with a fluid style. Sorry I can't be of more help.

[baghdad4ever]

Originally Posted by thunderclap82

First, your style is fluid and not fixed. So it probably is centered until you start widening the browser. I don' think there is a way to keep the logo centered with a fluid style. Sorry I can't be of more help.

hi
thanks for your help
how to make the style fixed instead fluid?

[Crotan]

Originally Posted by thunderclap82

First, your style is fluid and not fixed. So it probably is centered until you start widening the browser. I don' think there is a way to keep the logo centered with a fluid style. Sorry I can't be of more help.

For the theme that i use, in order to center the logo:

Add

.doc_header {
text-align: center;
}
.logo-image {
clear:both;
float:none;
}

to the end of additional.css

In my instance:

Sadly I'm looking into this mod, and would like to use it for rotating banners, however I use a background image as my banner in my css and my logo is just a transparent image to maintain the homepage link.

#header {
height: 200px;
background: url("images/BP-Black/misc/banner.png") no-repeat center;
}

Is there anyway to make this work through additional.css? rather than the header template

[jimfries]

I have this installed correctly, however I'm running into two big issues:

1. The previous image is not disappearing until the 3rd image appears, so I always have two images on top. I am using .png for my images and they have a semi-transparency.

(My additional.css file is as you stated to have it in the first post, the code you provided is the only code in my additional.css file)

2. I am unable to use the links at the top of my website that are suppose to be on top of the image (Notifications, My Profile, Settings etc.)

I am using vBulletin v4.1.1

[jimfries]

I just noticed that this post is not supported anymore.

Will have to just uninstall and look for another option.