v3 Arcade - Lights Out Mode v2

v3 Arcade - Lights Out Mode v2

Mod Version: 2.0.1, by Gemma

vB Version: 4.x.x	Rating: (5 votes - 5.00 average)	Installs: 19
Released: 21 Jan 2012	Last Update: 13 May 2012	Downloads: 116
Not Supported Template Edits Additional Files Re-usable Code

What Does This Do?
Basically, when you turn lights down, the entire page darkens* and lets you play the game in the 'dark' which cuts out distractions.

*You can also change the fade background colour to match that of your forum and blank everything out except the game.

Upload the contents of the zip file to your forum root

In your v3ARCADE_PLAY template and find:

Code:

<title>{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}} - {vb:raw vboptions.arcadename} - {vb:raw game.title}</title>
{vb:raw headinclude_bottom}
</head>

Underneath that add:

Code:

<style type="text/css">
        #lights { /* This is the container which holds the light switch */
            position:relative; /* Set the position of the light switch to relative so it can be placed above the "dimming" layer */
            z-index:500; /* Set the height on the Z axis to 500 which is above the "dimmed" layer */
        }
        object { /* The object tag is what the swf files are held in */
            outline:none; /* Set the outline of swf objects to none so when you click on it you don't get a border around the swf */
        }
        #fade { /* This is the "dimmed" layer which fades in when the lights go off */
            display: none; /* Set the display to none which hides the layer */
            background: #fff; /* Set the color to black */
            position: fixed; left: 0; top: 0; /* Set the position to fixed so when the user scrolls it stays with them */
            width: 100%; height: 100%; /* Set the width and height to 100% of the browser window */
            opacity: .90; /* Set the layer's opacity to .90 which is 90% */
            z-index:100; /* Set the height on the Z axis to 100 which is below the "light switch" layer */
        }
#standout{
 position:relative;
background-color:#ffffff;                  
 z-index:1000;
}
    </style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var flashvars = false;
    var params = {
        movie: "Lights.swf",
        quality: "high",
        allowScriptAccess: "always",
        wmode: "transparent"
    };
    var attributes = false;
    swfobject.embedSWF("Lights.swf", "lights", "100", "100", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    function lightsOn(){
        //When you turn the lights back on fade out the "dim" layer over 500 milliseconds and then remove it
        $('#fade').fadeOut(500,function() { $("#fade").remove(); });
    };
    function lightsOff(){
        $('body').append('<div id="fade"></div>'); //When you turn the lights off add the "dimmed" layer to the page
        $('#fade').fadeIn(250); //Fade in the "dim" layer over 250 milliseconds
    };
</script>

You can change background: #fff; /* Set the color to black */ to match the colour of your forum if you'd prefer that to black and the opacity: .90; /* Set the layer's opacity to .90 which is 90% */ to suit your needs.

Still in the v3ARCADE_PLAY template find:

Code:

<td align="center" class="blockbody" valign="top">
            <!-- main -->

Below that add:

Code:

<div id = "standout">

Next, find:

Code:

<!-- /main -->
        </td>

Above that add:

Code:

</div>

Search for:

Code:

</div>
            </div>
            <!-- /right area-->

Above that add:

Code:

<div class="blockrow" align="center">
<div id="lights"></div>

Save the template.

Thanks goes to C.Birch for pointing out and providing a fix that some people were experiencing where upon pressing the lights out button the whole screen was dimming including the flash game. The required changes can be seen here

Spoiler (click to open)

Here is the fix:
In your v3ARCADE_PLAY do the following edits.

Below:

#fade { /* This is the "dimmed" layer which fades in when the lights go off */
display: none; /* Set the display to none which hides the layer */
background: #000000; /* Set the color to black */
position: fixed; left: 0; top: 0; /* Set the position to fixed so when the user scrolls it stays with them */
width: 100%; height: 100%; /* Set the width and height to 100% of the browser window */
opacity: .90; /* Set the layer's opacity to .90 which is 90% */
z-index:100; /* Set the height on the Z axis to 100 which is below the "light switch" layer */
}

Add:

#standout{
position:relative;
background-color:#ffffff;
z-index:1000;
}

Below:

<td align="center" class="blockbody" valign="top">

Add:

<div id = "standout">

Above:

</td>

Add:

</div>

Now save the edits.

and have been integrated into the instructions above.

*Nothing has changed in the zip archive, no need to download if upgrading, just carry out the template edits

Download

v3 Arcade - Lights Out Mode v2.0.1.zip (8.4 KB, 71 downloads)

Screenshots

Add-On Releases v3 Arcade Lights Out Mode	vBulletin 4.x Add-ons
Mini Mods Let your links' lights be on and off	vBulletin 3.8 Template Modifications

vBulletin LTS

Spoiler (click to open)