The Arcive of Official vBulletin Modifications Site.

Letzride · #1 05-05-2020, 08:18 PM

Hey all,

I am super new to VB5 coming from VBcloud.

I would like to recognize my site sponsors by inserting a sticky bottom footer / ad modules where I can rotate through their sponsorship banners every 6-7 seconds. I require that each banner ad be able to still link to their site.

Is this possible? I don't have computer coding skills and very basic knowledge of html.

Thanks to anyone in advance who can point me in the right direction

Letzride · #2 05-07-2020, 04:03 PM

Or if anyone can let me know how to make a sticky ad I could start with that and start trying to work through making this work?

shka · #3 05-07-2020, 06:14 PM

Just a few thoughts about it. There are three points: integration in site/page, make it sticky on footer, fill it with content.

Following is only a prototype with limitations! Web search for "sticky footer (css)" shows dozens of possible solutions (flex, grid, js..) but you have no control over full site/ basic knowledge so I advice you this simple solution.

Sitebuilder (also new features in 5.6.2) limits positioning to content area. But best way for adding a sticky footer is inject your code below all other (also below copyright...)
So go to AdminCP

a. Create new template
Styles/StyleManager/Select Style/Choose Action/Add New Template
Title : stickyfooter
Template : test (for the moment)
Save

b. Add template hook
Products&Hooks/ Manage template hooks/Add new hook

Product : choose vbulletin
Hook is Active : mark yes
Hook Location : choose footer_before_body_end
Title : stickyfooter
Execution Order : 10
Template Name : stickyfooter (same writing as title in a.)
Save

c. Reload any forum page. At the end / last line should be "test". If not there is something wrong, ask in forum.

d. If ok edit the template from a.
Styles/Search in templates/Search for Text "stickyfooter"/Find
Choose the template from style (DblClick or edit)
Replace "test" with

Code:

<style>
#spacerforstickyfooter {
	height:50px;
	background-color:red;
	width:100%;
	margin-top:20px;
}
#stickycontainer {
	height: 50px;
	width: 100%;
	position: fixed;
	bottom: 0px;
	text-align: center;
}
#stickyfooter{
	height: 50px;
	background-color: green;
	width: 50%;
	margin: auto;
}
</style>


<div id="spacerforstickyfooter"> spacer with same height like sticky footer </div>

<div id="stickycontainer">
	<div id="stickyfooter">
		sticky footer content
	</div>
</div>

Save

e. Reload a forum page. There should be a green centered footer. Purpose of the red spacer is only that also the copyright scrolls to over the footer.
After that you can delete the background-color-definitions and adjust height/width. (height of spacer-div and container-div should be equal)

f. Replace "sticky footer content" with your content. I don't know if content is some "static pictures" or js-code given by your sponsor or so.

Letzride · #4 05-07-2020, 07:54 PM

This is fantastic - thank you.

Couple issues with it - I have left it up as it is for testing - this is how it looks on my site: www.camarov6.com

- I would like to use this only for mobile devices - how can I modify this to apply only to those?
- I would like to just above it say "FORUM SPONSORS"
- how do I get static ads to rotate within and still link to the sponsors site?
- how can I get rid of that red bit at the very bottom

I really love this - thank you for helping me

--------------- Added [DATE]1588888528[/DATE] at [TIME]1588888528[/TIME] ---------------

I would also like to get rid of the green bar and make it transparent or possibly white.

shka · #5 05-08-2020, 05:52 AM

quote from here
"This is fantastic"

quote from your forum
"so I apologize if it looks a little ugly for a short while"

Ok, I understand. Hmm..

Colors
You can delete lines with background-color or change to transparent or comment it out (last my advice, cause you can enable it or toggle with transparent in future tests)

Code:

<style>
#spacerforstickyfooter {
..
	// comment out a line with double slash
        // background-color:red; 
        background-color:transparent; 
..
}
..
#stickyfooter{
	height: 50px;
	// comment out a line with double slash
        // background-color:green; 
        background-color:transparent; 
	width: 50%;
	margin: auto;
}
</style>

Mobile and "FORUM SPONSORS"
Remember - it is unusual to detect mobile. Usually you detect a device with a screen with more than or lower than xxx pixels screen width. (small desktop display is in this case the same as a big tablet/ phone display)

Change the code to

Code:

<style>
#stickyfootersponsors, #spacerforstickyfooter, #stickycontainer, #stickyfooter {
      display: none;  // footer not shown by default, only with screen width below
}

@media only screen and (max-width:900px){
	#stickyfootersponsors {
		width:100%;
		margin-top:20px;
                text-align: center;
	}
	#spacerforstickyfooter {
		height:50px;
		//background-color:red;
		background-color:transparent;
		width:100%;
		margin-top:20px;
	}
	#stickycontainer {
		height: 50px;
		width: 100%;
		position: fixed;
		bottom: 0px;
		text-align: center;
	}
	#stickyfooter{
		height: 50px;
		//background-color: green;
		background-color: transparent;
		width: 50%;
		margin: auto;
	}
}
</style>

