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...
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
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
