[phpbb3] Login Box Addon

[shadow.prx]

Hey guys decided to make another phpbb tutorial before we start here a a few notes

Yes jayfella has already done this but he is using the mootools javascript library this tutorial shows you how to use it with jQuery im not going into why jquery is better but their slogan should explain enough "The write less do more javascript library"

You will need to download this file you can grab the latest one at the color box website if you want or just upload it to the your styles root

http://dl.dropbox.com/u/6885374/stylesroot.zip

Here is what it will look like:

Sexy

Now onto the tutorial:

Open overall_header.html

Find: (if you cannot find this add it anywhere where you see scripts being linked)

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Add after:
( you can play around with the settings i have set some default ones up for you its easy to understand i have also included a link to the jquery file you can download it and upload it to your server and link it off that if you prefer )

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/jquery.colorbox-min.js"></script>
<link href="{T_THEME_PATH}/colorbox.css" rel="stylesheet" type="text/css" media="screen, projection" />
                <script type="text/javascript">
                        $(document).ready(function(){
                         $(".loginbox").colorbox({transition:"elastic", width:"20%", inline:true, href:"#login_box"});
                        });
                </script>

Open overall_footer.html (most of this code i stole from jays post so props to him for it )

Find: you can put this anywhere so for example find

</body>
</html>

Add before:

        <div style='display:none'>

            <div id='login_box' style='padding:10px; background:#0F0F0F;'>
<div align="center"><h3>Login Form</h3></div>
                
<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 -->

</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 align="center"><input type="hidden" name="redirect" value="" /><input type="submit" name="login" class="mainoption" value="Log in" /></div>
    </form>
</div></div>
            </div>
</div>

Now all you need to do is replace any links to the login page with this

<a href="#"class="loginbox">

That should be it for a live demo you can visit gfx-scene.com i have it on my site enjoy

shadow.prx Reviewed by shadow.prx on 17th May 2010. [phpbb3] Login Box Addon Hey guys decided to make another phpbb tutorial before we start here a a few notes Yes jayfella has already done this but he is using the mootools javascript library this tutorial shows you how to use it with jQuery im not going into why jquery is better but their slogan should explain enough "The write less do more javascript library" ;) You will need to download this file you can grab the latest one at the color box website if you want or just upload it to the your styles root Rating: 5

[bumilad20]

nice Work mate kep it up

[shadow.prx]

Np bumilad

I edited the post forgot to add how to the change the login links lol

[jayfella]

i never really "wrote" the one i made, it was specifically taken from a rockettheme theme, so no credit for me - but yours does pretty much the exact same thing with a different library - great stuff

[showstopper]

looks nice

[shadow.prx]

Ah fair enough jay though you wrote it so i credited you will just leave it their and thanks for the compliment

glad everyone likes it