Como adicionar ícones aos comentários

Sanchez Toledano disse:

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;
}

Clique para expandir...

Sanchez Toledano disse:

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:

Inserir CODE, HTML ou 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">

Clique para expandir...

Mario disse:

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í:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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...

Clique para expandir...