Forum Home Enhancements - Custom Shoutbox Template Modification

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:

<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>:

<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:

<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:

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

[mohammed146]

thanks

[Spectre_Aidan]

that theme is sexy what is it if you dont mined me asking

[Eplexx]

Originally Posted by Spectre_Aidan

that theme is sexy what is it if you dont mined me asking

It's a custom design done by Hell Bomb and I.

[STR8H8TEx]

man this is pretty cool! I've tried it but not working. am I suppose to make edits other then the copy and paste it says to do ? i know not supported but maybe someone might know

[malc1959]

nice but for more best post image tutorial pleas