Estilizar Comentarios en Wordpress

jQuery es sin duda alguna mi Framework favorito, hoy he leído un artículo de como estilizar la caja de los comentarios de nuestro theme mediante unas simples líneas.

Lo que vamos a lograr es que mediante jQuery cada vez que posicionemos el Mouse sobre algún campo, jQuery automáticamente le aplicara un estilo vía CSS.

Primeramente, declaremos los estilos dentro de nuestra hoja de estilo (valga la redundancia).

.OnFocus{
    	background: white;
    	color:#000;
    	border:solid 2px #BA5B00;
    }
.OnIdle{
    	background:#D8D8C7;
    	color: #6F6F6F;
	border: solid 2px #89897C;
    }

Nos aseguraremos de haber borrado todo estilo previamente asignado a los campos, ya que de lo contrario el resultado no será placentero.

Las clases declaradas arriba cambian el color del fondo, el texto y los bordes de nuestro campo, cuando un campo es seleccionado la clase “OnFocus” entra en juego.

Por ultimo incluimos estas líneas dentro de nuestro header.php y estaremos listos.

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('input[type="text"], textarea').addClass("OnIdle");
       	$('input[type="text"], textarea').focus(function() {
       		$(this).removeClass("OnIdle").addClass("OnFocus");
    		if (this.value == this.defaultValue){
    		       this.value = '';
		}
		if(this.value != this.defaultValue){
	    	this.select();
	    	}
    	});
    	$('input[type="text"], textarea').blur(function() {
    		$(this).removeClass("OnFocus").addClass("OnIdle");
    		if ($.trim(this.value) == ''){
			this.value = (this.defaultValue ? this.defaultValue : '');
		}
    	});
});
</script>