Crea un login slide e meraviglia i tuoi utenti!

Ti piacerebbe vedere nel tuo forum un login come quello nell’immagine??

wysiwyg image

Direi che è molto carino e anche semplice da fare Scarica jquery da qui non copiarlo nel header perchè non funziona!

Entriamo nel PDA »Temi» Il tuo tema »global.css trova #panel e aggiungi

[php]height:50px;
overflow:hidden;[/php]

Ora clicca su Modifica Stylesheet: Modalità avanzata e infondo aggiungi:

.logintext {
height:50px;
width:100;
}
.loginform {
height:50px;
width:100;
}

Dopo aver salvato vai ACP »Temi» Il tema »Modelli» Modelli Header »header_welcomeblock_guest e sostituisci tutto con:

<div>
Please <a href="{$mybb->settings['bburl']}/member.php?action=login" onclick="return false;" id="slide-in-loginform">Log-in</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register">Register</a> to get full access to the forums.
</div>

<form action="member.php" method="post">
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$url}" />
<label>Username: </label>
<input type="text" name="username" value="" />
<label>Password: </label>
<input type="password" style="left:-3px;" name="password" value="" />
</span>
<br/>
<input type="submit" value="Login" tabindex="3" />
</form>

Ora vai in ACP »Temi» Il tema » Ungrouped Templates » »headerinclude e incolla:

<script type="text/javascript">
jQuery(function() {
jQuery("#slide-in-loginform").click(function () {
jQuery('.logintext').animate({
marginTop: '-50px'
}, "slow").css('margin-top', '-50px');
});
});
</script>

Non ti resta che testarlo!

0 0 votes

Vota l'Articolo