Veškerý obsah, který potřebujeme, máme na této stránce a máme záhlaví na místě. Nyní můžeme začít CSSin 'obsah do designu, který máme ve Photoshopu.
Jedna věc, kterou jsme udělali, bylo vytvořit seznam sedmi kategorií statický. Je to jen o jedno volání wp_list_pages () méně a tedy o něco efektivnější. Pokud bychom někdy změnili kategorie, je to tak velká věc, že není velký problém tento kód znovu navštívit.
Potřebujeme zde zásadně design se dvěma sloupci. To je snadné udělat jen s plovoucím párem divů (nebo s větší pravděpodobností pomocí našeho stávajícího mřížkového rámce). Ale to nám nepomůže dělat sloupce „stejné výšky“, jak nám to zde diktuje náš design. Koneckonců, divy bez nastavených výšek jsou jen tak vysoké jako obsah v nich. Nastavení výšky na div je obecně špatný nápad.
Abychom získali sloupy stejné výšky, falešovali jsme to čistým malým nápadem, kde používáme jeden velký obalový div (který je stejně vysoký jako nejvyšší ze sloupců, které obsahuje) a nastavíme pozadí přechodu. Není to přechod mizení jedné barvy na jinou, ale přechod s tvrdými zastávkami přímo tam, kde se sloupec zlomí. To nám dává zbarvení šedé na levé a bílé na pravé straně, které potřebujeme.
Aplikujeme různé barvy pozadí na každý odkaz na kategorii v levém sloupci pomocí řady: nth-child () selektorů. Rozhodli jsme se to tak spíše než třídy, protože pořadí barev je důležitější než sladění barvy s kategorií (je to docela libovolné).
Než skončíme s tímto screencastem, provedeme efekt stínu (důrazné oddělení mezi sloupci) použitím pseudo elementu na navigaci, která se táhne shora dolů. Tento pseudo prvek má svůj vlastní přechod od černé k průhledné, díky kterému vypadá jako stín.