Logout Popup Box

[keharris53]

Hello,
Can anyone tell me where I can find the code that will allow me to redesign the logout popup box? Thank you!

[PinkMilk]

The logout popup is created with default browser based dialog box with the help of javascript to trigger it.

Both FORUMHOME and navbar templates have this link:

<a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]"  onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a>

The part highlighted in red is the trigger and as you see theres nothing to redesign, however you can make your own...


This is only basic to get you going

Create 2 functions 1 to show and 1 to hide a custom dialog/modal box created with html and CSS:

Add to headinclude template:

<script type="text/javascript">
// onclick show box
function CustomLogOut() {
 document.getElementById("custom_logout_box").style.display = "block";
};
// onclick hide box ie to cancel
function CustomLogOut_Cancel() {
 document.getElementById("custom_logout_box").style.display = "none";
};
</script>

Now change both instances of links to (FORUMHOME and navbar templates):

<a href="#" onclick="CustomLogOut(); return false;"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a>

This is the CSS that designs the logout box this needs to be added to Additional CSS in style manager:

#custom_logout_box {
background:rgba(0,0,0,.5);
position:absolute;
top:0;
left:0;
width:100%;
height:100vh;
display:none;
z-index:999;
}

#custom_logout_box_inner {
background:#fff;
position:absolute;
top:50%;
left:50%;
width:300px;
height:100px;
margin:-90px 0 0 -190px;
padding:20px;
text-align:center;
z-index:9999;
line-height:100px;
}

This can obviously be tweaked to your own taste.


and this is the new logout box it includes 2 links, 1 to log out and the other to cancel just like the original, add to top of header template:

<div id="custom_logout_box">
 <div id="custom_logout_box_inner">
<a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]">Logout</a> | <a href="#"  onclick="CustomLogOut_Cancel(); return false;">Cancel</a>
 </div>
</div>

again content and design can obviously be tweaked to your own taste.

[keharris53]

Thank you PinkMilk! I'm going to start working on this. I've been messing around tweaking the forum and this piece is just out of place. I appreciate your quick response!
Ken