Hace 10-15 días Facebook hizo algunos cambios de diseño en sus páginas, personalmente no me gustaban nada, pero eran soportables. Los que me dañaban las retinas de verdad eran los cambios que hizo Twitter con la cabecera de su página y con la que consiguió una nueva definición gráfica del triste «feo-de-cojones«.
Muchos usuarios de Firefox y GoogleChrome (en cualquier plataforma) ya sabrán que tienen fácil proteger su integridad artística de los desaguisados de los diseñadores web con multitud de extensiones y herramientas que permiten «customizar» los sitios web que visitamos para verlos tal como nos gustaría: fuentes más grandes, fondos de colores no aberrantes, banners que distraen la lectura, frames con información molesta o irrelevantes y publicidades varias.

Lo que muchos de estos usuarios no sabrán es que no hace falta instalar nada para poder personalizar el contenido mostrado en las páginas que visitamos habitualmente, basta con ser usuario de Firefox ó Google Chrome y tener unos conocimientos básicos de CSS.

En ambos navegadores y cualquiera de los sistemas operativos habituales (Windows, Mac y Linux) el funcionamiento es idéntico: al iniciar el navegador se lee el contenido CSS de un archivo que es aplicado a todas la páginas cargadas a continuación. Por lo tanto para evitar alterar otras páginas diferentes a las deseadas nuestras reglas deberían lo más concretas posibles, evitando reglas CSS genéricas como body {background: red;}.

Los archivos

Los archivos que tenéis que modificar son (aproximadamente):
En Linux
Firefox
/home/tu-usuario/.mozilla/firefox/XXXXXXX.default/chrome/userContent.css
GoogleChrome
/home/tu-usuario/.config/google-chrome/Default/User StyleSheets/Custom.css

En Windows
Firefox
%USERPROFILE%\Application Data\Mozilla\Firefox\Profiles\XXXXX.default
GoogleChrome
%USERPROFILE%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

En MAC ignoro la ruta, pero imagino que será muy parecida a Linux.

En dichos archivos podéis escribir reglas CSS que se aplicarán a los sitios por los que navegáis modificando el contenido mostrado.

Puesto que son archivos que se cargan al iniciarse el navegador es necesario restaurar este para aplicar los cambios que hagamos.

Ejemplos de uso

Para cambiar la horrorosa cabecera blanca de Twitter por una negra .global-nav-inner {background-color:#333 !important;}
#global-actions li a {color:#fff !important;}
.dropdown-menu a {color:#333 !important;}


Eliminar la tercera columna de Facebook en la que se muestra habitualmente publicidad, encuestas y chorradas varias (mira la primera imagen).#globalContainer {width:720px !important; padding:0px !important;}
#rightCol,#navFindFriends {display:none !important;}
.5r69 {width:100% !important;}