Hay momentos en que es necesario; supongamos que has creado tu sitio usando WordPress, has escogido el tema que te parece más adecuado y, resulta que hay una división entre dos elementos, pero para ti, no tiene sentido.
Después de buscar por todas partes, no has encontrado ninguna referencia en el tema y su documentación, a esa división. ¿Ahora que?
Cómo hackear el tema
No te queda más remedio que jugar un poco a ser un hacker (de sombrero blanco, siempre) y encontrar tu mismo la solución.
¡Empezamos!
Haciendo de detective de CSS
Comenzamos con las pistas, sabes cuál es el problema, simplemente no puedes encontrarlo. En el ejemplo anterior, debes buscar un borde errante.
Hay que empezar examinando cuidadosamente una página generada (o página de prueba) y buscando algún texto de identificación cerca del borde errante.
Debes buscar algo que puedas reconocer cuando veas el código fuente de la página.
Para ver el código fuente de la página, en la mayoría de los navegadores, se hace pulsando la combinación Ctrl+U.
Dentro de la ventana que se ha abierto con el código fuente, buscamos (con otra herramienta de detective: Ctrl+F) el texto identificativo que hemos seleccionado.
El texto seleccionado es mejor que sea algo fácilmente reconocible, no nos vale con la palabra «la» ni «casa», pero si algo como «la casa rosa».
El borde que no queremos
Entramos el texto en la casilla de búsqueda y haz clic sobre el botón de búsqueda (si lo requiere tu navegador, en Firefox, el resultado de búsqueda ya estará resaltado).
Si el término de la búsqueda no ha sido suficientemente específico, es posible que debas buscar de nuevo o hacer clic en el botón para buscar la siguiente ocurrencia.
Algunos usuarios, puede que tengan la versión para desarrollador del navegador, o que tengan instalado una barra de herramientas de desarrollo, con lo que la búsqueda será más sencilla, incluso puede que puedan buscar «visualmente».
Una vez que has encontrado el texto correcto, ya puedes identificar en el código html, a qué elemento «p» o «div» pertenece.
A estas alturas estarás pensando «¡Pero qué dice, hay métodos mejores …» y, no te falta razón, este método descrito ya está superado; lo expongo para que veamos la evolución de las cosas.
En los navegadores modernos, existe una herramienta más potente, se trata del «Inspector de código». Este inspector que tienen casi todos los navegadores modernos, suele invocarse situando el puntero del ratón sobre o cerca del elemento que queremos inspeccionar; haz clic derecho y selecciona el «inspector» («inspeccionar elemento» en Firefox, Opera, Vivaldi; «Inspeccionar» en Brave, Chrome, Chromium, etcétera )
Esta acción dividirá la pantalla, mostrando la página normal del navegador y una sección con el código html; la posición varía según el navegador y la configuración elegida, puede ser una división horizontal o vertical.
Inspeccionar el elemento
Una vez que tienes identificado el elemento html más próximo al literal que has identificado, es hora de buscar ese sospechoso entre las reglas CSS que están definidas en el archivo style.css.
Continuando con el ejemplo, encontramos que el texto buscado está dentro de un elemento <div>, concretamente:
Por lo que sabemos que el sospechoso, es el estilo «cPQsENeY» y es el que debemos buscar en el archivo de declaración de estilos.
Hay que encontrar la etiqueta de nombre de estilo y, dentro de su declaración, buscamos alguna referencia al borde; en este caso, podemos identificar la línea:
border-left: 1px solid red;
Que procedemos a cambiar o eliminar, según nuestro deseo.
Si no existiera esa línea, la caza debe continuar.
En algunos casos, la caza no es tan fácil; imaginemos que no existe la línea de declaración de borde dentro de la etiqueta de clase que hemos encontrado.
Tenemos que volver al inspector y ver cual es el elemento contenedor que engloba a la declaración; en este caso, hay otro elemento <div>, que a su vez, contiene otra clase en su declaración:
Así que repetimos el proceso de investigación y buscamos en el archivo de estilo, en este caso, por la etiqueta de clase _2f_ruteS, _1bona3Pu y hotels-hotel-review-about-csr-Description__description--3kC78
Repitiendo el proceso mientras la caza sea infructuosa; aquí podemos encontrarnos con un caso poco típico:
La declaración del borde no está en la clase del elemento <div> como se esperaba, sino en una clase dependiendo de que el elemento <div> se encuentre justo debajo del elemento con la etiqueta (línea 8 del archivo).
Si por desgracia nuestras pesquisas no han dado resultado, no te desanimes, un buen detective no se rinde fácilmente.
Busca con tu editor de texto, en el archivo de estilo, las referencias al atributo «border», mira a qué clase pertenece cada una de las expresiones encontradas
Aunque no es muy común, ya que la programación no tiene una única solución a los problemas, en ocasiones las cosas pueden aparecer enredadas. Por ejemplo, puede haber una referencia a un «border» en un elemento no directamente ligado al elemento que estamos tratando, puede ser un «sibling» o elemento hermano el que pinte el borde que buscamos.
¡Feliz aprendizaje! Recuerda divertirte.
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!
Para ofrecer las mejores experiencias, utilizamos tecnologías como las cookies para almacenar y/o acceder a la información del dispositivo. El consentimiento de estas tecnologías nos permitirá procesar datos como el comportamiento de navegación o las identificaciones únicas en este sitio. No consentir o retirar el consentimiento, puede afectar negativamente a ciertas características y funciones.
Más información
