User styles. Cómo cambiar la vista de una página desde los navegadores

Publicado: diciembre 19, 2009 en Arora, Chromium, Complementos, Firefox, Flock, Google Chrome, Midori, navegadores, Opera, Seamonkey
Etiquetas: , , , , , ,

Si eres de los que te aburre el aspecto de una página web y quieres darle otro aspecto del que viene de serie, la web Userstyles.org nos ofrece una amplia gama de estilos, que gracias a pequeñas porciones de código nos hacen ver esas páginas de forma diferente y cómo nosotros deseamos ver. Dependiendo del navegador podemos agregar y gestionar estos scripts. Aquí tenéis un ejemplo del cambio hecho en la página de Youtube.

Google Chrome – Chromium.

Los scripts se añaden dentro de la carpeta de extensiones, al igual que los scripts de usuario, gestionandose desde el menú de la llave–> Extensiones.

Visitamos la web Userstyles.org, donde tenemos miles de scripts listos para agregar, divididos por categorías “Más descargados“, “Nuevos scripts” y “Últimos actualizados“. Seleccionamos el script que más nos guste haciendo clic sobre el enlace, inmediatamente el enlace nos lleva hacia la página del script. Ya solo nos queda la instalación en tres sencillos pasos, hacemos clic en los botones “Install as user script”–> Continuar–> Instalar, y ya tendremos listo el script, con lo que podemos ver la página elegida con la correspondiente modificación.

Instalación de un script para modificar el aspecto de una página en Google Chrome - Chromium

Para los que no dispongan de la versión 4.0.x pueden recurrir a la extensión Greasemetal (válida sólo para Windows) para incluir estos scripts.

Mozilla Firefox y Seamonkey.

En estos navegadores podemos agregar los user scipts de varias formas, desde extensiones que gestionan los scripts de forma fácil e intuitiva como con Greasemonkey o Stylish, o añadiendo los scripts a la carpeta UserContent. Así pues describiré como acometer el añadido de scripts con cualquiera de las tres opciones que se nos ofrece.

· Greasemonkey.

Añadimos  la extensión desde el sitio oficial de AMO (Addons Mozilla .org)–> Permitir–> Reiniciar Firefox.

Con Greasemonkey instalado nos dirigimos a la web de Userstyles.org. Seleccionamos de la lista el script que queramos tener, o bien usamos el buscador para hallar el que nos interese por si estuviera en la lista, o bien ver los que hay disponibles para alguna o algunas páginas en concreto.

Seleccionamos “Install a user script” y seguimos los pasos.

Añadir scripts de userstyles y ventana de administración de scripts en Greasemonkey

Desde el icono que nos aparecerá en la barra de estado del navegador podemos acceder tanto a activar o desativar los scripts, como para gestionarlos.

En la ruta del perfil del navegador y dentro de la carpeta  ~/chrome se nos creará el archivo brief-custom-style.css.

· UserContent.css

Si la carpeta UserChrome contiene scripts para modificar el aspecto del navegador, UserContent alberga los scripts para modificar el aspecto de las páginas web. Así pues crearemos la carpeta dentro del perfil para guardarlos. Abrimos la terminal.

En Fedora (y la mayoría de distribuciones como vienen de serie). Cambiad lo que viene entre corchetes por el nombre que figure en vuestro sistema.

cd /home/[usuario]/.mozilla/firefox/[nombre_aleatorio_de archivo]/chrome/
mv userContent-example.css userContent.css

Ahora no nos queda más que añadir bloques con el código del script, así que toca visitar la página Userstyles.org, elegimos un script, accedemos al código pulsando el botón “show code”,  justo debajo aparecerá el código, el cual seleccionamos, copiamos y pegamos el script dentro de la carpeta recien creada userContent, dejando un espacio entre los posibles scripts que vayamos añadiendo.

· Stylish

De todas las opciones para los navegadores es la más específica, de mejor gestión y ejecución de estos scripts.

Instalamos la extensión Stylish.

Nos dirigimos a la web userstyles.org, elegimos el estilo de usuario, pulsamos el botón “Install with Stylish”, nos aparecerá una ventana de diálogo–> Aceptar.

Para gestionar los estilos de usuario nos dirigiremos al menú Herramientas–> Complementos–> pestaña “Estilos de Usuario”.

Esta extensión instala un icono en la barra de estado, con el que nos avisará de si tenemos un script que le afecte a la página activa.

Ventana de gestión de estilos de usuario y ejemplo de userstyle para Youtube.com

Flock

Al igual que Firefox debemos renombrar la carpeta userContent-example.css por userContent.css. Para lo cual abrimos la terminal y ponemos las siguientes líneas:

cd /home/usuario/.flock/browser/nombre_aleatorio_de_archivo/chrome/
mv userContent-example.css userContent.css

Ahora nos dirigimos a la página que contenga el “user style”, hacemos clic en el botón “Show code” y pegamos el código en la carpeta recién creada userContent.css dejando un espacio entre el último script.

Opera.

Descargamos el archivo que nosotros seleccionemos de la web Userstyles. Para ello buscaremos un script, una vez en la página del script, seleccionaremos en el desplegable “Opera” y se nos ofrecerá tanto la opción de descargar el archivo user.js, como el usercss. Hacemos clic sobre el correspondiente botón, nos dirigirá hacia una página con el código–> clic derecho–> Guardar como… Abrimos las opciones de Opera desde el menú Herramientas–> Avanzado–> Contenidos–> botón Opciones Javascript…–> en el campo de “Archivos javascrip de usuario” ponemos la ruta hacia dónde esté el archivo AdSweep.js.

Midori

Para añadir los users styles a Midori, primero abrimos la terminal y nos dirigimos a la siguiente carpeta (sustituir “noctuido” por vuestro nombre de usuario en la ruta marcada).

cd /home/noctuido/.local/share/

Creamos la carpeta midori:

mkdir midori

Entramos en ella:

cd midori

Dentro de esta creamos la carpeta styles.

mkdir styles

Ahora como dije antes elegimos en el desplegable Opera (al igual que viene en la captura–> Clic “Install as user.js”, posicionamos el puntero del ratón sobre el código–> clic derecho–> Guardar como, una vez descargado lo copiamos a la recien creada carpeta styles. Desde el navegador Midori podemos ver la implementación del user styles desde el menú Herramienas–> Scripts de usuario.

Arora.

Visitamos la web userstyles.org seleccionamos el script adaptado a los sitios que nos interese ver de forma distinta, una vez en la página del script seleccionamos Opera como navegador, elegimos “Install a plain css” y lo guardamos.

Abrimos el navegador Arora,  seguimos la  ruta en su menú Editar–> Preferencias…–> Pestaña “Avanzado”–> En el campo “Hoja de estilos” ponemos la ruta en dónde descargamos el nombre_del_archivo.css.

Los user styles son muy interesantes ya que nos proporcionan mayor diversidad de coloración y formas, mejorando y personalizando el aspecto visual que queramos darle a determinadas páginas web.

About these ads
Comentarios
  1. [...] recuerdo que tanto los estilos de usuario, los scripts de usuario, los temas y las extensiones se gestionan desde el menú de la [...]

  2. Noctuido dice:

    […] User styles. Cómo cambiar la vista de una página desde los navegadores […]

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s