Mini Mods - v3 Arcade - Lights Out Mode v2

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:

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

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

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

Below that add:

<div id = "standout">

Next, find:

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

Above that add:

</div>

Search for:

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

Above that add:

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

[Sarab]

Originally Posted by Gemma

There you go, I've removed the text for you.

Sorry for being late >.<

I want to say thank you, you were really great help and I'm grateful to you T.T

It worked perfect, thanks again for the help =D

Best Regards,
Sarab

[datoneer]

Originally Posted by Noerenberg

hi,

i am not sure what i do wrong but on my site the hole site goes white

Just replace #fff with #000 and you will get what you want

[C.Birch]

Originally Posted by datoneer

Just replace #fff with #000 and you will get what you want

Is problem is the same as i get in firefox, it blacks or whites (going by the colour you set) all the page apart from the lights button, what means you can not see or interact with the flash game when you use the lights out mode.

This seems to be a z-index problem to me, with the flash game needing a index number higher that the one used for the lights out mode.

[C.Birch]

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">
<!-- main -->

Add:

<div id = "standout">

Above:

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

Add:

</div>

Now save the edits.

[Gemma]

Update to version 2.0.1 with the above fix. If you're updating, follow the instructions in the post above (#24); these instructions have been included in the OP for those who are installing from scratch.

[hunter1985]

That looks brill! Nice addon lassie!

[doctorsexy]

works well with Xf....

[initiald]

NVM. Just change the number.