rubensa, algo en qué pensar

Lunes, 30 de enero de 2006

Gravatars en mi bitácora

Hace ya algunos días, añadí el soporte para gravatar en los comentarios de las anotaciones. Hoy me he podido poner un pequeño ratillo con el tema y he mejorado un poco el aspecto de los mismos.

El código que he puesto para los comentarios en "comentarios.bit", viene a ser el siguiente:

<p>

<div class="<bit:comentario_selector_clase("comentario_par", 

           "comentario_impar", "comentario_autor")/>">

<div class="gravatarcontainer">

  <a href="<bit:comentario_url() />" target="_blank">

  <img 

src="<bit:gravatar_comentarista(

"http://img247.echo.cx/img247/1894/nogravatar7uc.gif",

",",",","80") />"

   border="0" title="<bit:comentario_nombre() />"></a>

</div>

<bit:comentario_texto() /><br/>

<bit:comentario_enlace_autor_antispam() /> |

 hace <bit:comentario_tiempo_transcurrido() />

</div>

</p>

Y en "estilo.css" he definido varios estilos para los comentarios "comentario_par", "comentario_impar" y "comentario_autor"; así como el estilo para lo que es la imagen del grávatar en sí, "gravatarcontainer".

.comentario_par {

	padding-left: 10px;

	padding-top: 3px;

	padding-bottom: 3px;

	border-top: 1px dashed #A3B3C7;

	border-right: 1px dashed #A3B3C7;

	border-bottom:1px dashed #A3B3C7; 

}

.comentario_impar {

	background-color: #f5f5f5;

	padding-left: 10px;

	padding-top: 3px;

	padding-bottom: 3px;

	border-left: 3px solid #cccccc;

	border-top: 1px dashed #A3B3C7;

	border-right: 1px dashed #A3B3C7;

	border-bottom:1px dashed #A3B3C7; 

}

.comentario_autor {

	background-color: #EAEEF2;

	color: #0955A1;

	padding-left: 10px;

	padding-top: 3px;

	padding-bottom: 3px;

	border-left: 3px solid #CBDAE9;

	border-top: 1px dashed #A3B3C7;

	border-right: 1px dashed #A3B3C7;

	border-bottom:1px dashed #A3B3C7; 

}

.gravatarcontainer {

	float: left;

	position: relative;

	text-align: right;

	width: 80px; /*ancho de la caja que contendrá la imagen*/

	height: 80px; /*alto de la caja que contendrá la imagen*/

	margin-right: 4px;

	border: none;

}

Por: Rubén Suárez Alvarez | Bitácora | Comentarios (0) | Referencias (0)