Tenemos todo el contenido que necesitamos en la salida de esta página y tenemos el encabezado en su lugar. Ahora podemos iniciar CSSin 'el contenido en el diseño que tenemos en Photoshop.
Una cosa que hicimos fue hacer estática la lista de siete categorías. Es solo una llamada menos a wp_list_pages () y, por lo tanto, es un poco más eficiente. Si alguna vez cambiamos las categorías, es algo tan importante que no es gran cosa volver a visitar este código.
Necesitamos un diseño de dos columnas aquí esencialmente. Eso es bastante fácil de hacer con solo hacer flotar un par de divs (o más probablemente, usando nuestro marco de cuadrícula existente). Pero eso no nos ayuda a hacer columnas de "alturas iguales" como nuestro diseño dicta aquí. Después de todo, los divs sin alturas establecidas son tan altos como el contenido dentro de ellos. Establecer una altura en un div es generalmente una mala idea.
Para obtener columnas de igual altura, lo simulamos con una pequeña idea ordenada en la que usamos un div contenedor grande (que es tan alto como la más alta de las columnas que contiene) y establecemos un fondo degradado. No es un degradado que se desvanece de un color a otro, sino un degradado con paradas bruscas justo donde se rompe la columna. Esto nos da el color gris a la izquierda y blanco a la derecha que necesitamos.
Aplicamos los diferentes colores de fondo a cada enlace de categoría en la columna de la izquierda con una serie de selectores: nth-child (). Decidimos hacerlo de esta manera en lugar de clases porque el orden de los colores es más importante que hacer coincidir el color con la categoría (es bastante arbitrario).
Antes de terminar con este screencast, hacemos que suceda el efecto de sombra (una separación enfática entre columnas) aplicando un pseudo elemento a la navegación que se extiende de arriba a abajo de la página. Este pseudo elemento tiene su propio degradado de negro a transparente que lo hace parecer una sombra.