Na tej strani imamo vso vsebino, ki jo potrebujemo, in glavo imamo na mestu. Zdaj lahko CSS vstavimo v vsebino v obliko, ki jo imamo v Photoshopu.
Ena stvar, ki smo jo storili, je bila, da je seznam sedmih kategorij naredil statičen. Gre le za en manj klic wp_list_pages () in s tem nekoliko učinkovitejši. Če kdaj spremenimo kategorije, je to tako velika stvar, da ni nič novega, da bi ponovno pregledali to kodo.
Tu v bistvu potrebujemo zasnovo z dvema stolpcema. To je enostavno narediti s samo plavanjem nekaj div-jev (ali bolj verjetno z uporabo našega obstoječega ogrodja mreže). Toda to nam ne pomaga pri izdelavi stolpcev "enake višine", kot tukaj narekuje naša zasnova. Konec koncev so div-ji brez nastavljene višine visoki le toliko, kot je vsebina v njih. Nastavitev višine na div je na splošno slaba ideja.
Če želimo dobiti stolpce enake višine, to ponaredimo z lepo majhno idejo, kjer uporabimo en velik ovoj ovitka (ki je visok kot najvišji stolpec, ki ga vsebuje) in nastavimo ozadje gradienta. Ne preliv, ki bi zbledel iz ene barve v drugo, ampak preliv s trdimi postanki tam, kjer se stolpec zlomi. Tako dobimo sivo-na-levi in beli-na-desni barvi, ki jo potrebujemo.
Različne barve ozadja uporabimo za vsako povezavo do kategorije v levem stolpcu z vrsto izbirnikov: nth-child (). Za to se odločimo namesto za razrede, ker je vrstni red barv pomembnejši od ujemanja barve s kategorijo (precej je poljuben).
Preden končamo s tem predvajanjem zaslona, naredimo senčni učinek (poudarjeno ločevanje med stolpci) tako, da na navigacijo, ki se razteza od vrha do dna strani, uporabimo psevdo element. Ta psevdo element ima lasten gradient od črne do prosojne, zaradi česar je videti kot senca.