Avem tot conținutul de care avem nevoie pe această pagină și avem antetul la locul său. Acum putem începe CSSin 'conținutul în designul pe care îl avem în Photoshop.
Un lucru pe care l-am făcut a fost să facem lista celor șapte categorii statică. Este doar un apel mai puțin wp_list_pages () și, prin urmare, puțin mai eficient. Dacă schimbăm vreodată categoriile, este un lucru atât de important, nu este mare lucru să revedem acest cod.
Avem nevoie, în esență, de un design cu două coloane. Este destul de ușor de făcut doar cu plutirea a câteva divs (sau mai probabil, folosind cadrul nostru de rețea existent). Dar asta nu ne ajută să realizăm coloane cu „înălțimi egale” așa cum dictează designul nostru aici. La urma urmei, divs-urile fără înălțimi setate sunt doar la fel de înalte ca și conținutul din ele. Stabilirea unei înălțimi pe un div este, în general, o idee proastă.
Pentru a obține coloane cu înălțime egală, o falsificăm cu o idee mică, unde folosim un div mare de înfășurare (care este la fel de înalt ca cea mai înaltă dintre coloanele pe care le conține) și stabilim un fundal de gradient. Nu un gradient de estompare-o-culoare-la-alta, ci un gradient cu opriri puternice chiar acolo unde se sparge coloana. Acest lucru ne oferă culoarea gri-pe-stânga și alb-pe-dreapta de care avem nevoie.
Aplicăm diferitele culori de fundal fiecărui link de categorie din coloana din stânga cu o serie de: selectoare n-child (). Decidem să facem acest lucru mai degrabă decât clasele, deoarece ordinea culorilor este mai importantă decât potrivirea culorii cu categoria (este destul de arbitrară).
Înainte de a termina acest screencast, facem ca efectul de umbră să se întâmple (o separare emfatică între coloane) prin aplicarea unui pseudo-element de navigație care se întinde de sus în jos al paginii. Acest pseudoelement are propriul gradient negru-transparent care îl face să arate ca o umbră.