Escribe esto en un nuevo estilo:

#333 lo cambias por el color que prefieras.
Puedes cambiar el color del texto añadiendo esto: color: white !important;

Y obtienes esto:

Lo intenté con los replies, pero twitter no tiene una clase especial en esos tweets que los distinga de los demás (como si pasa con los tweets que escribe uno mismo).

• Tweet propio:
  <li class="hentry u-Bleend mine status" id="status_xxx">
• Tweet de alguien (en este caso Pley):
  <li class="hentry u-Pley status" id="status_xxx">

Ambos son “hentry“, “status“, cada uno tiene el autor propio como clase “u-Bleend” o “u-Pley“, pero solo el propio teine el “mine“.

Entradas Relacionadas:

1. Windows Live Hotmail rediseñado con Stylish (CleanUp)
2. Tip en Fireworks para resaltar elementos o partes de una imagen
3. Estilo CSS azulado para Google Reader con Stylish

De todas las propuestas presentadas hasta ahora, creo que la que más lo ha conseguido es esta. Creo que el tío lo ha logrado. Claro que tampoco hay mucha competencia…

Entradas Relacionadas:

1. Análisis constructivo de Love4Clab
2. Las propuestas de Mariano Rajoy para crear empleo vs las propuestas de Julio Anguita
3. Dirección para ver Cristalab EyeCandy~ en línea

*New* Google Reader (12/05/08) Tweaks

Ala, a disfrutar.

Entradas Relacionadas:

1. El nuevo componente de Google Reader
2. Google Notepad: Tu Bloc de Notas online
3. Configurar Twitter para Google talk

Primero escogemos una imagen en la que haya una parte que nos interesa resaltar respecto a lo demás:

Yo escogí esta:

A continuación escogemos la herramienta de “Recuadro Oval (m)” (o Simplemente “Recuadro”, pero yo prefiero la primera):

Importante en propiedades seleccionar la opción de “suave” sino se verán los pixeles al cortar y queda muy feo:

Seleccionamos la parte de la imagen que queremos resaltar:

Y cortamos esa parte de la imagen (Ctr+X), así le tenemos en el porta-papeles:

Luego de eso, pegamos la imagen de nuevo en el sitio que estaba (Ctrl+V), parecerá que tenemos la imagen original, pero tendremos dos imágenes:

A continuación, seleccionamos la imagen mayor, que se supone es la que no es relevante y le aplicamos un filtro de relleno de color al 50% con el color negro:

Para aceptar, hacemos clic en cualquier lugar fuera del cuadro de propiedades, debería verse así:

Este es el resultado de aplicar el relleno:

Ahora para hacerlo más bonito, aplicaremos una sombra al contenido importante. Seleccionamos el mapa de Bits:

Y le aplicamos un filtro de sombra, usando los valores predeterminados:

Nos dejará cambiar cosillas de la sombra, pero para nosotros ya está bien, así que no tocamos nada.

Para aceptar, hacemos clic en cualquier lugar fuera del cuadro de propiedades.

El resultado final será este:

Opcionalmente podemos añadir algún texto o gráfico, en este caso les apliqué unas sombras para que hicieran juego:

Entradas Relacionadas:

1. Resaltar los tweets propios de twitter usando Stylish
2. Hacer un texto curvado con Firewokrs y trazados
3. Una imagen de SC, Kerrigan y un Hidralisco

Ejemplo de uso y sus características:

En este caso partimos de una imagen sencilla como es esta:

Luego dibujamos un trazado usando la herramienta Pluma (P). No importa el grosor, el color o el estilo de trazado, solamente el recorrido que este describe. Un trazado podría ser esta curva, por ejemplo:

A continuación insertamos el texto que destinaremos a que siga el trazado dibujado antes:

Bien, sencillo hasta aquí. Ahora es cuando viene lo esencial:
Seleccionamos al mismo tiempo el trazado y el texto:

Estando ambos seleccionados, nos dirigimos al menú “Texto” y hacemos clic en “Unir al trazado (Ctrl+Mayús+Y)”:

Inmediatamente se hace la magia y el texto se pone donde estaba el trazado, siguiendo su forma. Del mismo modo, el trazado original desparece. Digamos que es como en flash, una guía, y como tal no se ve. Este proceso, hace que el texto se posicione encima del trazado y siga sus curvas y recorrido. La gracia de todo esto, es que el susodicho texto se mantiene como texto editable, con todas sus propiedades modificables sin problema alguno. Y esto mola.

Procedamos a arreglar un poco la presentación, y así de paso les muestro algunas cosillas mas:
Observamos que ahora el texto se queda pequeño, puesto que está inclinado, ahora tiene más espacio. Lo hacemos mas grande cambiando el tamaño de la fuente en el panel Propiedades:

Para no concluir el tip aquí, haremos unos retoques de más para que veáis algunas opciones más y como afectan al texto en cuestión:

Por ejemplo, copiamos el texto y lo pegamos un poco más abajo, de la siguiente forma:

A continuación, teniendo seleccionado el segundo texto que acabamos de pegar, nos dirigimos al menú “Texto” y hacemos clic en la opción “Separar del trazado”:

Una vez esto, lo que sucede es que volvemos a tener el trazado y el texto originales:

Por ahora el texto no nos interesa, así que lo eliminamos. Vamos a centrarnos en el trazado: Lo retocamos un poco, le definimos un bonito estilo de linea y le damos un grosor apropiado mediante el panel propiedades:

Ya tenemos una sencilla y clara imagen:

De todas formas, veamos unas cuantas más opciones para poder estilizar el texto curvado de distintas formas. En el mismo menú de “Texto”, teniendo el texto curvado seleccionado, podemos variar su “Orientación” como sigue en las imágenes:
(La primera opción es la opción por defecto, es la mostrada en las imagen anterior)

Bueno, hasta aquí el tip. Solamente déjenme enseñarles otro ejemplo, quizás algo más artístico y sofisticado. A la izquierda pueden observar el resultado, mientras que a la derecha pueden ver los trazados originales de la imagen:

No es nada complicado, solo hace falta echarle un poco de imaginación y tener buen gusto!
Espero les sea de ayuda en sus diseños/presentaciones!

Entradas Relacionadas:

1. Texto científico: ¿Pueden pensar los ordenadores?
2. AutoStich: Programa para hacer fotos Panorámicas
3. Resaltar los tweets propios de twitter usando Stylish

Yo aún lo he mejorado más, o eso creo haber echo. Veamos como en unas imágenes:

Antes

Haz clic para ampliar

Después

Haz clic para ampliar

Cambios realizados:

• He eliminado la publicidad
• He eliminado la caja de “búsqueda en web”
• He eliminado botones inútiles en el menú izquierdo (“Hoy”,”Calendario”,…)
• Re-colocación del perfil de usuario encima del menú izquierdo
• Coloreado de bordes y fondo de los menús
• Bordeado el menú de acciones superior de los emails
• Ocultación de la palabra “HOTMAIL” en negrita y de tamaño enorme
• En general se gana mucho más espacio
• Eliminada la imagen de publicidad del antivirus Trend, al recibir y enviar mensajes.
• Re-diseñada la cabecera de los email (Datos de envio) para facilitar su lectura.
• Resaltados con una caja azul los archivos adjuntos.

Detalle:

Haz clic para ampliar

Todo este rediseño, se ha programado en CSS, para Stylish. Stylish es una extensión de Firefox que permite hacer esto en las paginas web, y cambiar su aspecto cuando las visitas. (Yo lo uso mucho, tengo personalizadas muchas páginas que visito regularmente. Entre otras cosas sirve para poder ocultar contenidos como publicidad ) Si quieres poder tener este aspecto en tu correo Hotmail tienes que usar Stylish y añadir ese código.

Nota: Esto no sirve para el Internet Explorer. Internet Explorer apesta.

Este es el código:

He de decir que no soy muy diestro en CSS, así que si el código no es muy limpio, pido mis disculpas; pero en mi defensa diré que funciona y estoy orgulloso de él.

Nota: Si alguien tiene algo que aportar, ideas, sugerencias o ha mejorado esta versión, agradecería que me lo dijeran

Licencia: Código bajo la Licencia Creative Commons “by-nc”.

Entradas Relacionadas:

1. Resaltar los tweets propios de twitter usando Stylish
2. Estilo CSS azulado para Google Reader con Stylish
3. Como importar tu cuenta hotmail a gmail usando POP3

Con motivo de su segundo aniversario, GarageFlash ha preparado unas conferencias con Expositores Internacionales de mucho renombre, que pintan bastante interesantes. Son totalmente gratuitas, pero desgraciadamente tienen acto en Lima, Perú.

Para los interesados, aquí hay un listado de los temas a tratar:

• Edición de objetos 3D en Photoshop CS4
  Luis Alarcon – Chile
• Aplicaciones Web 2.0 con Adobe Flex
  Edgar Parada – México
• Vista creativa con Adobe Pixel Bender Revolution
  Elder Vásquez (aka Eldervaz) – Perú
• De la idea al vector, diseño con Illustrator CS4
  M. Eugenia Ballesteros (aka MX) – Argentina
