Darle un poco de estilo a nuestros formularios de Login!
Hola a toda la comunidad... Hoy les quiero aportar un tutorial que sirve para darle un poco de estilo a los formularios de Login del foro en este cas...

Hola a toda la comunidad... Hoy les quiero aportar un tutorial que sirve para darle un poco de estilo a los formularios de Login del foro en este caso, pero esto se puede utilizar para darle estilo a cualquier formulario de la web...

PASO #1
Primero dirigirnos a la pastaña Plantillas y estilos, luego editar el global.css del theme que usamos por defecto y copiar al final de todo el siguiente codigo...

Código:
.textbox_username
{
background: #ffffff url(images/icon_username.png) no-repeat;
background-position: 1 1;
border: 1px solid #0F5C8E;
padding-left: 19px;
}

.textbox_password
{
background: #ffffff url(images/icon_password.png) no-repeat;
background-position: 1 1;
border: 1px solid #0F5C8E;
padding-left: 19px;
}

.textbox_email
{
background: #ffffff url(images/icon_email.png) no-repeat;
background-position: 1 1;
border: 1px solid #0F5C8E;
padding-left: 19px;
}

NOTA! Si editamos el color hex de border, en este caso #0F5C8E, editamos el color del borde del formulario...

PASO #2
Una vez hecho esto nos toca editar las plantillas que contienen nuestros formularios de login y email (Lost Password)

Plantillas -> Nuestro Theme Default -> Mensaje de error - Plantillas -> error_nopermission
\-> Editar los inputs por defecto:
\-> Username: cambiar el class="textbox" por class="textbox_username" y editar value="xxxxx" por value="Username" onfocus="this.value=''"
\-> Password: cambiar el class="textbox" por class="textbox_password" y editar value="xxxxx" por value="password" onfocus="this.value=''"

Plantillas -> Nuestro Theme Default -> Miembro - Plantillas -> member_login
\-> Editar los inputs por defecto:
\-> Username: cambiar el class="textbox" por class="textbox_username" y editar value="{$username}" por value="Username" onfocus="this.value=''"
\-> Password: cambiar el class="textbox" por class="textbox_password" y editar value="{$password}" por value="password" onfocus="this.value=''"

Plantillas -> Nuestro Theme Default -> Miembro - Plantillas -> member_lostpw
\-> Editar los inputs por defecto:
\-> Email: cambiar el class="textbox" por class="textbox_email" y agregar value="Aquí correo electrónico" onfocus="this.value=''"
\-> Resultado: <input type="text" class="textbox_email" name="email" value="Aquí correo electrónico" onfocus="this.value=''" />

NOTA! El tag value="" muestra por defecto algo en el input, por ejemplo "Username" mientras que el tag onfocus=this.value=''" nos va a resetear el value por defecto para asi completar el valor necesitado en este caso el Nick para hacer login.-

Iconos para los formularios (17px / 17px)
[attachment=292][attachment=291]

Imagenes con los resultados funcionando en mi foro
[attachment=287][attachment=288][attachment=289]

Espero les sea de utilidad...
Saludos AlanB Cool
Muy bien pero no va con mi stilo XD
Esta bien (y), aunque solo pusiste esos dos iconos se ve muy bien.
creo ke lo usare en mi foro ..
Lo que hice es mostrarles donde lo use yo y como, pero puede usarse en cualquier formulario del foro... Saludos!
Alan, me gustó mucho la idea, eso de los iconos está bien atractiva. Big Grin

El próximo lunes la implementaré en el foro, ahí luego te cuento.