The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
#1
|
|||
|
|||
Rotating footer sticky banners
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 |
#2
|
|||
|
|||
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?
|
#3
|
|||
|
|||
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> 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. |
#4
|
|||
|
|||
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. |
#5
|
|||
|
|||
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> 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> 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. |
#6
|
||||
|
||||
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> |
#7
|
|||
|
|||
Quote:
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> 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> |
#8
|
||||
|
||||
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. |
#9
|
|||
|
|||
Quote:
I also thought this was an extension to the code that shka made to now make the ads rotate? |
#10
|
|||
|
|||
Quote:
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"! --> |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|