Home-theater-designers![Cómo solucionar pequeñas molestias en la Web con estilo [Firefox y Chrome]](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
Los diseñadores web tienen un trabajo casi imposible. Necesitan idear un diseño que complazca a todos. Cuando se habla de un servicio como Gmail, utilizado por innumerables millones de personas en todo el mundo, realmente puede dejar de lado la parte 'casi': es simplemente imposible. Incluso si un rediseño es del agrado de la mayoría de la gente, siempre habrá usuarios a los que realmente no les guste la nueva apariencia.
A veces, hay suficientes de estos usuarios para obligar a una empresa a dar marcha atrás, como lo hizo Google recientemente con los botones del icono de Gmail. Pero, ¿y si hay algo que De Verdad odio, y la empresa no lo cambia de nuevo? ¿Estás atrapado con eso para siempre? Gracias a los estilos de usuario, puede solucionar estos problemas usted mismo.
Presentamos con estilo
Stylish es un complemento gratuito disponible tanto para Firefox y Cromo y te permite hacer algo bastante mágico: aplicar tus propios estilos a los elementos de la página web. Incluso si no eres un desarrollador web y nunca has escrito un poco de CSS en tu vida, esto es mucho más fácil de lo que parece. Puede usar Stylish para transformar sitios web por completo (como le mostraré en la siguiente sección), pero lo que es más importante, puede usar Stylish para solucionar pequeñas molestias en minutos.
Por ejemplo, tuve un problema con el tamaño de fuente predeterminado en Gmail. La interfaz estaba bien; no quería acercarme (Ctrl +) con mi navegador, porque eso aumentaría el tamaño de todos los elementos de la interfaz y sería realmente feo. Solo quería una forma de hacer que la fuente del mensaje sea un poco más grande.
Con Stylish, fue realmente simple y te mostraré cómo. Pero antes de analizar la creación de sus propios estilos de usuario, hablemos de aprovechar el trabajo de otras personas.
UserStyles.org
Si algo te pone de los nervios, es muy posible que no estés solo. UserStyles.org es un sitio web que permite a los usuarios compartir estilos que han creado. Arriba puedes ver un estilo ( Agregar etiquetas a los iconos de la barra de herramientas ) recomendado por el comentarista de MakeUseOf RandyN en respuesta a nuestra historia sobre los botones de icono de Gmail. Este estilo te permite conservar los íconos, pero agregar etiquetas de texto, algo que Google no te permitirá hacer.
UserStyles.org es genial, pero no perfecto. Algunos de los diseños intentan hacer demasiado (cambiar la apariencia de un sitio web por completo), y algunos son para versiones antiguas de sitios web y ahora están dañados. Si está tratando de arreglar algo pequeño y no puede encontrarlo en UserStyles.org, tal vez su mejor curso de acción sea hacerlo por su cuenta.
Creación de su propio estilo de usuario simple
Para crear su propio estilo de usuario, primero debe saber qué elemento de la página está tratando de cambiar y luego qué cambio desea realizar. Entonces, para comenzar, haga clic con el botón derecho en lo que desee cambiar y elija Inspeccionar elemento . Debería ver algo como esto:
Firefox oscurece el resto de la página y dibuja un marco muy claro alrededor del elemento que ha seleccionado. Sobre ese elemento, el texto que dice div # 2d6.ii.gt.adP.adO , es un montón de clases CSS, junto con una ID (la parte que comienza con #). Este es el selector que afecta el estilo de este elemento. En la parte inferior de la pantalla hay una barra de navegación que le permite ' atraviesa el árbol DOM ', o en palabras más simples, sube y baja en la jerarquía de elementos que conducen al elemento que has elegido.
El nombre del juego aquí es elegir el elemento que desea diseñar y hacer que la selección no sea tan estrecha que no afecte todo lo que desea afectar, ni tan amplia que arruine otras cosas.
Hice clic en un elemento más arriba, div.gs , solo porque me gusta su nombre (parece algo que no cambiará demasiado pronto, pero eso es una suposición completa de mi parte). Afecta a toda el área de mensajes. Una vez que se selecciona el área que desea diseñar, haga clic en el Estilo en la esquina inferior derecha, para abrir el Normas pan de molde:
Lo sé, da miedo al principio. Pero aquí es donde ves las diferentes reglas CSS que afectan al elemento que seleccionaste, y aquí es donde puedes hacer tus propias modificaciones temporales y ver su impacto en la página en tiempo real, sin recargarla. Pero, ¿qué deberías cambiar? Haga clic en el Propiedades botón y desmarcar Solo estilos de usuario :
Aquí puede ver una lista completa de todos Reglas CSS. Puede desplazarse hacia abajo en la lista hasta encontrar una regla que tenga sentido para lo que necesita (tamaño de fuente en nuestro caso), e incluso hacer clic en el signo de interrogación al lado para abrir una página de explicación. Entonces, ahora sabemos que queremos ajustar la propiedad de tamaño de fuente para todos los elementos div que tienen una clase de ' gs '(escrito en taquigrafía como div.gs ).
La única pregunta que queda es cuál queremos que sea su valor. Para eso, volvemos al panel Reglas y comenzamos a jugar:
40 píxeles puede ser un poco loco, pero te haces una idea general. Juegue con esto y siéntase libre de agregar cualquier otra propiedad, hasta que obtenga el aspecto que buscaba. Asegúrese de no cerrar la página, porque sus cambios son no guardado en cualquier lugar.
Guardar su nuevo estilo
Una vez que haya conseguido que esta parte del sitio tenga el aspecto que desea, es hora de guardarla. Haga clic en el Elegante en la barra de complementos y seleccione Escribe un nuevo estilo . Entonces, Stylish querría saber en qué páginas debería aplicar el nuevo estilo; en nuestro caso, elija la segunda opción, mail.google.com . A continuación, verá este cuadro de diálogo:
Ya lo he llenado. Obviamente, elegí un nombre y algunas etiquetas para el estilo. Pero lo real sucede dentro del código: la línea 3 ya estaba allí: Stylish la puso en su lugar para que sepa en qué páginas se aplica el estilo. Pero las líneas 5-7 son mías. Analicémoslos:
Línea 5: div.gs { - esta parte debes reconocer. Este es el elemento que hemos decidido diseñar. La llave de apertura significa que ahora vamos a escribir algunas reglas CSS. Línea 6: tamaño de fuente: 20px! importante; - esa es la regla que deseamos cambiar (tamaño de fuente), seguida de su nueva definición (20 píxeles), y luego de una declaración! Important, lo que significa que Firefox obedecería esta regla incluso si un elemento más cercano al texto intenta establecer el tamaño de la fuente a algo diferente. Línea 7:} - cerrando la definición de estilo.
A continuación, haga clic en Vista previa y maravíllese con su trabajo:
Y finalmente, una vez que vea que está funcionando, haga clic en Ahorrar.
Esta no es una guía completa
Soy muy consciente de que para mantener este breve tutorial dentro de los límites de una sola publicación, he tenido que hacer una serie de saltos y saltos. Si estuvo confundido en el camino, por favor acepte mis disculpas. CSS es complicado al principio, pero no es tan complicado una vez que lo dominas, y personalizar sitios web localmente sigue siendo una de las mejores formas de aprender.
Si algo te confundió, pregúntame a continuación y haré todo lo posible para ayudarte.
cómo crear un archivo .batCuota Cuota Pío Correo electrónico 5 consejos para potenciar sus máquinas Linux VirtualBox
¿Cansado del bajo rendimiento que ofrecen las máquinas virtuales? Esto es lo que debe hacer para mejorar el rendimiento de VirtualBox.
Leer siguiente Temas relacionados- Navegadores
- Desarrollo web
- Herramientas para webmasters
- Mozilla Firefox
- Google Chrome
- Web Design
Suscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse