Custom Shoutbox Template Modification

Custom Shoutbox Template Modification

Mod Version: 1.00, by Eplexx

vB Version: 3.8.7	Rating: (1 vote - 5.00 average)	Installs: 8
Released: 25 Nov 2011	Last Update: 25 Nov 2011	Downloads: 56
Not Supported Template Edits Re-usable Code

Here's an example of what I'm talking about:

This expands once clicked.

Anyway here's how to do it:

Head to headinclude and add this to the bottom:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <style type="text/css" media="screen">
    .slide-out-div {
        width: 600px;
height: 264px;
        background: #000;
        border: #2779a9 2px dashed;
    }
    </style>
    <script src="jquery.tabSlideOut.v1.3.js"></script>
         <script>
         $(function(){
             $('.slide-out-div').tabSlideOut({
                 tabHandle: '.handle',                              //class of the element that will be your tab
                 pathToTabImage: 'ghtheme/Extra/hotbox.png',          //path to the image for the tab (optionaly can be set using css)
                 imageHeight: '173px',                               //height of tab image
                 imageWidth: '38px',                               //width of tab image    
                 tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
                 speed: 300,                                        //speed of animation
                 action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                 topPos: '150px',                                   //position from the top
                 fixedPosition: false                               //options: true makes it stick(fixed position) on scroll
             });
         });
         </script>

Save that now go to FORUMHOME and add this code to the bottm right before </body>:

Code:

<if condition="$show['member']">
<div class="slide-out-div">
        <a class="handle" href="http://link-for-non-js-users">Content</a>
<div id="shoutbox">$cybchatbox</div>
    </div></if>

Now save that, this takes simple edits with the code from your part to patch what you have set. I have this chat box but you can use any othe or change the dimensions.

Make sure to upload the attached .js file to your forum root!!!

Edit: Right so for my website I've made it so it floats upon scrolling so the shoutbox isn't in just one section. Here's how I've done it:

In the FORUMHOME at the bottom instead of adding the codes above delete them and add this:

Code:

<if condition="$show['member']">
<div id="centershoutbox"><div class="slide-out-div">
        <a class="handle" href="http://link-for-non-js-users">Content</a>
<div id="shoutbox">$cybchatbox</div></div>
    </div></if>

Save that then head over to headinclude and add after the style tag:

Code:

 #centershoutbox{
 position: fixed;
  right: 100%;
  top: 2%;
  margin-top: 0.2em;
} 
    .slide-out-div {
        width: 600px;
height: 264px;
        background: #000;
        border: #2779a9 2px dashed;
    }

That's set to the specs of my own site. I've also attached the psd for the side image I've used, download the hoxbox.zip file, extract it and have fun designing! Remember this is by Eplexx, not another hence the updates =)

Download

jquery.tabSlideOut.v1.3.zip (1.7 KB, 72 downloads)
hotbox.zip (21.3 KB, 59 downloads)

vBulletin LTS