Lo siguiente no es sobre la elección de un tema de WordPress, pero encontrar los estilos CSS dentro de su tema actual. A menudo un problema se produce en una parte del diseño o plantilla. Por ejemplo, hay un borde que no quieres entre el menú de la barra lateral y el resto de la página. Usted caza y caza pero no puede encontrar ninguna referencia a la frontera. ¿Ahora qué?

Jugar al detective CSS

Empecemos a jugar al detective CSS. Usted sabe dónde está el problema, sólo que no puede encontrar el problema. En el ejemplo anterior, tiene que buscar un borde errante.

Empiece por examinar cuidadosamente una página generada (o página de prueba) y busque algún texto de identificación en la barra lateral, cerca del borde errante. Digamos que en la barra lateral hay un título de entrada llamado «Todo sobre Harry». Sabes que encontrarás ese título en la barra lateral cuando veas el código fuente de la página.

Para ver el código fuente de una página, ve a la barra de menú de tu navegador y elige VER > FUENTE DE LA PÁGINA o VER > FUENTE. Aparecerá una página con el código fuente de la página.

Usa tu práctica herramienta de detective, Ctrl+F, para activar tu búsqueda. Escribe «todo sobre harry» y haz clic en BUSCAR. Lo más probable es que, a menos que tengas las palabras «todo sobre harry» en tu entrada, te lleve a la primera aparición de la frase «todo sobre harry», que probablemente esté en tu barra lateral. Si no es así, pulse FIND de nuevo hasta que haya encontrado la frase correcta en el área correcta.

Si está utilizando Internet Explorer, un método alternativo es utilizar la barra de herramientas para desarrolladores de Internet Explorer, que le permite ver y seleccionar visualmente los elementos, IDs y clases de la página. Muestra los elementos dentro de la jerarquía de la página, sus atributos CSS, y puede delinear DIVs, tablas, etc. Puedes descargar la barra de herramientas desde Microsoft.

Una vez que hayas encontrado la frase, es hora de jugar a ser detective de CSS. Busca en el código de la frase «Todo sobre Harry» una de estas dos cosas. Se parecerá a alguna de estas, usando palabras como sidebar, menu, o sidecolumn:

<div>or<div class="sidebar">

Esta es la sección principal que contiene tu menú de la barra lateral. Has encontrado el primer sospechoso.

Ahora, abre tu archivo style.css y haz otra búsqueda de sidebar o cualquiera que sea el nombre resultante que hayas descubierto. Suele identificarse de dos maneras:

#sidebaror.sidebar

Mira en los estilos bajo estos selectores CSS y fíjate si hay una mención a border, a menudo con un aspecto parecido a este:

#sidebar {position: relative; float: right; width: 170px; color: blue; font-size: 90%; border-right: solid 1px blue; }

¡Aquí está tu border, el criminal! Si éste es el culpable, elimine la referencia al borde y estará listo.

Si no lo es, la caza continúa.

A veces el culpable es el que menos sospecha. Tal vez el borde no es causado por el sospechoso obvio, la barra lateral, sino por la sección de contenido. Vuelve al código fuente de la página generada y busca las primeras palabras de tu post. Busca encima de eso algo como:

<div>

Podría llamarse content, page. post, maincolumn, widecolumn, o tener otro alias, pero debería ser el contenedor CSS que contiene la información de tu post. Ahora, vuelve a la hoja de estilo y comprueba si hay un borde en esa sección.

Arriesga la hoja de estilo

Si todo esto falla, el detective de CSS nunca abandona la caza. Vuelve al escondite de todos los estilos, el archivo style.css, y revísalo haciendo una búsqueda de «border» y mira con atención a cada sospechoso. Anote el nombre del identificador del selector, como barra lateral, menú, contenido y página, y luego vuelva a la fuente de la página generada para ver si ese podría ser su culpable.

También puede seleccionar el sospechoso del borde que ha encontrado en la hoja de estilo y cortarlo y pegarlo en un archivo TXT (como el Bloc de notas) que se queda abierto en su ordenador como un bloc de notas para rascar. Anote el nombre del selector del que lo ha eliminado así:

Removed border: solid 2px green from #content

Luego guarde el style.css editado y súbalo a su sitio. Actualice la entrada de prueba generada y vea si el borde no deseado ha desaparecido. Si es así, ha encontrado el culpable. Si no, vuelve al Bloc de notas y copia el código y ponlo de nuevo en tu style.css en la sección «content», poniendo las cosas donde las encontraste.

Si encuentras a tu culpable, haz un pequeño baile, chilla y vitorea, y haz que los demás sospechen y se pongan nerviosos cuando estén cerca de ti. El detective de CSS resuelve otro crimen de CSS!

Más ayuda para la solución de problemas de CSS

  • Solución de errores de navegador de CSS
  • Solución de problemas de CSS