Abbiamo tutto il contenuto di cui abbiamo bisogno sull'output di questa pagina e abbiamo l'intestazione a posto. Ora possiamo avviare CSSin 'il contenuto nel design che abbiamo in Photoshop.
Una cosa che abbiamo fatto è stata rendere statico l'elenco delle sette categorie. È solo una chiamata in meno di wp_list_pages () e quindi un po 'più efficiente. Se mai cambiamo le categorie, è una cosa così importante che non è un grosso problema rivisitare questo codice.
Abbiamo bisogno di un design a due colonne qui essenzialmente. È abbastanza facile da fare semplicemente fluttuando un paio di div (o più probabilmente, utilizzando il nostro framework di griglia esistente). Ma questo non ci aiuta a creare colonne di "altezza uguale" come il nostro design impone qui. Dopotutto, i div senza altezze impostate sono alti quanto il contenuto al loro interno. Impostare un'altezza su un div è generalmente una cattiva idea.
Per ottenere colonne di uguale altezza, simuliamo con una piccola idea pulita in cui usiamo un grande div wrapper (che è alto quanto la più alta delle colonne che contiene) e impostiamo uno sfondo sfumato. Non una sfumatura da un colore a un altro, ma una sfumatura con interruzioni nette proprio dove si interrompe la colonna. Questo ci dà la colorazione grigio a sinistra e bianco a destra di cui abbiamo bisogno.
Applichiamo i diversi colori di sfondo a ciascun collegamento di categoria nella colonna di sinistra con una serie di selettori: nth-child (). Decidiamo di farlo in questo modo piuttosto che in classi perché l'ordine dei colori è più importante che abbinare il colore alla categoria (è piuttosto arbitrario).
Prima di aver finito con questo screencast, realizziamo l'effetto ombra (una separazione enfatica tra le colonne) applicando uno pseudo elemento alla navigazione che si estende dall'alto verso il basso della pagina. Questo pseudo elemento ha il proprio gradiente dal nero al trasparente che lo fa sembrare un'ombra.