Cómo agregar iconos a los comentarios

Sanchez Toledano dijo:

Es la propiedad background de CSS:

PHP:

<input id="foo" type="text" />
#foo
{
    background: url(/img/foo.png);
}

o también

PHP:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

Hacer clic para expandir...

Sanchez Toledano dijo:

Ok. Primero, el CSS o sea las hojas de estilo en cascada no forman parte de WordPress, también funcionan en Blogger, por ejemplo.

Este es el código de la caja de texto, la puedes encontrar en, por ejemplo, comments.php:

PHP:

<input type="text" name="author" id="author" value="" size="22" tabindex="1">

Y este es el código que pone el icono dentro de la caja, y se coloca por lo general en user.css o en style.css:

Insertar CODE, HTML o PHP:

#respond .col-left dl dd input#author {
background: url(http://sumolari.com/wp-content/themes/sumocronic/img/comment-form.png) no-repeat 0px 0px;
}

Busca este texto en tu plantilla comments.php (supongo):

PHP:

<input type="text" name="author" class="txt" id="author" value="" size="22" tabindex="1">

y reemplazala con esto:

PHP:

<input style="background: url(http://sumolari.com/wp-content/themes/sumocronic/img/comment-form.png) no-repeat 0px 0px;
" type="text" name="author" class="txt" id="author" value="" size="22" tabindex="1">

Hacer clic para expandir...

Mario dijo:

Creo que es mejor que coloques todos los estilos directamente en la hoja de estilos (style.css si usas wordpress)

En la dirección de tu blog sería algo así:

Insertar CODE, HTML o PHP:

#author { background: #fff url('url/imagen') left center no-repeat; padding-left: 15px; }
#email { background: #fff url('url/imagen') left center no-repeat; padding-left: 15px; }
#url { background: #fff url('url/imagen') left center no-repeat; padding-left: 15px; }

Ese código se puede colocar en cualquier parte de la hoja de estilos, pero por cosas de organización lo normal es colocarlo junto a los demás atributos de los comentarios. Fijate que coloqué el atributo padding-left eso es para que la imagen de fondo siempre se quede a la izquierda del texto que se ingresa y este no la tape, los pixeles pueden variar, depende de la imagen que estes utilizando y el espacio que quieras dejar.

También se podría optimizar el código y salvar unos pocos caracteres asi:

Insertar CODE, HTML o PHP:

#author, #email, #url { padding-left: 15px; }
#author { background: #fff url('url/imagen') left center no-repeat; }
#email { background: #fff url('url/imagen') left center no-repeat; }
#url { background: #fff url('url/imagen') left center no-repeat; }

Saludos...

Hacer clic para expandir...