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>
More Information