Estilo IPB de Log-in en Panel de Administración

Este truco le ayudará a agregar un tipo de Login Admin Panel similar a IPB en su foro Foroactivo, para que pueda utilizarlos cada vez que quiera ir a su Panel de Administración.

Para Instalar crearemos una nueva Pagina HTML en, Ir al Panel de Administración - Módulos - HTML & JAVASCRIPT - Gestión de las páginas HTML, con las siguientes características:

Título: (El que tu quieras)
¿Deseas utilizar la parte alta y la parte baja de la página de tu foro?: No
¿Utilizar esta página como índice?: No

Código:: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <head> <title>Painel de Controle: Log in</title> </head> <body id='ipboard_body' class='login_screen'> <form action='/login' id='qstring' name="form_login" method='post'><div id='login' class=''> <img src='http://i37.servimg.com/u/f37/18/44/18/75/x10.png' id='login_logo' /> <div id='login_controls'> <label for='username'>Username</label> <input type="text" size="20" id="username" tabindex="1" name="username" value="" class="textinput"> <label for='password'>Password</label> <input type="password" size="20" id="password" tabindex="2" name="password" value="" class="textinput"> </div> <div id='login_submit'> <input type="hidden" name="redirect" value="/admin/index.forum"> <input type="hidden" name="query" value="part=admin"> <input type="hidden" name="admin" value="1"> <input type="submit" name="login" tabindex="6" value="Log In" class="button"> </div> </div> </form> </div> </div> </form> <script> $(function() { $('input[type="text"]').first().focus(); }); </script> </body> </html> <style> html { height: 100%; } body { background: white; font: normal 13px 'Helvetica Neue', helvetica, arial, sans-serif; position: relative; color: #4C4C4C; height: 100%; } body.login_screen { background: #386E9A; background: -moz-linear-gradient(top, #4A85B5 0%, #205889 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A85B5), color-stop(100%,#205889)); height: auto !important; } input, select, textarea { font: normal 13px 'Helvetica Neue', helvetica, arial, sans-serif; } #login { width: 450px; height: 220px; background: white; margin: 10% auto 0 auto; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0px 0px 12px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); position: relative; padding: 10px; } #login_logo { position: absolute; top: -45px; left: 0; } #login_controls { margin: 0 auto; position: absolute; width: 100%; bottom: 100px; font-size: 16px; } #login_controls label { display: block; width: 33%; color: #667078; float: left; clear: both; margin-bottom: 12px; text-align: right; padding-right: 15px; } label { cursor: default; } #login_controls { font-size: 16px; } #login_controls input { margin-bottom: 12px; font-size: 14px; width: 45%; } .textinput, .multitext, .input_text, .ipsTagBox_wrapper { padding: 4px; border-width: 1px; border-style: solid; border-top-color: #848484; border-left-color: #C1C1C1; border-right-color: #C1C1C1; border-bottom-color: #E1E1E1; background: white; -moz-border-radius: 2px; border-radius: 2px; width: 350px; } #login_submit { background: #E7EDF2; border-top: 1px solid #D0DCE6; padding: 20px 10px; text-align: center; position: absolute; bottom: 0px; left: 0; right: 0; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .button, .realbutton { padding: 5px 19px; border: 0; background: #363636; color: white !important; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; } </style>

Cuando hayamos creado y añadido en código anterior, iremos a Ir al Panel de Administración - Módulos - HTML & JAVASCRIPT - Gestión de los códigos Javascript y crearemos uno nuevo, con las siguientes características:

Título * : (El de tu elección)
Posición : En todas las páginas.

Código:: jQuery(function() { jQuery('a[href*="/admin"]').attr('href','/h7-page'); });

Es necesario que modifiques "/h7-page" con la dirección de tu "Página HTML" creada al inicio y listo, a disfrutar un Panel de Administración elegante.