Hi all.
This little add-on will allow your users to login with a nice little login box. It can also be used for manual external links, and fades the background page to 70% black while the login box is displayed, and fades back when the box is closed, much like a lightbox.
Very simple to implement, ~5 minutes.
Needed files:
OVERALL_HEADER:
Add the JavaScript Links and login-box CSS:
Replace login/logout code with this:
OVERALL_FOOTER:
Here we are adding a DIV in which the box will call upon when viewed:
This can be modded any old way you like. Fully HTML compatible so do as you please if you do not like the basic example.
thats it.
You can also use it for external links. For example:
Ok. Screenshots and Demo:
Demo Board: click login to see it. - http://www.rapidsharemoviezone.com
Login Box:
External Link:
This little add-on will allow your users to login with a nice little login box. It can also be used for manual external links, and fades the background page to 70% black while the login box is displayed, and fades back when the box is closed, much like a lightbox.
Very simple to implement, ~5 minutes.
Needed files:
Code:
http://rapidshare.com/files/257953122/files.rarOVERALL_HEADER:
Add the JavaScript Links and login-box CSS:
Code:
<script type="text/javascript" src="{T_TEMPLATE_PATH}/rt_js/mootools-release-1.11.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/rt_js/rokbox.js"></script>
<link href="{T_THEME_PATH}/rokbox/themes/light/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{T_THEME_PATH}/rokbox/themes/light/rokbox-config.js"></script>
Code:
<!-- IF not S_USER_LOGGED_IN -->
<a href="#" id="lock-button" rel="rokbox[240 210][module=login-module]"><span>{L_LOGIN_LOGOUT}</span></a>
<!-- ELSE -->
<a href="{U_LOGIN_LOGOUT}" id="lock-button" ><span>{L_LOGIN_LOGOUT}</span></a>
<!-- ENDIF -->Here we are adding a DIV in which the box will call upon when viewed:
This can be modded any old way you like. Fully HTML compatible so do as you please if you do not like the basic example.
Code:
<div id="login-module">
<div class="moduletable">
<h3>Login Form</h3>
<div class="main-login-form">
<form method="post" action="{ROOT_PATH}ucp.php?mode=login" class="form-login">
<div class="username-block">
<div class="input-field-l"><input name="username" id="mod_login_username" type="text" alt="username" size="10" class="inputbox" value="Username" onfocus="if (this.value=='Username') this.value=''" onblur="if(this.value=='') { this.value='Username'; return false; }" />
</div></div>
<div class="password-block">
<div class="input-field-l"><input type="password" id="mod_login_password" name="password" size="10" alt="password" value="Password" class="inputbox" onfocus="if (this.value=='Password') this.value=''" onblur="if(this.value=='') { this.value='Password'; return false; }" />
</div></div>
<fieldset>
<div class="remember-me">
<input type="checkbox" name="autologin" id="autologin" class="checkbox" value="yes" alt="Remember Me" style="padding: 0px;"/>
<input name="redirect" value="{LOGIN_REDIRECT}" type="hidden" />
<!-- IF S_AUTOLOGIN_ENABLED --><label for="autologin" class="remember">Remember Me</label><!-- ENDIF -->
</div>
</fieldset>
<div class="login-links">
<p><a href="ucp.php?mode=sendpassword&rb_v=ucp"> {L_FORGOT_PASS}</a><br />
<a href="ucp.php?mode=resend_act&rb_v=ucp"> {L_RESEND_ACTIVATION}</a>
</div>
<div class="clr"></div>
<div class="readon-wrap1"><div class="readon1-l"></div><a class="readon-main"><span class="readon1-m"><span class="readon1-r"><input type="submit" name="login" class="button" value="{L_LOGIN}" /></span></span></a></div><div class="clr"></div>
</form>
</div></div></div>You can also use it for external links. For example:
Code:
(set height/width by pixels)
<a href="http://www.google.com" rel="rokbox[500 400]">click me</a>
OR
(set height/width by percentage)
<a href="http://www.google.com" rel="rokbox[75% 80%]">click me</a>Demo Board: click login to see it. - http://www.rapidsharemoviezone.com
Login Box:
External Link:
