Solo puedo hablar familiarizado con Firefox, ya que ese es mi navegador principal. Trataré de mantener las cosas generales aquí para cumplir con su solicitud de 'enséñame a pescar'. Con ese fin, incluiré 2 ejemplos, el suyo y otro que tiene más lecciones del mundo real. Primero, obtendremos algunas herramientas para facilitar la creación de CSS de usuario.
- Actualiza a la última versión de Firefox. Algunas de las versiones recientes han tenido expansiones de las herramientas del inspector del sitio web, por lo que querrá esas.
- Opcional: instale la extensión Firebug que le brinda herramientas de inspección del sitio mucho más potentes. (personalmente, no uso Firebug para hacer CSS de usuario, pero incluyo una mención aquí por razones de integridad)
- Instale la extensión con estilo . Esta es una extensión centrada en CSS de usuario que simplifica enormemente la creación de CSS de usuario.
Ahora bien, para escribir realmente algo. Debe tener una familiaridad básica con HTML y CSS antes de continuar. W3Schools tiene tutoriales decentes disponibles para familiarizarse con la estructura básica y la sintaxis de HTML y CSS . En aras de esta respuesta, incluiré suficiente información para ayudar a un novato a lograr el ejemplo.
- Navega a la página. (en su caso, /unix// )
- Haga clic derecho sobre el elemento que desea manipular. (prácticamente en cualquier parte de la página para este caso, ya que el fondo afecta a toda la página)
- Seleccione 'Inspeccionar elemento' en el menú emergente. Esto usa las herramientas de inspección integradas de Firefox, no abordaré Firebug aquí, pero tiene paneles y características similares.
- Esto abre paneles en la parte inferior y lateral de la ventana de Firefox. En la parte inferior, estás viendo HTML. A la derecha, verá reglas CSS para el elemento de página seleccionado (que será en lo que hizo clic con el botón derecho). En la parte inferior, haga clic en diferentes elementos para navegar. La página está organizada en un árbol de elementos, y puede contraer o expandir cada nodo en el árbol. Al hacer clic en los elementos, el elemento seleccionado se resaltará en la página misma.
- En general, en este punto, querrá inspeccionar el elemento que desea manipular, junto con sus elementos principales (los elementos que contienen ese elemento en el árbol). Identifique el elemento que realmente tendrá que manipular. Por ejemplo, si está jugando con las respuestas en esta página, terminaría comenzando con el elemento <p> que contiene el texto de una respuesta, pero desea incluir todas las cosas alrededor del texto, como el / flechas de voto hacia abajo, la información del póster, los enlaces para compartir / editar / marcar, etc. Así que navega hacia arriba un par de niveles a la etiqueta <div> que tiene una identificación de "respuesta - ####" y una clase de "responder", ya que ese es el elemento que contiene todos los elementos de escaparate de una respuesta. Haga clic en él y verá que parte de la página web se resalta. (En este caso, el fondo de la página estará cerca de la parte superior, dentro de la etiqueta <body> . Desplácese hasta la parte superior del HTML y haga clic en la etiqueta <body>).
- A continuación, debe identificar las propiedades CSS de este elemento que querrá manipular. Mire el CSS a la derecha y encuentre las propiedades que desea modificar. Personalmente, soy bastante nuevo en CSS, por lo que en este punto, a menudo buscaré en Google 'css' + un nombre de propiedad para obtener más información sobre la propiedad y cómo se comporta. Continuando con mi ejemplo donde estamos viendo una respuesta SE, digamos que queremos alterar los márgenes alrededor de la respuesta. El archivo all.css tiene una propiedad de margen establecida en 0px, pero claramente hay un margen alrededor de estos elementos. Buscar en Google me enseña a buscar propiedades de relleno, ya que también pueden afectar los márgenes alrededor de un elemento. Efectivamente, hay dos propiedades relacionadas con el relleno que se establecen en una respuesta, padding-bottom y padding-top. (para su problema específico, está buscando una imagen de fondo, así que busque 'fondo' en las propiedades CSS. Verá una propiedad 'fondo' cerca de la parte superior. Se aplica a los elementos del cuerpo de esa página. Google " css background property " para aprender cómo funciona esa propiedad, le muestra que puede contener un color o una URL a una imagen, junto con varios modificadores. Después de navegar un poco para profundizar en cómo funciona la propiedad de imagen de fondo , vemos algunos información útil, el valor predeterminado de 'ninguno' . Queremos revertir la imagen de fondo a su valor predeterminado, por lo que necesitaremos esa información).
Ahora usamos con estilo. La alternativa sin Stylish sería editar los archivos que publicó en su respuesta. Stylish nos permite gestionar fácilmente el CSS de usuario de muchos sitios. Stylish agrega un pequeño ícono a su ventana de Firefox, haga clic en él y luego vaya a "Escribir un nuevo estilo" -> "For" (este sitio) .com ". Dé un nombre al estilo y opcionalmente algunas etiquetas. Entonces podrá para distinguir este estilo como el que se aplica a Superuser.com o Stackexchange.com, etc. Esta ventana nos proporciona una plantilla que nos permite modificar el CSS solo para este dominio. Si necesita modificar el CSS para una URL específica, puede hacer eso o también puede obtener un estilo en blanco si desea escribir CSS que se aplique a todos los sitios, simplemente seleccione la entrada correspondiente en el menú Elegante. Para mi ejemplo de modificación de respuesta, usted "
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("superuser.com") {
}
Todo lo que se ponga en el bloque @ -moz-document se aplicará solo al dominio allí en el paréntesis. Vea los artículos en negrita arriba. Para modificar el relleno de las respuestas, actualice el cuadro de texto para que sea así:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("superuser.com") {
.answer {
padding-bottom:0px;
padding-top:0px;
}
}
Descomponerlo para las personas que no saben CSS, estamos seleccionando en primer lugar la clase (ergo un "" va en la salida. Si nos estábamos seleccionando por ID, que había puesto un '#' allí.) Respuesta (pues contesta'). Luego abrimos un bloque con una llave para enumerar las propiedades del elemento seleccionado que modificaremos. Primero, estamos alterando el fondo del relleno y configurándolo en 0 píxeles . Luego hacemos lo mismo para padding-top . Cada propiedad y valor se termina con un punto y coma. Luego cerramos el bloque con una llave rizada. (en su ejemplo de Unix, haría esto:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("unix.stackexchange.com") {
body {
background:none;
}
}
Aquí estás trabajando en el dominio unix.stackexchange.com. Estamos seleccionando el elemento "cuerpo" (cuando seleccionamos el elemento HTML también es un selector CSS, no es necesario usar #s o .s aquí). Estamos configurando el fondo a ninguno.)
- Le llamo la atención sobre los botones en la parte inferior de la ventana de edición de estilos con estilo. "Vista previa" activará los cambios que ingresó, para que pueda verlos en acción. "Guardar" guardará los cambios. "Cancelar" es bastante obvio. Para prácticamente cualquier cambio de CSS de usuario que esté haciendo, querrá hacer clic en Vista previa para ver si el cambio funcionó de la manera deseada. En ambos ejemplos, verá que no funcionó. Hay una razón importante para esto, que ahora abordo.
CSS tiene una jerarquía específica de prioridades para determinar cómo tratar con CSS de usuario vs. CSS de autor vs. CSS de navegador. Normalmente, tenemos CSS para una página escrita por el autor de la página, y que contendrá reglas para muchos de los elementos de esa página. Cuando el autor no define una regla, pero está en su CSS de usuario, entonces su navegador la usará. Si ninguno de ellos tiene CSS definido para ese elemento, entonces el navegador usa sus propias reglas CSS predeterminadas en ese elemento. Entonces hay una jerarquía de peso aquí, autor> usuario> navegador. Si algo está definido en los tres, entonces el CSS de mayor peso ganará y su CSS tendrá efecto. Hay una manera de obtener CSS de menor peso para anular el CSS de mayor peso, y eso es designándolos importantes. Para ello, incluya "! Importante"
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("unix.stackexchange.com") {
body {
background:none !important;
}
}
Ahora haga clic en Vista previa nuevamente y verá que su CSS de usuario funciona. Haz clic en Guardar y disfrutar.
Si está utilizando Chrome, su inspector incorporado ya es muy bueno. También hay una extensión con estilo . Ingrese las modificaciones CSS de forma un poco diferente: seleccione "Administrar estilos instalados" y luego haga clic en "Escribir nuevo estilo", ingrese los sitios o patrones de URL para aplicar la publicación debajo del cuadro de código e ingrese solo el CSS específico del dominio en el " código ", p. ej.
body {
background:none !important;
}
Haces lo que harías si estuvieras poniendo en el sitio
Luego añade
antes de la
}. Aquí hay un pequeño detalle sobre el uso de CSS sin usuario que todavía lo explica para su uso.fuente