Jun
14
0

estilizando wordpress - iconos en areas de texto (text areas icons)

text areas

Cuando hablamos de Wordpress, hablamos también de interactuar con los visitantes, así que, ¿que no mejorar nuestra presentación de las areas de texto?

Para ello utilizaremos codigo CSS muy sencillo =)

Para empezar a estilizar, debemos contar con los siguientes parámetros.

1.- Verificar que tenemos nuestro ID (identificador) llamado “commentform”, el cual es algo como esto :


<form id="commentform" action="<?php echo get_option('siteurl'); >;/wp-comments-post.php" method="post"></form>

2.- Una vez identificado nuestro punto de partida verificamos que contamos las id’s de los inputs a donde aplicaremos nuestros iconos tales como :

[ author ]


<input id="author" name="author" size="22" type="text" value="<?php echo $comment_author; >;" />

[ email ]


<input id="email" name="email" size="22" type="text" value="<?php echo $comment_author_email; >;" />

[ url ]


<input id="url" name="url" size="22" type="text" value="<?php echo $comment_author_url; >;" />

3.- Una vez certificados los puntos 1 y 2, aplicamos nuestro codigo CSS en nuestro style.css de el tema a donde modificaremos dichos iconos:

#commentform input#author{background-image:url(images/author.png); background-repeat:no-repeat;
padding:4px 4px 4px 30px;
}
#commentform input#email{background-image:url(images/email.png); background-repeat:no-repeat;
padding:4px 4px 4px 30px;
}
#commentform input#url{background-image:url(images/url.png); background-repeat:no-repeat;
padding:4px 4px 4px 30px;
}

El toque final, sería aplicarle un posicionamiento a dichos iconitos con más CSS:


#commentform input#author        {background-position:5px 5px;}
#commentform input#email        {background-position:5px 5px;}
#commentform input#url            {background-position:5px 5px;}

Y listo ! :lol:

Con ello estilizamos nuestras areas de texto de nuestra sección de comentarios (sumamente importante para un blog el darle presentación).

Nota:

Algunas variables en las ID’s pueden ser diferentes, aunque revisé cerca de 30 themes actualizados y todos coincidieron con esas ID’s, en caso de que varíen, es solo cosa de cambiar los nombres de nuestras variables.


Autor del Articulo | Power

Nombre del Articulo | estilizando wordpress - iconos en areas de texto (text areas icons)

Categorias del articulo | tutoriales, wordpress

Etiquetas Usadas en el articulo | | | | |
Enlace para TrackBacks | trackback

Articulo Anterior | muenlinea - servidor mu online season 3 episodio 2

Articulo Siguiente | Old man’s Child - Doommaker

Quieres un avatar?

Los avatares de este Blog y de muchos otros, son gracias al sistema de Gravatar, para que aparezca tu imagen, registrate en gravatar.com

Dejame un comentario sobre el articulo.