vb.org Archive - Forum Display Enhancements

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Forum Display Enhancements - Logo Rotation (https://vborg.vbsupport.ru/showthread.php?t=252398)

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:

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:

Code:

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

Code:

/* 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:

Code:

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

Code:

<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

Very, very cool!

Is it just random? For example, if I have a logo I want to show up first can I do that?

Quote:

Originally Posted by sticky (Post 2112668)

Very, very cool!

Is it just random? For example, if I have a logo I want to show up first can I do that?

I have mine configured as random, but you can have it go in a specific order if you like.

Couldn't this be made in to a widget to use on the homepage for news? I'd love something like this to work with the VB CMS system as a widget

Quote:

Originally Posted by bandare (Post 2113030)

Couldn't this be made in to a widget to use on the homepage for news? I'd love something like this to work with the VB CMS system as a widget

I had it working in a CMS article so I don't know why you couldn't get it working in a widget. I can't say for sure, but I'd guess instead of putting the code in the banner_rotator template you could put it in a static_html widget. You probably wouldn't need to make the plug-in then either.

This is really cool man. I tried it on a fluid style, and you will have to use it a bit differently though.
There is a problem however. If you look at my screenshot, you will see that the banner seems to be broken into parts and thrown to the bottom of the actual banner. The js affects also seems to only happen on these broken parts, and not on the banner on top at all.

Attachment 123029

I am on 4.0.8, I hope you can help me to fix this. Thanks.

I tried upgrading to 4.0.8 but it completely destroyed my custom theme, so I reverted to 4.0.7. Until the designer of my theme releases an update (which they said won't happen until 4.1) I'm not going to be much help. If you want to give me limited access to your site I'd be happy to look at the templates and see if I can spot were the trouble is. PM me if interested.

very nice but i have the same problem here

https://vborg.vbsupport.ru/showpost....77&postcount=8

secondly
plz thunderclap82

how can you make the login box like that??

Quote:

Originally Posted by baghdad4ever (Post 2113860)

very nice but i have the same problem here

https://vborg.vbsupport.ru/showpost....77&postcount=8

Are you using vB 4.0.8 too? If so I'm limited in my ability to help since I can't upgrade without breaking the forum.

Quote:

how can you make the login box like that??

I didn't do it. The theme developer did. It's available at skinbox.net.

Quote:

Originally Posted by thunderclap82 (Post 2114096)

Are you using vB 4.0.8 too? If so I'm limited in my ability to help since I can't upgrade without breaking the forum.

thanks my friend

but how you run it in 4.0.8?

how the logo to be placed in the middle (align center) ?

Quote:

Originally Posted by ichal_spy (Post 2115582)

how the logo to be placed in the middle (align center) ?

I haven't tested this, but you could be able to use center tags like this:

Code:

<center>{vb:raw banner_rotator}</center>

Quote:

Originally Posted by thunderclap82 (Post 2117251)

I haven't tested this, but you could be able to use center tags like this:

Code:

<center>{vb:raw banner_rotator}</center>

not work bro

Quote:

Originally Posted by ichal_spy (Post 2117407)

not work bro

In the banner_rotator template try changing

Code:

<div id="slider">

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

</div>

Code:

<div id="slider"><center>

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

</center></div>

Quote:

Originally Posted by thunderclap82 (Post 2117466)

In the banner_rotator template try changing

Code:

<div id="slider">

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

</div>

Code:

<div id="slider"><center>

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

</center></div>

not working well, you try to think, I really needed

Quote:

Originally Posted by ichal_spy (Post 2117703)

not working well, you try to think, I really needed

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

is there any chance to update this mod to 4.0.8?

Yes make it to 4.0.8 please....

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.

Quote:

Originally Posted by thunderclap82 (Post 2118058)

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

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.

Quote:

Originally Posted by thunderclap82 (Post 2125214)

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

Code:

<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

Quote:

Originally Posted by baghdad4ever (Post 2130304)

we put like that

Code:

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

Quote:

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.

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

Quote:

Originally Posted by baghdad4ever (Post 2130780)

1- how to center the logo

2- how to show the login area above the logo

1. To center modify the following code:

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.

Quote:

Originally Posted by thunderclap82 (Post 2130910)

1. To center modify the following code:

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?

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

i try all of above methods without benefit

is there any chance to center it from css code?

Quote:

Originally Posted by baghdad4ever (Post 2130952)

i try all of above methods without benefit

is there any chance to center it from css code?

Unknown.

Quote:

Originally Posted by thunderclap82 (Post 2131877)

Unknown.

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

i appreciate your help

thanks

Quote:

Originally Posted by baghdad4ever (Post 2131966)

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.

Quote:

Originally Posted by thunderclap82 (Post 2132166)

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

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.

Quote:

Originally Posted by thunderclap82 (Post 2133316)

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

Quote:

Originally Posted by thunderclap82 (Post 2133316)

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

Add

Code:

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

Code:

#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

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

I just noticed that this post is not supported anymore.

Will have to just uninstall and look for another option.

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01378 seconds Memory Usage 1,855KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (17)bbcode_code_printable (22)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: