Posts Tagged ‘ CSS ’

3
12
Dec

Resaltar los tweets propios de twitter usando Stylish

Stylish es una extensión de Firefox que permite cambiar el aspecto aspecto de las pagina web cuando las visitas mediante el uso de CSS.

Escribe esto en un nuevo estilo:

Stylish

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("twitter.com") {
#home .mine{
background-color: #333 !important;
-moz-border-radius:10px;
}
}

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

Y obtienes esto:

twitter

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“.

2
4
Feb

Maquetando en CSS [Humor]

Maquetación CSS

0
27
Dec

Estilo CSS azulado para Google Reader con Stylish

Esto ya tiene unos días, pero creo que puede interesar. Para los que usen Google Reader para leer sus feeeds, se habrán dado cuenta que cambiaron hace relativamente poco su diseño. Generalmente me gustó el cambio, pero lo encontraba todo muy blanco, incluso molestaba a veces. Conociendo las grandes cualidades de Stytilish, pues enseguida busqué un estilo visual nuevo. Encontré este:

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

G.Reader con Stylish

Ala, a disfrutar.

4
16
Nov

Windows Live Hotmail rediseñado con Stylish (CleanUp)

Aunque uso Gmail, también tengo una cuenta de correo de Hotmail. Hoy vi que han sacado una versión del cliente web de correo mejor y más simplista. Es una mejora importante, carga mucho más rápido y es todo algo más accesible.

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

Antes

Haz clic para ampliar

Hotmail noRedesigned por Bleend, en Flickr

Después

Haz clic para ampliar

Hotmail Redesigned por Bleend, en Flickr

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

Hotmail Redesigned Detail por Bleend

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 :P ) 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:


@namespace url(http://www.w3.org/1999/xhtml);
/*
Descripción: Código de Rediseñado para la nueva versión de Hotmail
Autor: Pau de Anguera (Bleend)
URL: http://blog.bleend.net/windows-live-hotmail-redisenado-con-stylish-cleanup/
*/

@-moz-document domain("mail.live.com") {

.AdBannerContainer,.ProductNameContainer,.Bottom,#c_search,.AntiVirus,.ScanLogo{
display:none !important;
height:0px !important;
}
.EmailName{
text-align: center !important;
font-size: 0.9em !important;
}
#c_me{
z-index:100 !important;
position:absolute !important;
top:55px !important;
left:10px !important;
float:left !important;
height:50px !important;
width:180px !important;
background:#F3F7FD !important;
border:1px solid #BBD8FB !important;
}
#c_melink{
margin-top:6px !important;
float:right !important;
}
#c_is {
font-weight:bold !important;
}
#c_signout{
position:absolute !important;
margin-right:-33px !important;
margin-top: -3px !important;
}
#folderListContainer {
margin-top:5px !important;
}
#contentLeft {
width: 180px !important;
background:#F3F7FD !important;
margin-top:30px !important;
border:1px solid #BBD8FB !important;
}
#Middle{
left:10px !important;
}
#toolbarContainer{
border: 1px solid #A6D2FF !important;
border-bottom: none !important;
width:99.6% !important;
}
.NonThemedLinkContainer{
border: 1px solid #A6D2FF !important;
background:#F3F7FD !important;
}
.SenderSafetyMsg,.SenderSafetyLinks{
font-size:0.8em !important;
border-top-width: 1px !important;
border-right-width: 0px !important;
border-bottom-width: 1px !important;
border-left-width: 0px !important;
border-top-style: solid !important;
border-right-style: solid !important;
border-bottom-style: solid !important;
border-left-style: solid !important;
border-top-color: #CCC !important;
border-right-color: #CCC !important;
border-bottom-color: #CCC !important;
border-left-color: #CCC !important;
}
.SecondaryTextColor{
width:20% !important;
}
}


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 :wink:

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

5
11
Apr

Seminario de CSS + Dreamweaver online

Hoy vi fugazmente en twitter que One mencionaba que estaba viendo un seminario que hicieron de CSS a través de Adobe Connect.

El seminario fue impartido el Miércoles, por lo que está grabado y lo pueden ver cuando les plazca. La duración total es de 53 minutos.
Personalmente llevo más de la mitad, y para los novatos como yo en CSS, pues está bastante bien.