Cómo corregir pequeñas molestias en la web con estilo [firefox y chrome]

Los diseñadores Web tienen un trabajo casi imposible. Que necesitan para llegar a un diseño que agrada a todos. Cuando se habla de un servicio como Gmail, utilizado por millones y millones de personas en todo el mundo, que realmente puede dejar la parte de “casi” - es simplemente imposible. Incluso si un nuevo diseño es muy apreciado por la mayoría de la gente, siempre habrá usuarios que realmente no me gusta la nueva imagen.

A veces hay un número suficiente de estos usuarios para obligar a una empresa a dar marcha atrás, como Google recientemente hizo con los botones de icono de Gmail. Pero lo que si hay algo que De Verdad odio, y la empresa no cambia de nuevo? ¿Está atrapado con ella para siempre? Gracias a los estilos de usuario, se puede solucionar este tipo de problemas por sí mismo.

La introducción de estilo

Estilo es un complemento gratuito disponible tanto para Firefox y Chrome, y se le permite hacer algo bastante mágico - aplicar sus propios estilos a elementos de página web. Incluso si no eres un desarrollador web y que nunca ha escrito un poco de CSS en su vida, esto es mucho más fácil de lo que parece. Se puede utilizar con estilo para transformar por completo los sitios web (como voy a mostrar en la siguiente sección), pero aún más importante, se puede utilizar con estilo para arreglar pequeñas molestias en cuestión de minutos.

Por ejemplo, tuve un problema con el tamaño de la fuente por defecto en Gmail. La interfaz estaba bien - que no quería para hacer un zoom (Ctrl +) con mi navegador, ya que aumentaría el tamaño de todos los elementos de la interfaz y ser muy feo. Sólo quería una manera de hacer que la fuente mensaje un poco más grande.

Con estilo, fue muy simple, y te voy a mostrar cómo. Pero antes nos fijamos en crear sus propios estilos de usuario, vamos a hablar de aprovechar el trabajo de otras personas.

Vídeo: Como Descargar Videos De Cualquier Página Web Con mozilla firefox

UserStyles.org

Si algo está recibiendo en sus nervios, es muy posible que no están solos. UserStyles.org es un sitio web que permite a los usuarios compartir estilos que han creado. Anterior se puede ver un estilo (Añadir etiquetas a los iconos de la barra) recomendados por MakeUseOf comentarista RandyN en respuesta a nuestra historia sobre el botones de icono de Gmail. Este estilo le permite mantener los iconos, pero agrega en las etiquetas de texto - algo que Google no le permitirá hacerlo.

UserStyles.org es grande, pero no es perfecto. Algunos de los diseños tratan de hacer demasiado (cambiar la apariencia de un sitio web en su totalidad), y algunos son para las versiones antiguas de sitios web y ahora están rotos. Si usted está tratando de arreglar algo pequeño y no puede encontrarlo en UserStyles.org, tal vez su mejor curso de acción es hacerlo por su cuenta.

Creación de su propio estilo de usuario simple

Para crear su propio estilo de usuario, primero tiene que saber qué elemento de la página que se está tratando de cambiar, y luego lo cambio que usted quiere hacer. Así que, para empezar, haga clic en lo que sea que desee cambiar, y recoger Inspeccionar elemento. Debería ver algo como esto:

Firefox se oscurece el resto de la página, y dibuja un marco muy claro en torno al elemento que ha seleccionado. Por encima de ese elemento, el texto que dice div # 2d6.ii.gt.adP.adO, es un montón de clases CSS, junto con un ID (la parte que comienza con #). Este es el selector que afecta el estilo de este elemento. A lo largo de la parte inferior de la pantalla hay una barra de navegación que le permite “recorrer el árbol DOM“, O en palabras más simples, ir hacia arriba y hacia abajo en la jerarquía de los elementos que conducen al elemento que haya elegido.

