Na výstupe z tejto stránky máme všetok obsah, ktorý potrebujeme, a hlavičku máme na svojom mieste. Teraz môžeme začať CSSin 'obsah do dizajnu, ktorý používame vo Photoshope.
Jedna vec, ktorú sme urobili, bolo vytvorenie zoznamu siedmich kategórií statickým. Je to len o jeden hovor menej wp_list_pages () a teda o niečo efektívnejšie. Ak niekedy zmeníme kategórie, je to taká veľká vec, že nie je veľký problém tento kód prehodnotiť.
Potrebujeme tu v podstate dizajn s dvoma stĺpmi. Je to ľahké urobiť iba s plávaním niekoľkých divov (alebo pravdepodobnejšie pomocou nášho existujúceho mriežkového rámca). Ale to nám nepomôže robiť stĺpy „rovnakej výšky“, ako to tu vyžaduje náš dizajn. Koniec koncov, prvky div bez nastavenej výšky sú iba také vysoké ako obsah v nich. Nastaviť výšku na div je všeobecne zlý nápad.
Aby sme získali stĺpce rovnakej výšky, sfalšovali sme to úhľadným malým nápadom, kde použijeme jeden veľký obalový div (ktorý je rovnako vysoký ako najvyšší zo stĺpcov, ktoré obsahuje) a nastavíme pozadie s prechodom. Nie prechod s vyblednutím jednej farby na inú, ale prechod s tvrdými zastávkami priamo tam, kde sa stĺpec zlomí. Získame tak potrebné sfarbenie sivej na ľavej a bielej na pravej strane.
Na každý odkaz na kategóriu v ľavom stĺpci použijeme rôzne farby pozadia pomocou série selektorov: nth-child (). Rozhodli sme sa pre to týmto spôsobom, nie triedami, pretože poradie farieb je dôležitejšie ako zladenie farieb s danou kategóriou (je to ľubovoľné).
Predtým, ako skončíme s týmto obrazovým vysielaním, urobíme efekt tieňa (dôrazné oddelenie medzi stĺpcami) použitím pseudoprvku na navigáciu, ktorá sa tiahne zhora nadol na stránke. Tento pseudoelement má vlastný čierny až priehľadný gradient, vďaka ktorému vyzerá ako tieň.