• Agencia interactiva for dummies
  Fernando Flórez – Perú
• The Flash Lite Redemption
  Raúl Jiménez (aka Elecash) – España
• Hazte rico con la usabilidad en la Web
  Freddie Vega (aka F) – Colombia

Realmente pintan muy suculentas, hay que aprovechar. Por si fuera poco, además de todo eso hay talleres que durarán 5 días, dictados por algunos expositores. Para asistir a la conferencia solo te tienes que registrar en la web del evento.

Felicidades a Garage Flash!, sigan así!

Entradas Relacionadas:

1. Conferencia de Adobe User Grup Perú
2. Anuncio de Adobe para los visitantes de su sitio web defraudados
3. Cristalab Peru 2007 :: Conferencias y Talleres

Este plugin nos permite mostrar imágenes o álbumes alojados en flickr en nuestro blog. Las imágenes son dispuestas en los posts con elegancia, en forma de imágenes pequeñas y rodeadas por un pequeño y estético borde azul. Al clicar en ellas, se activa el Lightbox, que nos permite ir adelante o atrás sin tener que salir de él.

Modo de uso

Hay básicamente dos formas de usar el plugin:

1. Directamente con una imagen:

<!-- flickrimage: 2879655006 -->

Donde el número ese es el correspondiente de la URL de la foto de flickr:
http://www.flickr.com/photos/bleend/2879655006/

2. Si queremos también podemos enlazar a un álbum (set) de fotos:

<!-- flickrset: 72157607434007233 -->

Donde el número ese es el correspondiente de la URL del set de flickr:
http://www.flickr.com/photos/bleend/sets/72157607434007233/

Personalización

Como extra, comentar que tienes tres tipos distintos de galería que puedes escoger en las opciones de configuración del plugin:

Un par de problemas

1. Un fallo que le veo al plugin, es que no puedes poner ambas opciones en el mismo post. Lo cual le hacer perder bastantes puntos.
2. Y el otro fallo, (de menor importancia, creo yo) es que la galería aparece siempre al final del post, independientemente de donde coloques el código.

Descarga

Descargar Crossroads (enlace directo) , de la página web oficial de Crosroads

Demo

Les pongo una galería de unas fotos que tengo yo de una ascensión que hicimos hace poco al Puigmal.

PD:Para cerrar el lightbox, hagan clic fuera de él en la parte inferior.

Entradas Relacionadas:

1. Añadir botones en el editor de WordPress
2. WordPress 2.7 trae un importante cambio en la interfaz administrativa y soporte para G.Gears
3. Mi batalla con WordPress y un Explioit de Spam

Como habrán notado, hay tema nuevo para el Blog. Bien, este fue el resultado de que estaba hasta las narices del tema anterior, ya que en realidad estaba pensado para WordPress 1. Estaba más parcheado que una cámara de bici después de pasar por un desierto de cactus.

No tenía ni widges ni tags, ni subcategorías, ni siquiera un ancho estándar.

Me vía obligado a redimensionar todas la imágenes manualmente a 470px de ancho para que en la portada no se salieran por los lados. Lo cual me jodía mucho porque flickr lo hace automáticamente, pero a 500px, con lo cual no me servía. Ahora ya sí.

He tardado mucho en cambiarlo por la sencilla razón de que me encantaba el que tenía y no encontraba un digno sustituto: Rin:

Encontré uno, el Experimental, pero no me gustaba para nada el sidebar; tenía problemas con las listas y las imágenes vinculadas. Y además dividía el header en dos para mostrar un cuadro de búsqueda.

Hoy me puse a buscar más candidatos. Encontré el tema Water, que era lo que buscaba pero con el diseño erróneo.

¿Que podía hacer? Pues agarré lo que me gustaba de cada uno de ellos y lo junté en un tema modificado a partir del Water. Obteniendo este resultado, que -debo añadir- me ha quedado mucho mejor de lo que cabía esperar. Estoy contento con él. Sí. Además tiene el Gravatar de serie.

Aún me faltan cosillas para implementar. Por ejemplo, los emoticonos en los comentarios, algunas cosillas del sidebar (lo que antes ponía blog stuff) y por último los bloques de adsense (aunque esto no es una prioridad, es públicamente sabido que este blog no da ni un céntimo de euro. Apenas paso de 10€ en todo el tiempo que llevo con él…).

Bueno, aprecio sus comentario, como siempre.

Stytlish a saco para Gmail, Redesigned 2.0

Entradas Relacionadas:

1. Gmail Labs, nuevas funcionalidades para Gmail
2. Como importar tu cuenta hotmail a gmail usando POP3
3. No voy a hablar acerca de los temas de Gmail