social sidebar

Description of your first forum.
Post Reply
bubba
Site Admin
Posts: 5
Joined: Sun Jul 30, 2017 11:00 pm

social sidebar

Post by bubba » Fri Jan 12, 2018 7:58 pm

here is how to get a very similar slide out by using the custom code extension:
things using the custom code extensions:

slideout menus

install custom code extension:
https://www.phpbb.com/community/viewtop ... &t=2275361

once installed and working. go to the extensions tab in the admin panel.

click on edit:
click on overall_footer_after.html (E)
copy and paste the following into the text box:

Code: Select all

<script type='text/javascript'>
jQuery(document).ready (
function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#facebook_right").stop(true,false).animate({right: -249}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 500); });
jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -323}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
});
</script>


<style>
img, a { border: 0; }
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:245px;height: 260px;overflow: hidden;}
#twitter_div {width:260px;height: 238px;overflow: hidden;}
#google_plus_div {width:320px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#youtube_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:260px;height: 238px;position: fixed;right: -264px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:320px;height: 143px;position: fixed;right: -323px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10002;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 100px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10001;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
</style>
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="http://1.bp.blogspot.com/-yUI3Og8Esko/TyywzMTqmsI/AAAAAAAABMs/z-tTK2uUS-0/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FRealcomBiz&locale=en_GB&width=245&connections=9&stream=&header=false&show_faces=0&height=260" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 25%;">
<div id="twitter_div">
<img id="twitter_right_img" src="http://1.bp.blogspot.com/-khdW550KJIA/Tyyw1UgdxzI/AAAAAAAABNE/AwsKGPGrZkQ/s1600/Twitter.png" />
<script type="text/javascript" src="http://script-ot.googlecode.com/svn/twitterbox.js"></script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("RealcomBiz");</script>
</div>
</div>
</div>
</div>
<div id="on">
 <div id="google_plus_right" style="top: 42%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-92QhBqQOpz8/Tyywzk8GzmI/AAAAAAAABMw/hxB7RBjWk68/s1600/Google+Plus.png"/>
   <div style="float:left;margin:1px 0px 0px 2px;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
</div>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img id="youtube_right_img" src="http://1.bp.blogspot.com/-NCdhprqaK10/T0BfYEMH7VI/AAAAAAAABQ8/hn0n3XoKq2Q/s1600/YouTube.png" />
<div style="float:left;margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=RealcomBiz style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 76%;">
<div id="knfeedburner_div">
<center><br/>
<h4 style="color:#F66303;">Subscribe And Get Free E-Mail Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=realcombiz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter Your E-Mail Here..." onblur="if (this.value == '') {this.value = 'Enter Your E-Mail Here...';}" onfocus="if (this.value == 'Enter Your E-Mail Here...') {this.value = '';}" type="text" /><input value="RealcomBiz" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
<img id="feedburner_right_img" src="http://1.bp.blogspot.com/-k-3C-8kdREI/Tyyw0ao_FII/AAAAAAAABM4/mMDgy0TFiD4/s1600/Subscribe.png" />
</div>
</div>
</div>
save and purge the cache.

now, go back and edit that code to reflect how you want it and also with your facebook, twitter, etc. info.

should work just fine.

demo here:
http://phpbbusers.com/3.1

robert

Post Reply