Add-On Releases - Cinema Mode for ibProArcade

Cinema Mode for ibProArcade

Thanks to Gemma for allowing me to release Lights Out Mode for ibProArcade,, made from her v3 Arcade - Lights Out Mode v2..

Originally Posted by Gemma

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 color to match that of your forum and blank everything out except the game.

Upload the lights folder from the zip file to your arcade folder..

I went ahead and edited both skin files..They are in the arcade/skins folder..
You can use those files and just overwrite yours..

Demo: www.next-level-arcade.com


Enjoy !!

[gagan007]

looks awesome.

[nacaruncr]

I like me so much
Hey, Could you put the hack or mod how to put the quality and make the game bigger?
I also liked what share of the social network.

[Chadi]

How am I supposed to know which css folder it should go in in clientscript > vbulletin_css? There are about a dozen and some newly created automatically, even now???

[stangger5]

css folder ??

If your talking about ( additional.css )...That is a template..

Styles & Templates/Style Manager:
Choose Edit Templates from the drop down option box to the right of the style you want to edit..
CSS Templates »: additional.css

[Chadi]

Thank you. Got it working.

Wish there was a way to change the "lights off" button to something custom that I prefer. Anyone know how?

Thanks again

[reghar73]

Was hoping someone would kindly point me in the right direction - (I'm fairly new to VB4 although experienced with SMF) I followed the instructions as best as I can but when I click on the light bulb the screen doesn't darken. The code below is my additional.css as it looks now. I copied the files supplied in ./arcade/skins/ and copied the other files to the root as instructed. I feel this edit is where i went wrong, perhaps where i placed it in the css is the issue?

#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: #000; /* 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: .85; /* 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 */
        }

#wgo_legend, .wgo_block .section {
border-bottom: 0;
}

#postlist li {
background:rgb(51,51,44);
border-bottom:solid 1px rgb(86,85,69);
}

.postbit .posttitle, .postbitlegacy .title {
border-bottom: 1px solid #000;
}

.wgo_block .section {
border-bottom: 1px solid #565545;
}

.wgo_block .blockbody {
border-top: 0;
}

.wgo_block .section {
border-bottom: 1px solid #565545;
background-image: none;
}

legend {
color: #d3d4aa;
}

.wysiwyg, .formcontrols .blockrow .editor_textbox textarea:focus {
background-color: #1a1a1a;
color: #fff;
}

select {
background-color: #1a1a1a;
color: #fff;
border: 1px solid #202020;
}

.bbcode_container div.bbcode_code, .bbcode_container pre.bbcode_code {
border: 1px solid #000;
}

div .forumrow:hover, .forumhead + .childforum .L2:first-child .forumrow:hover {
background: {vb:stylevar highlight_background};
}

.threadbit .nonsticky:hover, .threadbit .discussionrow:hover, .threadbit .sticky:hover {
background: {vb:stylevar highlight_background};
}

.popupbody li input.searchbox, .popupbody li input.searchbox:focus {
background-color: #1a1a1a;
color: #fff;
border: 1px solid #202020;
}

.edit_rightside textarea {
background-color: #1a1a1a;
color: #fff;
border: 1px solid #202020;
}

.wysiwyg_block, .wysiwyg_block iframe.textbox, .wysiwyg {
background-color: #1a1a1a;
color: #fff;
}

#navlinks {
background-color: #202020;
border-top: 1px solid #000;
}

.editor_controls .popupmenu .popupbody {
background:#242421 none repeat scroll 0 0;
color: #fff;
}

.editor_controls .popupmenu .popupbody li > a {
 color:#ffffff;
}

.editor_controls .popupmenu .popupbody li > a:hover {
background-color: #d3d4aa;
}

.editor_controls .popupmenu div.popupctrl {
border:1px solid #565545;
color:#c0c0c0;
background-color:#242421;
}

.editor_controls .popupmenu .popupctrl.active,
.editor_controls .imagebutton_hover {
background-color: #242421;
color: #fff;
}

.editor_controls .imagebutton_selected {
background-color: #242421;
color: #fff;
}

.editor_controls .imagebutton_down {
background-color: #504f3e;
}

.editoroverlay input.textbox:focus,
.editoroverlay textarea:focus {
background-color: #1a1a1a;
color: fff;
}

#grouppagetitle {
border: 1px solid #565545;
background-color: #5c5b4b;
}

#grouppagetitle h1 {
color:#fff;
border-top: 1px solid #565545;
}

#grouppagetitle h1 a {
color:#fff;
}

#menugroup h6 a {
color:#fff;
}

#pictures .blockbody .blockrow, #group_discussion_inlinemod_form .blockbody .blockrow {
border-color:#565545 #565545 #565545;
}

#thumbnails li {
background-color:#1a1a1a;
}

.textbox, textarea, select {
background-color: #1a1a1a;
color: #fff;
border: 1px solid #565545;
}

#header {
height: 124px;
background: url("images/Darkness3/darkness3/banner.jpg") no-repeat center;
}

#newnav {
height: 28px;
background: transparent;
padding-right:30px;
}

