vb.org Archive - Forum Home Enhancements - Custom Shoutbox Template Modification

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

https://vborg.vbsupport.ru/external/2011/11/32.png

This expands once clicked.

https://vborg.vbsupport.ru/external/2011/11/33.png

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 =)

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01077 seconds Memory Usage 1,731KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (6)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: