Atención que Google Buzz ha anunciado que han relanzado su LightBox que tantos dramas causó hace unos días pero, esta vez, han tenido la semi-prudencia de permitirnos deshabilitarlo; digo semi porque por defecto, está habilitado en todos los blogs.
Para modificar esa oción debe irse a Configuración | Formato, seleccionar NO en al casilla correspondiente y guardar:
Open images in Lightbox
If Yes is selected, when a reader clicks on an image in a post, it will be displayed in a slideshow-like overlay instead of leaving your page and navigating to the image.
Esta es una opción individual de cada blog y por lo tanto, si tenemos varios, hay que hacer lo mismo en cada uno de ellos.
¿Es posible automatizar el ancho de los videos para que se vean lo más grande posibles sin tener que usar jQuery como se mostraba en esta entrada?
Cuanto más automatizamos una tarea, más cuidado tenemos que tener para establecer límites precisos ya que los navegadores no son inteligentes, no tienen sentido común ni ninguna otra característica humana; simplemente hacen lo que nosotros les indicamos que hagan.
Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en particular y podrían diseñarse cientos de modelos gráficos pero digamos que lo más usual es que al abrirse, la pantalla se oscurece y sobre la página se muestra un elemento con cierto contenido que luego, podemos cerrar.
Pués si, CSSWarp es una locura. A alguien se le ocurrió crear un sitio donde uno escribe un texto, define ciertas opciones, juguetea con los parámetros y el resultado es un HTML con ese texto siguiendo la forma de la curva que hayamos usado.
Como usa propiedades CSS3, no funcionará en versiones de Internet Explorer inferiores a la 9 pero no importa; sigue siendo increible.
Quien quiera usarlo en su propia web, lo que debe hacer es generar el texto y obtener el código. De este, sólo debe copiarse desde <style type='text/css'> hasta </style> y desde <div id='warped'> hasta </div>. Y por supuesto, si se desea, pueden hacerse ajustes editando las reglas de estilo.
JugandoconCSS3:Laslocurasquesevenenlaweb.
Quienes no posean un navegador que interprete CSS3, pueden ver el resultado haciendo click en esta imagen o este video explicativo.
Usar posiciones absolutas para ubicar un elemento de manera precisa en una página web es uno de los métodos más cómodos porque requiere propiedades que cualquier navegador entiende y nos evita agregar márgenes, paddings y flotaciones que siempre perturban ya que afectan al resto de las etiquetas.
Es sencillo, basta agregarle a ese elemento la propiedad position:absolute y luego, establecer los valores de top, right, bottom y/o left teniendo en cuenta que:
top:0; left:0; es el ángulo superior izquierdo top:0; right:0; es el ángulo superior derecho bottom:0; left:0; es el ángulo inferior izquierdo bottom:0; right:0; es el ángulo inferior derecho
o sea, los cuatro extremos de ... ¿qué? Esa es la clave; tener la respuesta es lo que evita los problemas.
Las posiciones absolutas no son absolutas en abstracto, lo son, con respecto a algo: a un contenedor. Toda etiqueta está dentro de un contenedor, es decir, dentro de otra etiqueta; por ejemplo, esta imagen está dentro de una etiqueta DIV (su contenedor) que a su vez, está dentro de un DIV que es el contenedor de ambas, que está dentro de otro DIV que es el contenedor de las tres . Yendo "hacia atrás" o "hacia arriba" el contenedor padre sería el mismo BODY:
Eso no depende de las propiedades de la imagen sino de las propiedades de su contenedor ya que es este el que define cuáles son los "límites" del rectángulo, cuáles son las coordenadas 0:0 y lo elemental es que definamos eso agregándole a ese contenedor, la propiedad position:relative.
Si el primer DIV tiene esa propiedad, se verá así:
position:relative
Y si el segundo DIV tiene esa propiedad, se verá así:
position:relative
Y si el tercer DIV tiene esa propiedad, se verá así:
position:relative
Los valores de top, right, bottom y left también pueden ser negativos y eso, hará que el elemento se "salga" de su contenedor:
El avatar de los comentarios es algo sobre lo que siempre hay preguntas ¿cómo moverrlo? ¿cómo separarlo del nombre del autor? ¿cómo alinear ese nombre verticalmente?
El problema básico es que para mostrar los comentarios, Blogger utiliza etiquetas que usualmente no usamos (DL DT DD) y además, establece una serie de propiedades por defecto para cada una de ellas y sus contenidos. Ese codigo, lo podemos ver si expandimos la plantilla y buscamos el includable llamado comments; allí dentro, nos encontraremos con muchas cosas pero, si vamos hacia abajo, veremos los tres sectores en que están divididos; esto, es similar en cualquier plantilla, sea normal o de nuevo estilo:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
.......
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
....... el avatar y el nombre del autor .......
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
....... el texto del comentario .......
<dd class='comment-footer'>
....... la fecha del comentario y los íconos de edición .......
</dd>
.......
</dl>
Y estas son las propiedades por defecto que añade Blogger:
Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.
Para poder personalizarlo, una alternativa simple es sobrescribir algunas de esas reglas de estilo por defecto que son las que hacen que se vea como si tuviera dos columnas, una a la izquierda con el avatar y otra a la derecha con el resto. Por ejemplo, podemos agregar esto:
Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.
Ahora, debemos entender qué dice el código y porqué debemos seguir agregando cosas para posicionar el texto del autor. Esa parte es la que está en la etiqueta DT:
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<!-- por defecto, la imagen será un icóno que dependerá de la forma del ingreso (Blogger, OpenId, Anónimo) -->
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<!-- sólo se muestra el avatares si están habilitados -->
<b:if cond='data:blog.enabledCommentProfileImages'>
<!-- esta es la imagen del avatar -->
<!-- Blogger agregará un DIV con la clase avatar-image-container -->
<data:comment.authorAvatarImage/>
</b:if>
<!-- dependiendo del acceso, el nombre es un enlace o no -->
<b:if cond='data:comment.authorUrl'>
<!-- el nombre es un enlace -->
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<!-- el nombre no es un enlace -->
<data:comment.author/>
</b:if>
<!-- el texto que sigue al nombre (dijo ...) -->
<data:commentPostedByMsg/>
</dt>
Para centrar el texto verticalmente, podemos establecer las propiedades de DT, dándole a height y a line-height, la misma altura que la imagen (en este caso 35 pixeles más dos porque tiene un borde):
Si además, queremos que ese texto del autor se separe o agregarle alguna clase de personalización, dado que este y la imagen misma pueden ser enlaces, lo mejor es que los diferenciemos nosotros, envolviendo el nombre en algún SPAN que podamos identificar:
Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
Quienes no posean un navegador que interprete CSS3, pueden ver el resultado haciendo 
Nullam sed vulputate diam. Suspendisse cursus ligula non ligula euismod adipiscing. In id erat nec elit bibendum adipiscing? Nullam vel mi quis est hendrerit convallis? Etiam feugiat sodales malesuada. Aenean non ipsum leo.