#darkbord {
border: 11px;
-webkit-border-image: url(images/Darkness3/darkness3/border.png) 11 11 11 11 repeat repeat;
-moz-border-image: url(images/Darkness3/darkness3/border.png) 11 11 11 11 repeat repeat;
border-image: url(images/Darkness3/darkness3/border.png) 11 11 11 11 repeat repeat;
background-color: #1a1a1a;
}

#house {
height: 68px;
margin-top: 20px;
margin-right: -20px;
margin-bottom: -10px;
background: url("images/Darkness3/darkness3/house.gif") no-repeat bottom right;
}

#iesplit {
height: 11px;
background: url("images/Darkness3/darkness3/botbase.jpg") repeat-x;
}

.breadcrumb .navbit > a, .breadcrumb .lastnavbit span {
background-color: #1a1a1a;
}

.breadcrumb .navbit.lastnavbit span {
background-color: #1a1a1a;
}

li#fb_headerbox a#fb_link #fb_squarepic {
background-color: #565545;
}

li#fb_headerbox a#fb_link #fb_icon {
background-color: #565545;
}

.blogstats, .bloglastpost, .blogcatbit .td, tr.blogcatbit td {
background-color: #262623;
}

#content_inner {
background-color: #262623;
}

.simpleday, #memberlist_table tr td {
background-color: #262623;
}

.requestlist > li {
background-color: #262623;
background-image: none;
border-bottom: 1px solid #202020;
}

#memberlist_table td.alt2 {
background-color: #262623;
}

li.sgicon .maincol  {
background-color: #262623;
}

#sidebar li.sgicon .maincol {
background-color: #262623;
}

li.sgicon .maincol hr, #sidebar li.sgicon {
border-top-color: #000;
}

span.cke_skin_kama {
border: 1px solid #565545 !important;
}

.cke_skin_kama .cke_wrapper {
background: url(images/Darkness3/gradients/editor.png) top left repeat-x !important;
background-color: #262623 !important;
border: 1px solid #565545 !important;
}

.cke_skin_kama .cke_toolgroup {
background-color: #202020 !important;
background-image: none !important;
color: #ccc;
border: 1px solid #565545 !important;
}

.cke_skin_kama .cke_button a:hover, .cke_skin_kama .cke_button a:focus, .cke_skin_kama .cke_button a:active {
background-color: #000 !important;
}

.cke_skin_kama div.cke_bottom_restore_autosave .cke_toolgroup a {
color: #ccc !important;
}

.cke_skin_kama .cke_rcombo a, .cke_skin_kama .cke_rcombo a:active, .cke_skin_kama .cke_rcombo a:hover {
background-image: none !important;
background-color: #262623 !important;
border: 1px solid #565545 !important;
color: #ccc !important;
}

.cke_skin_kama .cke_rcombo .cke_openbutton .cke_icon {
background-color: #000 !important;
}

#visitormessageseditor .blockrow {
border-top: 0 !important;
}

.cke_panel_listItem a:hover, .cke_panel_listItem a:focus, .cke_panel_listItem a:active {
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_panel_listItem a {
border: 1px solid #000 !important;
}

.cke_skin_kama *, .cke_skin_kama a:hover, .cke_skin_kama a:link, .cke_skin_kama a:visited, .cke_skin_kama a:active {
color: #fff !important;
}

.cke_skin_kama .cke_rcombopanel {
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_button a.cke_on {
background-color: #262623 !important;
}

.cke_skin_kama .cke_dialog_body {
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_dialog_title {
border-bottom: 1px solid #000 !important;
}

.cke_skin_kama .cke_dialog_contents {
background-color: #1a1a1a !important;
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_dialog_footer {
background-color: #202020 !important;
border: 1px solid #000 !important;
}

.cke_skin_kama .cke_dialog .cke_dark_background {
background-color: transparent !important;
}

.cke_skin_kama a.cke_smile img {
border: none !important;
}

#uploadprogress_container {
background-color: #202020 !important;
}

.uploadprogress_footer {
border: 1px solid #000 !important;
background-color: #222629 !important;
}

#uploadprogress_container {
border: 1px solid #000 !important;
}

.cke_skin_kama a.cke_dialog_tab {
background-color: #202020 !important;
background-image: none !important;
}

.cke_skin_kama a.cke_dialog_tab:hover {
background-color: #000 !important;
background-image: none !important;
}

.cke_skin_kama input.cke_dialog_ui_input_text, .cke_skin_kama input.cke_dialog_ui_input_password {
background-color: #222629 !important;
}

.cke_skin_kama .cke_dialog_ui_input_select {
background-color: #222629 !important;
}

.cke_panel_listItem a {
color: #000 !important;
}

ul.cke_panel_list {
color: #000 !important;
}

.body_wrapper {
background-color: #1a1a1a;
}

[stangger5]

Mind if I have a look ??
You can pm me a link to your site..

[reghar73]

Ok Sure will do right now.

[DAMINK]

Unfortunately i have had no luck with this mod.
Pitty really as i quite like the idea.
I did all suggested. Uploading the lights folder to root and overriding other files.
Finally editing additional css with no luck.