Recuadrar el avatar con css

Leandro M. 31 Oct, 2011, 11:18 am

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)

Código PHP:
<?php 

.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

Última modificación: 8 Dec, 2012, 8:10 pm por setool3.

RKen 31 Oct, 2011, 9:46 pm

(31 Oct, 2011, 8:34 pm)Sama34 escribió: ¿Un ejemplo? Por que como lo leí mas bien lo redondeas no recuadras.

(31 Oct, 2011, 11:18 am)[L]eazO escribió: Pueden ver una demo en mi Foro de prueba

Creo que en realidad quizo decir "Encuadrar" Wink

, como el avatar con frames, algo parecido. Igual si viste el ejemplo queda muy lindo el efecto que hace.

Saludos.

Leandro M. 2 Nov, 2011, 5:33 pm

(31 Oct, 2011, 10:11 pm)Sama34 escribió: Cierto, muy bueno, le da efecto ipb, solo le faltaria que salte la informacion del perfil del usuario (algo como el title threads de Edson)

Eso mismo quiero ponerle Samma, title="Avatar de usuario"
Pero cual seria el code para que muestre el usuario?

Omar G. 3 Nov, 2011, 6:19 am

#10

(2 Nov, 2011, 5:33 pm)[L]eazO escribió: Eso mismo quiero ponerle Samma, title="Avatar de usuario"
Pero cual seria el code para que muestre el usuario?

Yo me referia a otra cosa, pero lo que tu dices es "{$post['username']}". Creo.

{SIGNATURE_IMAGE}