Stylish, Limpiar y personalizar tu área de trabajo



Stylish es una excelente extensión para Mozilla Firefox y Google Chrome que te permite dar
estilos a cualquier sitio web, es decir, personalizarlo y limpiarlo a tu gusto.

¿Cómo funciona?

Stylish funciona con CSS, y al ser una extensión, funciona en los navegadores modernos,
con lo que tenemos acceso a todas las ventajas de CSS 3. Con Stylish creas hojas de estilo locales,
que te permiten modificar cualquier elemento de un sitio web.
Ejemplos de uso: borrar secciones que nunca se usan, eliminar publicidad, resaltar elementos
importantes, cambiar el ancho de una columna, cambiar la paleta de colores y en general
cualquier otra cosa dentro de las capacidades de CSS.

Paso a paso

1. Descarga e instala Sylish: Firefox | Chrome 
Reinicia tu navegador.
2. Ahora en el menú del navegador:
Firefox: Herramientas → Complementos → Estilos de usuario → Escribir un nuevo estilo.
Chrome: Opciones → Extensiones → Stylish → Opciones → Add new style.
Tendrás el botón para crear un nuevo estilo.
stylish-nuevo-estilo
3. En esta nueva ventana se agrega el nombre del estilo, etiquetas y el campo de escritura,
en este último irán todas las instrucciones CSS.
stylish-panel-estilo
Seguro no se aplicaran estilos a todas la páginas que se visitan, por tanto, es importante definir
dos tipos de estilo: generales y específicas a un dominio.
Estilos generales
Los estilos generales se aplican a todas las páginas que se visiten. Por ejemplo, la siguiente instrucción:
#ads {display:none;}
Borraría todos los elementos con id igual a "ads". Es poco recomendado pues en diferentes páginas un id
podría tener funciones distintas y por lo tanto, estar eliminando posibles elementos útiles.
Estilos específicos por dominio
Para evitar afectar a todas las páginas por las que navegamos, se pueden crear estilos específicos a un
dominio, la construcción del css puede ser como sigue:
@-moz-document url-prefix(http://www.sitio.com) {   /* Estilos que solo afectaran
al dominio www.sitio.com */   }
Es conveniente dar un vistazo a la documentación de stylish y a los selectores CSS 3 para sacar
mayor provecho a esta extensión.

Ejemplos prácticos

Para hacer evidentes las ventajas de esta extensión, dejo a continuación algunos ejemplos para limpiar
un poco la interfaz de Gmail, Twitter y Google Analytics, con explicaciones.
GMail
@-moz-document url-prefix(https://mail.google.com) {  .nH div.ps {display:none;} 
/* Borra los gagets en barra lateral. Por ejemplo, la de invitar a un amigo o el 
chat */ .k .diLZtc .nH .nH .mq {display:none;} /* Borra la barra de anuncios 
superior */ .ov .nH .mn {display:none;} /* Borra los "consejos" de uso de gmail 
en el footer */  }
Twitter
@-moz-document url-prefix(http://twitter.com) {  p.promotion {display:none;} /* 
Borra la apps recomendadas en la barra lateral */ .status-body .meta span:nth-
child(2) {display:none;} /* Borra la aplicación desde donde se escribió cada 
tweet */ #footer {display:none;} /* Borra el footer */ #home .u-username 
{display:none;} /* Borra todos los tweets de un usuario "username" */ #home 
.share {display:none;} /* Borra todos los retweets automáticos de tu timeline 
*/  }
Analytics
@-moz-document url-prefix(https://www.google.com/analytics) {  /* Limpia la 
interfaz de inicio de google analytics */ td.property_row, #footer, 
#CommonQuestions-ROOT, #ProductRecommendation-ROOT, ul.admin_lefthandside 
{display:none;}  }
También se puede consultar una biblioteca de estilos para muchos sitios en:

Notas

Los estilos CSS no evitan que los elementos se carguen en la página, por lo tanto, no tienen ninguna ventaja respecto a la carga de la página; simplemente oculta elementos a nuestra vista. Si existe la opción de eliminar elementos desde el panel de una aplicación, esta será una mejor opción.
En estos momentos, la extensión de Firefox es más práctica que la de Chrome.

Conclusión

Stylish se ha vuelto una extensión necesaria en mi navegador, pues me permite limpiar mi área de trabajo y ocio en muchas aplicaciones web. Una interfaz limpia, quita muchos distractores.

No hay comentarios:

Publicar un comentario en la entrada