Poner bordes al avatar con 1 sola imagen
Aporte traido de SoporteMybb, redactado por: Ryuuseiken. Hola primero aclaro que todo el css es de http://www.mybbturkiye.com y los creditos les cor...

Aporte traido de SoporteMybb, redactado por: Ryuuseiken.

Hola primero aclaro que todo el css es de http://www.mybbturkiye.com y los creditos les corresponden yo solo hare el tutorial.

¿Como quedara?

[Imagen: muestra-92300.png]

Comenzemos

• Vas a Estilos y Plantillas > Estilos > Global.css > Editar Hoja de Estilo: Modo Avanzado y agregas esto al final:

.avatar {
background: url(images/marco-avatar.png) no-repeat; width: 104px; height: 107px; margin: 0 auto 5px auto;
}

.avatar img {
margin: 6px 6px 0 6px; display: inline; width: 90px; height: 93px;
}

Y subes cualquiera de estas 3 images a public_html/htdocs > images > marco-avatar.png (la renombras).

[Imagen: avatar-frame-92299.png] [Imagen: avatar-frame-92298.png] [Imagen: avatar-frame.png]

• Vas a Estilos y plantillas > Plantillas > Caja del mensaje - Plantillas > Postbit_avatar y remplazas lo que tienes ahí por esto.

<div class="avatar"><a href="{$post['profilelink_plain']}"><img src="{$post['avatar']}" alt="" {$avatar_width_height} /></a></div>

Y eso sería todo , ya deje las muestras de como quedara arriba.
[Imagen: http://www.sincemylastcigarette.com/bann...0_dark.png]
Archivos Adjuntos

justo era el tuto que buscaba, muchas gracias, ahora a encontrar el marco que ocupaba msn para los avatar cuando existía Tongue
Buenas, no te ofendas Ignacio, me parece un excelente tutorial, ya que las imágenes se pueden editar y hacer cosas geniales.

Lo que voy a dejar, es lo mismo, pero sin el uso de imágenes, puro CSS (Para el que no quiera cargar el sitio con imágenes y quiera obtener el mismo resultado).

Primero van a su plantilla de postbit_avatar, y en el código que ya tienen, agregan sólo esto:


Cita:<a href="{$post['profilelink_plain']}"><img class="avatar" src="{$post['avatar']}" alt="" {$avatar_width_height} /></a>


Luego, se dirigen a su CSS, y añaden ésta clase:

.avatar {
padding: 5px;
border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border: 1px solid #b2b2b2;
background: #e5e5e5; /* Old browsers */
background: -moz-linear-gradient(top,  #e5e5e5 0%, #b2b2b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#b2b2b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #e5e5e5 0%,#b2b2b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #e5e5e5 0%,#b2b2b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #e5e5e5 0%,#b2b2b2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #e5e5e5 0%,#b2b2b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#b2b2b2',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
}

Paso a explicar el CSS:

La propiedad padding les dará el ancho del marco (Aplicará en éste caso 5 pixeles a cada lado).
Las propiedades border-radius y sus derivados (O, MS, MOZ y WEBKIT) modifican los bordes para que se redondeen. En éste caso aplique 4 pixeles en general para los 4 bordes.
La propiedad border lo único que hace es crear un borde al rededor.
Luego, la propiedad background (Que se repite varias veces) es un degradado de color, hacerlo a mano es posible pero es complejo, es por eso que pueden utilizar ésta web para crear sus degradados, copiarlos y luego añadirlos a su gusto.
Por último, la propiedad box-shadow crea el famoso borde superior que se utiliza hoy en día en muchos diseños, no es tan complejo de utilizar, pero también pueden recurrir a ésta web, y generar su código para copiarlo y utilizarlo.

Aclaro una ves más, que ésto es una variante del tutorial para no tener que utilizar imágenes, tengan en cuenta que al utilizar imágenes se pueden hacer mil cosas y tienen compatibilidad en todos los navegadores, cosa que con CSS no pasa, ya que hay ciertos navegadores (Maldito Internet Explorer ¬¬') que no reconocen degradados y demás, por lo cual se verá un color sólido.

Saludos y espero que les sirva.
Última modificación: 4 Dec, 2013, 9:08 am por SallieJac.
Colaboradores
Gamerzon eNvy
This forum uses Lukasz Tkacz MyBB addons.