El nombre del juego aquí es escoger el elemento que desea estilo, y hacer la selección no tan estrecho que no afectará a todo lo que se desea afectar, ni tan amplia que sería estropear otras cosas.

He hecho clic en un elemento superior, div.gs, sólo porque me gusta su nombre (que parece ser algo que no va a cambiar demasiado pronto, pero eso es una conjetura completa de mi parte). Afecta a toda el área de mensajes. Una vez que se selecciona el área que desea el estilo, haga clic en el Estilo botón en la esquina inferior derecha, para abrir el Reglas cristal:

Yo sé, es complicado en principio. Pero esto es donde se ven las diferentes reglas CSS que afectan el elemento que ha seleccionado, y aquí es donde usted puede hacer sus propias modificaciones temporales y ver su impacto en la página en tiempo real, sin necesidad de recargar la misma. Pero, ¿qué debe cambiar? Haga clic en el propiedades botón y desmarque “Solamente los estilos de usuario“:

Vídeo: convertir una web en pdf con mozilla firefox

Aquí se puede ver una lista completa de todas reglas CSS. Puede desplazarse por la lista hasta que encuentre una regla que tenga sentido para lo que necesita (font-size en nuestro caso), e incluso haga clic en el signo de interrogación junto a él para abrir una página de explicación. Por lo tanto, ahora sabemos que queremos modificar la propiedad font-size para todos los elementos div que tienen una clase de “gs”(Escrita en forma abreviada como div.gs).

La única pregunta que queda es lo que queremos que sea su valor. Por eso, volvemos al panel Reglas y empezar a jugar:

Vídeo: Como cambiar de tema Google Chrome y Firefox - PacoTUTOS

40 píxeles pueden ser un poco loco, pero usted consigue la idea general. Juega un poco con esto, y no dude en añadir cualquier otra propiedad, hasta obtener el aspecto que se va para. Asegúrese de no cerrar la página, ya que sus cambios son no guardado en cualquier lugar.

Guardando su nuevo estilo

Vídeo: Instalar Extencion en Chrome y Firefox

Una vez que tenga esta parte del sitio para mirar al igual que lo quieres, es el momento de guardarlo. Haga clic en el Elegante icono en la barra de complemento, y seleccione “Escribir nuevo estilo”. Estilo sería entonces quieren saber sobre las páginas que se debe aplicar el nuevo estilo - en nuestro caso, elige la segunda opción, “mail.google.com”. A continuación, verá este cuadro de diálogo:

Ya he llenado sucesivamente. Obviamente, cogí un nombre y algunas etiquetas para el estilo. Pero las cosas reales que sucede dentro del código: Línea 3 ya estaba allí - con estilo lo puso en su lugar para que sepa sobre las páginas que se aplica el estilo. Pero la línea 5-7 son la mía. Vamos a analizar ellas:

Línea 5: div.gs { - esta parte se debe reconocer. Este es el elemento que hemos decidido estilo. La llave de apertura significa que ahora vamos a escribir algunas reglas CSS.

Línea 6: font-size: 20px importante- - Esa es la regla deseamos cambiar (font-size), seguido de su nueva definición (20 píxeles), y después de una declaración, lo que significa que Firefox podría obedecer a esta regla, incluso si un elemento “más cercano” a la “importante!” el texto intenta establecer el tamaño de la fuente a algo diferente.

Línea 7:} - cerrar la definición de estilo.

A continuación, haga clic en Vista y maravilla en su trabajo:

Y, por último, una vez que vea que está funcionando, haga clic Salvar.

Esto no es una guía completa

Soy muy consciente de que para mantener este breve tutorial dentro de los límites de un solo puesto, he tenido que hacer una serie de saltos y saltos. Si estaba confundido en el camino, por favor, acepte mis disculpas. CSS es difícil al principio, pero no es tan complicado una vez que la caída de ella - y la personalización de sitios web a nivel local sigue una de las mejores maneras de aprender.

Si estaba confundido por algo, por favor me pregunta a continuación y haré todo lo posible para ayudarle.