Agregar Efecto Circulo al Avatar

ktemanuel 5 Feb, 2015, 5:56 am

Creditos al usuario Netaro por este tuto

Paso 1: Ir a: CP Admin---> plantillas & estilo---> Estilos---> haga clic en el nombre de tu tema. (Default o Tu Thema utilizado) ---> Añadir Stylesheet/Agregar Hoja de Estilos

En Nombre de Archivo:
Pones el que quieras pero debe tener la extensión .css
Adjuntar: Globalmente
Escribir mi Propio Codigo:

.post .post_author div.author_avatar img {
 border-radius: 55%;
  transition:all 0.3s ease;
 }

Si desea que se convierta en cuadrados cuando se pase el cursor del ratón sobre ellos añadir este código

.post .post_author div.author_avatar img:hover {
 border-radius: 0%;
 transition:all 0.3s ease;
 }

Si queres quitar la animación deben quitar este código

 transition:all 0.3s ease;

Si desean agregar algún color al circulo/cuadrado agregar esto

background: *COLOR HERE*;

Cambiar el código *COLOR HERE* por algún color hexadecimal

[Imagen: uWxlXIh.png]
[Imagen: qvJ9wyg.png]

Última modificación: 5 Feb, 2015, 6:00 am por ktemanuel.

Niil78 5 Feb, 2015, 6:20 pm

Pues a mi no me sirvió, lo intente también Editando global.css.

ktemanuel 6 Feb, 2015, 4:20 am

dime que nombre le pusiste al archivo creado

BitLiberal 6 Feb, 2015, 6:22 am

Hago trabajos por encargo para foros MyBB:

Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)

ktemanuel 6 Feb, 2015, 8:04 am

BitLiberal 7 Feb, 2015, 6:19 am

Como siempre han sido las hojas de estilo externas desde que se crearon en el año 1996.

BitLiberal escribió:Es recomendable hacerlo en el global.css.

.css

Saludos.

Hago trabajos por encargo para foros MyBB:

Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)

Niil78 7 Feb, 2015, 4:12 pm

Hombre seguí la guía al pie de la letra, y hice refrest, e incluso probe con otros navegadores. nada Sad

XEDE 7 Feb, 2015, 11:32 pm

(7 Feb, 2015, 4:12 pm)Niil78 escribió: Hombre seguí la guía al pie de la letra, y hice refrest, e incluso probe con otros navegadores. nada

Proba usar este código que es el que uso en mis themes:

Vas al Global.CSS del theme que usas y buscas y editas esta linea:

.post .post_author div.author_avatar img

.post .post_author div.author_avatar img {
    border: 0 none;
    border-radius: 50%;
    box-shadow: 0 0 5px #4096ee;
    max-height: 125px;
    max-width: 125px;
    padding: 0;
    transition: all 1s ease 0s;
}
.post .post_author div.author_avatar img:hover {
    border-radius: 0;
    box-shadow: 0 0 5px #4096ee;
    cursor: pointer;
    max-height: 250px;
    max-width: 190px;
    transition: all 1s ease 0s;
}

El resultado es "Similar" no igual, pero fijate si te funciona, si no te funciona tampoco este es porque algo estas aplicando mal, para ver un ejemplo de como queda con este codigo podes ver este tema en este link y poner el mouse sobre el avatar

[Imagen: CCoBXgK.png]
[Imagen: TQqCgcO.png]

jerelesi 9 Feb, 2015, 3:45 pm

XEDE 9 Feb, 2015, 6:11 pm

#10

El tema del tamaño es por el avatar que usas, en mi caso uso avatares de dimenciones grandes, por esa razon se ve de esa forma, eso lo configuras en tu ACP en las opciones de usuario/perfil y mostrar temas si no recuerdo mal, cambias el maximo que creo que era 100x100, en mi caso creo que esta en 150x220, el codigo hace que el avatar se muestre a 125x125 y al poner el mouse encima cambia a un máximo de 250x190, es cosa de cambiar esos valores al gusto de cada uno