(All Version) Login Box

Buna Ziua,
Astazi ma gandit sa va arat cum puteti realiza un Login box pentru versiunea phpbb3.
Sa incepem.
Pasul 1. (JS)
ACP > Module > HTML & JAVASCRIPT > Gestiunea codurilor JavaScript > Creati un nou JavaScript
Title: Login Box
Amplsare: Toate Paginile
Cod JS:

Cod:

$(function() {
$('li:contains(Conectare)').replaceWith('<li><a class="mainmenu" id="login" href="#" rel="nofollow"><img id="i_icon_mini_login" src="http://2img.net/i/fa/empty.gif" border="0" hspace="2" alt="Log in" title="Log in">Conectare</a>  </li>');
$('head').append('<div id="panel"><div class="inner"><form action="/login.forum" method="post"><table cellspacing="1" cellpadding="3" border="0"><tbody><tr><td width="45%" align="right"> Username:</td><td><input type="text" name="username" size="25" maxlength="40" /></td></tr><tr><td align="right">Password:</td><td><input type="password" name="password" size="25" maxlength="32" /></td></tr><tr align="center"><td colspan="2">Log me on automatically each visit: <input type="checkbox" name="autologin" checked="true" /></td></tr><tr align="center"><td colspan="2"><input type="submit" class="mainoption" name="login" value="Log in" /></td></tr></tbody></table></form></div></div>'); $('#login').click(function(e) {
$('#panel').appendTo('li:contains(Conectare)', function(e) {
$('#panel').toggle(); });}); })
(windows);

Pasul 2.
ACP > Afisare > Imagini si Culori > Culori > Foaia de stil CSS

Cod:

#panel {
margin-left: 34%;
background: #E4EFF3;
width: 30%;
border: 1px double #2597CC;
color: #7AC;
padding: 5px;
border-radius: 3px;
}

#panel input {
padding: 3px 6px;
border: 1px solid #CCC;
background: #FCFCFC!important;
border-radius: 3px;
}

Enjoy.
Dovada :
1. (Inainte de click)
2. (Dupa click)

Tutorial relizat de InFeRn0.
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.

Imi place, cred ca il voi pune si la mine pe Forum