<div id="stickyfootersponsors ">FORUM SPONSORS</div>

<div id="spacerforstickyfooter"> spacer with same height like sticky footer </div>

<div id="stickycontainer">
	<div id="stickyfooter">
		sticky footer content
	</div>
</div>

Adjust the 900 to your preferred value, usual vB-breakpoints are 900, 768, 480, 420, 320. But you can use also every other value.

Content later.

PS: I personally don't like cross postings.

PPS: In your forum the "I agree" button on private policy message box has same font and background color. Not good for reading.

delicjous · #6 05-08-2020, 09:51 AM

The following should work, but you have to hook your new template to footer_before_body_ends!
this hook is needed to have jQuery ready loaded.

You could change the rotationTime from 3000 = 3 seconds to whatever you want.
The # needs to changed!

-href = url to the sponsor
-img src = url to your image(s)

HTML Code:

<style>
#delirotatebottombanner {
	width: 100%;
	min-width: 320px;
	max-width: 100%;
}
.delirbb-bannerlist_wrapper {
	text-align: center;
	position: fixed;
	display: block;
	bottom: 1px;
	left: 0;
	right: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	z-index: 99;
}
#delirotatebottombanner ul{
	text-align: center;
}
#delirotatebottombanner ul li{
	margin-bottom: 10px;
}
@media only screen and (min-width:480px) {
	#delirotatebottombanner {
		display:none;
	}
}
</style>


<div id="delirotatebottombanner">
	<div class="delirbb-bannerlist_wrapper">
		<ul class="delirbb-bannerlist">
			<!--Change the href and img src address to your needs!!! This first element must not have class="h-hide"! -->
			<li><a href="#"><img src="#" /></a></li>

			<!--You could copy the following line(s) <li> to </li> for each Banner! -->
			<li class="h-hide"><a href="#"><img src="#" /></a></li>

			<li class="h-hide"><a href="#"><img src="#" /></a></li>
			<!--........-->
		</ul>
	</div>
<div>


<script>
(function($){
	/* you could change the rotation-time here*/
	var rotateTime = 3000;
	
	/*Do not change anything below this*/
	var drbbintv;
	delirotatebottombanner(rotateTime);
	function delirotatebottombanner(rotateTime){
		var counter = 0,
			$delirbb_listItems = $('.delirbb-bannerlist li');
		drbbintv = setInterval(function() {
			var $delirbb_listItems = $('.delirbb-bannerlist li'),
				$delirbb_current = $('.delirbb-bannerlist li:visible'),
				$delirbb_next = $delirbb_current.next(),
				$delirbb_last = $('.delirbb-bannerlist li').last();
			$delirbb_current.slideUp();
			$delirbb_next.slideDown();
			$delirbb_current.insertAfter( $delirbb_last );
		}, rotateTime);
	}
	$('#delirotatebottombanner').on('mouseenter mouseleave', function( e ){
		var mEnt = e.type=='mouseenter';
		if(mEnt){
			clearInterval(drbbintv);
		}else{
			delirotatebottombanner(rotateTime);
		}
	});
})(jQuery);
</script>

Letzride · #7 05-08-2020, 02:56 PM

Quote:

Originally Posted by shka

quote from here
"This is fantastic"

quote from your forum
"so I apologize if it looks a little ugly for a short while"

Ok, I understand. Hmm..

Colors
You can delete lines with background-color or change to transparent or comment it out (last my advice, cause you can enable it or toggle with transparent in future tests)

Code:

<style>
#spacerforstickyfooter {
..
	// comment out a line with double slash
        // background-color:red; 
        background-color:transparent; 
..
}
..
#stickyfooter{
	height: 50px;
	// comment out a line with double slash
        // background-color:green; 
        background-color:transparent; 
	width: 50%;
	margin: auto;
}
</style>

Mobile and "FORUM SPONSORS"
Remember - it is unusual to detect mobile. Usually you detect a device with a screen with more than or lower than xxx pixels screen width. (small desktop display is in this case the same as a big tablet/ phone display)

Change the code to

Adjust the 900 to your preferred value, usual vB-breakpoints are 900, 768, 480, 420, 320. But you can use also every other value.

Content later.

PS: I personally don't like cross postings.

PPS: In your forum the "I agree" button on private policy message box has same font and background color. Not good for reading.

Sorry didn't mean to cause trouble by cross posting. Just thought it might help get an answer as it is common with the car forums. I could see why maybe it could be more confusing when dealing with coding though.

The change wasn't "ugly" I just meant as I play with it things could go all whacky and maybe break things. It just took 2 weeks to install VB5 between install issues that Vbulletin had and issues with my host. So if I don't let everyone know what's happening I'll start getting emails lol.

Ok, I think I screwed up the coding. I combined your coding and the delicjous and now it doesn't work. This is what I have:

Did I make a small error or did I totally screw it all up? I kinda understand what is happening with the width / margin type commands. The scripts are way in over my head.

As for the consent button, thanks for letting me know. I saw that when there was bugs with the install and thought it was part of that. That will be my next investigation to try and figure out. I am sure it must be a setting somewhere in the style manager...

Code:

<style>
#stickyfootersponsors, #spacerforstickyfooter, #stickycontainer, #stickyfooter {
      display: none;  // footer not shown by default, only with screen width below
}

@media only screen and (max-width:480px){
	#stickyfootersponsors {
		width:100%;
		margin-top:20px;
                text-align: center;
	}
	#spacerforstickyfooter {
		height:50px;
		//background-color:red;
		background-color:transparent;
		width:100%;
		margin-top:20px;
	}
	#stickycontainer {
		height: 50px;
		width: 100%;
		position: fixed;
		bottom: 0px;
		text-align: center;
	}
	#stickyfooter{
		height: 50px;
		//background-color: green;
		background-color: transparent;
		width: 100%;
		margin: auto;
	}
}
</style>

<div id="stickyfootersponsors ">FORUM SPONSORS</div>

<div id="spacerforstickyfooter"> spacer with same height like sticky footer </div>

<div id="stickycontainer">
	<div id="stickyfooter">

<style>
#delirotatebottombanner {
	width: 100%;
	min-width: 320px;
	max-width: 100%;
}
.delirbb-bannerlist_wrapper {
	text-align: center;
	position: fixed;
	display: block;
	bottom: 1px;
	left: 0;
	right: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	z-index: 99;
}
#delirotatebottombanner ul{
	text-align: center;
}
#delirotatebottombanner ul li{
	margin-bottom: 10px;
}
@media only screen and (min-width:480px) {
	#delirotatebottombanner {
		display:none;
	}
}
</style>
		<div id="delirotatebottombanner">
	<div class="delirbb-bannerlist_wrapper">
		<ul class="delirbb-bannerlist">
			<!--Change the href and img src address to your needs!!! This first element must not have class="h-hide"! -->
			<li><a href="#"><img src="#" /></a></li>

			<!--You could copy the following line(s) <li> to </li> for each Banner! -->
			<li class="h-hide"><a href="https://www.turtlewax.com"><img src="/images/sponsorship/Turtle Wax Sponsorship 2019.png" /></a></a></li>
<li class="h-hide"><a href="https://www.amsoil.com/offers/index.aspx/?zo=1907169"><img src="images/sponsorship/Amsoil Sponsorship.jpg" /></a></a></a></li>
<li class="h-hide"><a href="http://www.rockauto.com/?a=camarov6"><img src="/images/sponsorship/RockAuto 285x50.png" /></a></a></a></a></li>

			<li class="h-hide"><a href="#"><img src="#" /></a></li>
			<!--........-->
		</ul>
	</div>
<div>


<script>
(function($){
	/* you could change the rotation-time here*/
	var rotateTime = 5000;
	
	/*Do not change anything below this*/
	var drbbintv;
	delirotatebottombanner(rotateTime);
	function delirotatebottombanner(rotateTime){
		var counter = 0,
			$delirbb_listItems = $('.delirbb-bannerlist li');
		drbbintv = setInterval(function() {
			var $delirbb_listItems = $('.delirbb-bannerlist li'),
				$delirbb_current = $('.delirbb-bannerlist li:visible'),
				$delirbb_next = $delirbb_current.next(),
				$delirbb_last = $('.delirbb-bannerlist li').last();
			$delirbb_current.slideUp();
			$delirbb_next.slideDown();
			$delirbb_current.insertAfter( $delirbb_last );
		}, rotateTime);
	}
	$('#delirotatebottombanner').on('mouseenter mouseleave', function( e ){
		var mEnt = e.type=='mouseenter';
		if(mEnt){
			clearInterval(drbbintv);
		}else{
			delirotatebottombanner(rotateTime);
		}
	});
})(jQuery);
</script>
	</div>
</div>

--------------- Added [DATE]1588959595[/DATE] at [TIME]1588959595[/TIME] ---------------

Ok, I made some changes and I have it rotating. Couple of little quirks

- "FORUM SPONSORS" is stuck at the very bottom of the page vs on top of the rotating banners
- Is there anyway to randomly rotate the banners? (if not I am totally cool with them just rotating as is)

This is the code I am now working with:

Code:

