1.8 Agregar Efecto Circulo al Avatar
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:
Si queres quitar la animación deben quitar este código
Si desean agregar algún color al circulo/cuadrado agregar esto
![[Image: uWxlXIh.png]](http://i.imgur.com/uWxlXIh.png)
![[Image: qvJ9wyg.png]](http://i.imgur.com/qvJ9wyg.png)
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![[Image: uWxlXIh.png]](http://i.imgur.com/uWxlXIh.png)
![[Image: qvJ9wyg.png]](http://i.imgur.com/qvJ9wyg.png)
Pues a mi no me sirvió, lo intente también Editando global.css.
dime que nombre le pusiste al archivo creado
@Niil78 Hay que hacer un hard refresh (Ctrl+F5)
@ktemanuel Da igual el nombre del archivo. Es recomendable hacerlo en el global.css.
@ktemanuel Da igual el nombre del archivo. Es recomendable hacerlo en el global.css.
- Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
- Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)
Como siempre han sido las hojas de estilo externas desde que se crearon en el año 1996.
Saludos.
BitLiberal wrote: Es recomendable hacerlo en el global.css.
.css
Saludos.
- Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
- Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)
Hombre seguí la guía al pie de la letra, y hice refrest, e incluso probe con otros navegadores. nada
7 Feb, 2015, 4:12 pm Niil78 wrote:
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
![[Image: CCoBXgK.png]](http://i.imgur.com/CCoBXgK.png)
![[Image: TQqCgcO.png]](http://i.imgur.com/TQqCgcO.png)
muchas gracias @XEDE se ve muy bien, pero me queda una duda, a mi no se me hace tan grande como el tuyo ¿por que puede ser?
Gracias
Gracias
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
![[Image: CCoBXgK.png]](http://i.imgur.com/CCoBXgK.png)
![[Image: TQqCgcO.png]](http://i.imgur.com/TQqCgcO.png)
![[Image: CCoBXgK.png]](http://i.imgur.com/CCoBXgK.png)
![[Image: TQqCgcO.png]](http://i.imgur.com/TQqCgcO.png)