Página 1 de 1
USER_AVATAR sin tamaño
Publicado: 28 Ene 2011, 16:51
por javiexin
Hola,
Tengo un pequeño problema de diseño.
Me gustaría permitir avatares relativamente grandes a los usuarios, que se utilicen en su página de perfil. Sin embargo, esos mismos avatares son excesivamente grandes en los mini-perfiles de las páginas de mensajes (viewtopic).
El problema está en que la variable {postprofile.USER_AVATAR} ya incluye atributos width y height, con lo que incluso aunque ponga max-width y max-height en el CSS correspondiente, no funcionan (no tienen precedencia sobre width y height).
Lo que tengo hecho es una chapuza: al finalizar la carga de la página, ejecuto un JS que cambia el tamaño de los avatares. Funciona, pero me gustaría, si fuera posible, utilizar CSS en lugar de JS para cambiar esto (no me gusta esperar hasta la finalización de la carga de página para que se redimensionen los avatares).
Alguna idea? Muchas gracias de antemano,
-javiexin
USER_AVATAR sin tamaño
Publicado: 28 Ene 2011, 17:07
por leviatan21
javiexin escribió:El problema está en que la variable {postprofile.USER_AVATAR} ya incluye atributos width y height, con lo que incluso aunque ponga max-width y max-height en el CSS correspondiente, no funcionan (no tienen precedencia sobre width y height).
Debería funcionar, comenta como lo hiciste, porque desgraciadamente los avatares no tienen in ID o clase de css definidos, por lo que había que hacer ciertos cambios en la plantilla para lurgo utilizar esa clase en las hojas de estilo :
Yo me lo imagino así :
en la plantilla
viewtopic_body.html cambiando :
Código: Seleccionar todo
<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF -->
por :
Código: Seleccionar todo
<!-- IF postrow.U_POST_AUTHOR --><span class="user-avatar"><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}</span><!-- ENDIF -->
Luego en alguna de las hojas de estilo, ( puede ser stylesheet.css ) agregar :
USER_AVATAR sin tamaño
Publicado: 28 Ene 2011, 17:09
por viktor
Lo que yo no entiendo es porque tienes que recurrir a javascript para modificar tamaños de esa manera.
Es muy simple, (sin mirar el código css del estilo te digo que...) crees un par de clases (o identificadores) para los avatares, una clase para el viewtopic y otra para el perfil, llámalos como tu quieras. Le pones tamaños diferentes a cada uno con sus correspondientes máximos y mínimo, también cualquier efecto raro que quieras ponerle a los bordes de los mismos, ec.
Luego cambias los nombres de las clases (o los identificadores) en el vietopic o en el profile, o en el archivo que mas te guste, donde van los avatares.
De paso, ya que estas, chequea bien que esas etiquetas no estén englobadas por algún otro div o tabla que te fuerce el tamaño o te lo limita (ese es generalmente el error).
Normalmente, cuando tienes este tipo de problemas debes estudiar el template que estés usando bien a fondo, porque cuanto mas complejo, mas complicado es hacer un cambio tan simple.
Edito: Arf... ahí esta leviatan ganándome de mano,...
USER_AVATAR sin tamaño
Publicado: 29 Ene 2011, 00:57
por javiexin
leviatan21 escribió:Yo me lo imagino así :
en la plantilla
viewtopic_body.html cambiando :
Código: Seleccionar todo
<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF -->
por :
Código: Seleccionar todo
<!-- IF postrow.U_POST_AUTHOR --><span class="user-avatar"><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}</span><!-- ENDIF -->
Luego en alguna de las hojas de estilo, ( puede ser stylesheet.css ) agregar :
Muy parecido es lo que yo he intentado:
He sustituido lo mismo que tú indicas por:
Código: Seleccionar todo
<div class="avatar" id="avatar{postrow.POST_ID}" name="avatar" style="position: relative;"><!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --></div>
O sea, he usado un div en vez de un span.
El CSS que he usado es el mismo que has puesto, tanto como CSS como dentro del style. Pero esto no vale, porque el <img> del avatar es más grande que el div o el span, y los max-* no tienen efecto (creo yo). Desde luego, a mi no me ha funcionado.
Es decir, que para que tenga el efecto correcto tengo que cambiar los atributos width y height del tag img del avatar, yo no he visto otro modo. He probado con firebug a cambiar múltiples cosas, cambiar div por span, meter max-* en el img, span y div... nada me ha funcionado. Sólo he conseguido que funcione cambiando directamente los atributos width y height, y eso sólo lo he podido hacer con JS.
Muy agradecido por vuestra ayuda!
-javiexin
Re: USER_AVATAR sin tamaño
Publicado: 29 Ene 2011, 04:47
por leviatan21
Acabo de probarlo cambiando :
raíz/styles/prosilver/template/Viewtopic_body.html
Código: Seleccionar todo
<!-- IF postrow.POSTER_AVATAR -->
<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
<!-- ENDIF -->
Por :
Código: Seleccionar todo
<!-- IF postrow.POSTER_AVATAR -->
<span class="user-avatar"><!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --></span>
<!-- ENDIF -->
Y al final de
raíz/styles/prosilver/theme/stylesheet.css, agregando :
Luego de actualizar las plantillas y el tema del estilo prosilver me funciona de maravillas
USER_AVATAR sin tamaño
Publicado: 29 Ene 2011, 07:28
por viktor
Solo me gustaría agregar que max-with y max-height no funcionan en "cierto" navegador (a ver si adivinan en cual...
)
Así que si quieres que también te funcione en ese "bendito" navegador tienes que poner directamente height y with en un css aparte para IE, que se llama con un javascritp muy simple.
Eso o usar una tabla... a ese navegador a veces solo la "tabla" lo hace funcionar como debería.
USER_AVATAR sin tamaño
Publicado: 29 Ene 2011, 15:33
por javiexin
Muchas gracias!!!
Ya CASI está! Y por qué casi? Bueno, pues porque me deforma los avatares, no mantiene el ratio de aspecto. Es decir, siempre los deja "cuadrados" y no con la forma que tuvieran originalmente. He intentado poner sólo uno de los límites (vertical u horizontal), pero el resultado es todavía peor.
Se os ocurre algo?
-javiexin
PD: A mi, en "ese" navegador, también me hace lo mismo: redimensiona, pero deforma el aspecto.
Re: USER_AVATAR sin tamaño
Publicado: 29 Ene 2011, 15:47
por leviatan21
Así funcionan el
max-width y
max-height, deforman
Re: USER_AVATAR sin tamaño
Publicado: 29 Ene 2011, 17:06
por javiexin
leviatan21 escribió:Así funcionan el
max-width y
max-height, deforman
Si la imagen del avatar no tiene especificadas width y height, la redimensión es correcta. Pero si pones width y height en la imagen del avatar, entonces fuerza a cada dimensión independiente, y deforma.
Se os ocurre algo? Muchas gracias!
-javiexin