<style>
#stickyfootersponsors, #spacerforstickyfooter, #stickycontainer, #stickyfooter {
      display: none;  // footer not shown by default, only with screen width below
}

@media only screen and (max-width:480px){
	#stickyfootersponsors {
		width:100%;
		margin-top:20px;
                text-align: center;
	}
	#spacerforstickyfooter {
		height:50px;
		//background-color:red;
		background-color:transparent;
		width:100%;
		margin-top:20px;
	}
	#stickycontainer {
		height: 50px;
		width: 100%;
		position: fixed;
		bottom: 0px;
		text-align: center;
	}
	#stickyfooter{
		height: 50px;
		//background-color: green;
		background-color: transparent;
		width: 100%;
		margin: auto;
	}
}
</style>

<div id="stickyfootersponsors ">FORUM SPONSORS</div>

<div id="spacerforstickyfooter"> spacer with same height like sticky footer </div>

<div id="stickycontainer">
	<div id="stickyfooter">
	</div>
</div>

<style>
#delirotatebottombanner {
	width: 100%;
	min-width: 320px;
	max-width: 100%;
}
.delirbb-bannerlist_wrapper {
	text-align: center;
	position: fixed;
	display: block;
	bottom: 1px;
	left: 0;
	right: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	z-index: 99;
}
#delirotatebottombanner ul{
	text-align: center;
}
#delirotatebottombanner ul li{
	margin-bottom: 10px;
}
@media only screen and (min-width:480px) {
	#delirotatebottombanner {
		display:none;
	}
}
</style>
		<div id="delirotatebottombanner">
	<div class="delirbb-bannerlist_wrapper">
		<ul class="delirbb-bannerlist">
			<!--Change the href and img src address to your needs!!! This first element must not have class="h-hide"! -->
			<li><a href="https://www.turtlewax.com"><img src="/images/sponsorship/Turtle Wax Sponsorship 2019.png" /></a></a></li>

			<!--You could copy the following line(s) <li> to </li> for each Banner! -->
<li class="h-hide"><a href="https://www.amsoil.com/offers/index.aspx/?zo=1907169"><img src="images/sponsorship/Amsoil Sponsorship.jpg" /></a></a></a></li>
<li class="h-hide"><a href="http://www.rockauto.com/?a=camarov6"><img src="/images/sponsorship/RockAuto 285x50.png" /></a></a></a></a></li>
			<!--........-->
		</ul>
	</div>
<div>


<script>
(function($){
	/* you could change the rotation-time here*/
	var rotateTime = 5000;
	
	/*Do not change anything below this*/
	var drbbintv;
	delirotatebottombanner(rotateTime);
	function delirotatebottombanner(rotateTime){
		var counter = 0,
			$delirbb_listItems = $('.delirbb-bannerlist li');
		drbbintv = setInterval(function() {
			var $delirbb_listItems = $('.delirbb-bannerlist li'),
				$delirbb_current = $('.delirbb-bannerlist li:visible'),
				$delirbb_next = $delirbb_current.next(),
				$delirbb_last = $('.delirbb-bannerlist li').last();
			$delirbb_current.slideUp();
			$delirbb_next.slideDown();
			$delirbb_current.insertAfter( $delirbb_last );
		}, rotateTime);
	}
	$('#delirotatebottombanner').on('mouseenter mouseleave', function( e ){
		var mEnt = e.type=='mouseenter';
		if(mEnt){
			clearInterval(drbbintv);
		}else{
			delirotatebottombanner(rotateTime);
		}
	});
})(jQuery);
</script>

delicjous · #8 05-08-2020, 03:49 PM

First you should not use blanks in imagefiles!
Second you should not combine the code.

If you want to have an extendend version I could make you an offer for a complete addon.

Letzride · #9 05-08-2020, 03:58 PM

Quote:

Originally Posted by delicjous

First you should not use blanks in imagefiles!
Second you should not combine the code.

If you want to have an extendend version I could make you an offer for a complete addon.

I think I took the blanks out with the last one I posted?

I also thought this was an extension to the code that shka made to now make the ads rotate?

shka · #10 05-08-2020, 05:57 PM

Quote:

Originally Posted by Letzride

I also thought this was an extension to the code that shka made to now make the ads rotate?

Alternatively, you can take it. Then remove my code from the template. And for "FORUM SPONSORS" edit delicjous code

Code:

	<ul class="delirbb-bannerlist">
                        <div>FORUM SPONSORS</div>
			<!--Change the href and img src address to your needs!!! This first element must not have class="h-hide"! -->

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05814 seconds Memory Usage 2,289KB Queries Executed 11 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (7)bbcode_code (1)bbcode_html (3)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (10)post_thanks_box (10)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (10)post_thanks_postbit_info (10)postbit (10)postbit_onlinestatus (10)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.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/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.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 showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!