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)

.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.

Ryuuseiken 31 Oct, 2011, 11:28 am

Es una buena opción Big Grin

RKen 31 Oct, 2011, 11:38 am

Ahhh queda muy lindo! lo voy a utilizar... Muchas Gracias! Smile

PD: no tengo más puntos de Reputación para hoy mañana te los doy :cookie:

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

(31 Oct, 2011, 11:38 am)RKen escribió: Ahhh queda muy lindo! lo voy a utilizar... Muchas Gracias!

PD: no tengo más puntos de Reputación para hoy mañana te los doy :cookie:

No hay problema Wink

Omar G. 31 Oct, 2011, 8:34 pm

¿Un ejemplo? Por que como lo leí mas bien lo redondeas no recuadras.

Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;

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.

Omar G. 31 Oct, 2011, 10:11 pm

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)

Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;

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?

Gustavo R. 2 Nov, 2011, 5:58 pm

Muy bonito me agrado, rep+ por pasarnos el tuto.

[Imagen: l7Qimoa.png]

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.

Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.

Discord omar.gonzalez (Omar G.#6117); Telegram at @omarugc;