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 desea que se convierta en cuadrados cuando se pase el cursor del ratón sobre ellos añadir este código
Si queres quitar la animación deben quitar este código
Si desean agregar algún color al circulo/cuadrado agregar esto
Cambiar el código *COLOR HERE* por algún color hexadecimal
![[Imagen: uWxlXIh.png]](http://i.imgur.com/uWxlXIh.png)
![[Imagen: 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:
Código:
.post .post_author div.author_avatar img {
border-radius: 55%;
transition:all 0.3s ease;
}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
Código:
transition:all 0.3s ease;Si desean agregar algún color al circulo/cuadrado agregar esto
Código:
background: *COLOR HERE*;
Última modificación: 5 Feb, 2015, 6:00 am por ktemanuel.
@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 escribió:Es recomendable hacerlo en el global.css.
Código:
.cssSaludos.
- Temas personalizados (HTML5, flat, responsive, SEO Friendly, etc)
- Plugins y sistemas personalizados (Galería de imagenes, Bolsa de Trabajo, etc)
(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
Código PHP:
<?php
.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
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