BorderGame
Creare uno sliding login MyBB - Versione stampabile

+- BorderGame (https://www.bordergame.it)
+-- Forum: MyBB Italia (/Forum-MyBB-Italia)
+--- Forum: Guide e tutorial - MyBB 1.8 (/Forum-Guide-e-tutorial-MyBB-1-8)
+--- Discussione: Creare uno sliding login MyBB (/Thread-Creare-uno-sliding-login-MyBB)



Creare uno sliding login MyBB - Zarta - 09-11-2015 08:04 PM

Sliding Login per MyBB


Vorresti inserire un bellissimo sliding login sul tuo forum MyBB ? Bene, questa è la guida che fa per te!

Per prima cosa andiamo a capire cos'è un sliding menù o un sliding login.
Letteralmente uno sliding login vuole dire Login a scomparsa. Si tratta un "pannello" che compare scorrendo solamente quando andiamo a fare click su un determinato pulsante.

Perchè utilizzare un sliding login ?

- Permette di risparmiare spazio.
- Permette di aggiungere dettagli mancanti al login di default.
- E' uno strumento per caratterizzare la grafica del vostro forum e renderla più accattivante.

Inoltre al suo interno potrete anche inserire immagini, testi, annunci o quant'altro.

Creare uno sliding login :

~ Per prima cosa dobbiamo scaricare l'allegato contenente le immagini, il file .css e il file Javascript del nostro pannello a scorrimento.
Per effettuare il download potete fare click sul file che trovate qui sotto :
[attachment=1265]

~ Scarichiamo il file ed estraiamolo sul nostro pc.

~ Andiamo a caricare nel nostro spazio FTP la cartella chiamata slidepanel all'interno della cartella "images" del nostro server.

~ Ora rechiamoci nel nostro Admin CP --> Template e temi --> Template --> Nostro tema --> Header Template --> header_welcomeblock_guest

~ Andiamo a cancellare tutto il contenuto e a sostituirlo con il seguente :
Per sicurezza tenete sempre una copia del template nel caso voleste annullare le modifiche appena effettuate.

Codice PHP:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

 <
link href="images/slidepanel/styles.css" rel="stylesheet" type="text/css" />

 <
script src="images/slidepanel/js/jquery.js" type="text/javascript"></script>
 <script src="images/slidepanel/js/panelslide.js" type="text/javascript"></script>

 <!--[if IE 7]>
 <link rel="stylesheet" type="text/css" href="ie.css" />
 <![endif]-->
 <div id="slide-panel"><!--SLIDE PANEL STARTS-->

 <form action="member.php" method="post" class="form"><!--FORM STARTS-->
 <center>
 <p>Please Login</p>
 <p><input type="text" class="textbox" name="username" size="25" maxlength="{$mybb->settings['maxnamelength']}" style="width: 200px;" value="{$username}" /></p>
 <p><input type="password" class="textbox" name="password" size="25" style="width: 200px;" value="{$password}" /></p>
 <input type="submit" class="button" name="submit" value="{$lang->login}" />
 <input type="hidden" name="action" value="do_login" />
 <input type="hidden" name="url" value="{$redirect_url}" />
 </p>
 <p>Not a member? <a href="{$mybb->settings['bburl']}/member.php?action=register">Register</a> here | <a href="{$mybb->settings['bburl']}/member.php?action=lostpw">Lost Password?</a></p>
 </center>
 </form><!--FORM ENDS-->

 </div><!--SLIDE PANEL ENDS-->

 <p class="slide"><a href="#" class="btn-slide">Login / Register</a></p><!--LOGIN BUTTON TEXT--> 

~ Salviamo e abbiamo finalmente disponibile il nostro login a scorrimento per MyBB! 01

Ovviamente quello che vedrete è un pannello "grezzo", ma essendo gestito totalmente da CSS e immagini è personalizzabile al 100%.
Qualche piccolo sforzo, qualche idea e potrete avere un bellissimo e molto funzionale pannello di Login a scomparsa; sembra poco ma sono i piccoli elementi che rendono alcuni forum migliori di altri Smile

Volete postare come avete modificato il vostro login a scomparsa ? Siete i benvenuti! Aspettiamo i vostri feedback :=P:

Enjoy! 148

Thanks to WbDev ( MyBBExtras )