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