Como ya hay tutoriales para recuadrar el avatar con imágenes hago este tutorial para recuadrarlo con css, y un efecto al pasar el puntero del mouse por arriba del mismo.
Primero agregan esto a su
globlal.css (AdminCP/Estilos y Plantillas/Estilos/tutema)
.postbit-avatar {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #DDDDDD;
border: 1px solid #BEBEBE;
padding: 4px;
}
.postbit-avatar:hover {
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-webkit-box-shadow: 0px 0px 6px 0px rgba(0, 150, 250, 1);;
-moz-box-shadow: 0px 0px 6px 0px rgba(0, 150, 250, 1);;
box-shadow: 0px 0px 6px 0px rgba(0, 150, 250, 1);;
}
Después abren su
postbit_avatar (AdminCP/Estilos y Plantillas/Plantillas/tu tema/Caja del mensaje)
Tienen que agregarle
class="postbit-avatar" antes del
alt=""
Les tiene que quedar asi:
Cita:<a href="{$post['profilelink_plain']}"><img src="{$post['avatar']}" class="postbit-avatar" alt="" {$avatar_width_height} /></a>
Pueden ver una demo en mi
Foro de prueva