Megvan az összes szükséges tartalom ezen az oldalon, és a fejléc a helyén van. Most elkezdhetjük a CSS tartalmát a Photoshopban használt tervezésbe.
Egy dolgot tettünk, hogy statikusvá tettük a hét kategória listáját. Csak egy wp_list_pages () hívással kevesebb, és ezáltal valamivel hatékonyabb. Ha valaha megváltoztatjuk a kategóriákat, az olyan nagy dolog, hogy nem nagy baj, ha újra átnézzük ezt a kódot.
Itt két oszlopos kialakításra van szükségünk. Elég könnyű ezt megtenni, ha csak pár div-t lebegtetünk (vagy valószínűbb, hogy a meglévő rács-keretrendszerünket használjuk). De ez nem segít abban, hogy „egyenlő magasságú” oszlopokat készítsünk, ahogy a tervezésünk itt előírja. Végül is a meghatározott magasságú div-ok csak olyan magasak, mint a bennük lévő tartalom. A div magasságának beállítása általában rossz ötlet.
Ahhoz, hogy egyenlő magasságú oszlopokat kapjunk, egy apró kis ötlettel hamisítjuk, ahol egy nagy burkoló div-t használunk (amely olyan magas, mint a legmagasabb az oszlopokból), és beállítunk egy színátmenet hátteret. Nem egy színtől a másikig halványuló színátmenet, hanem egy kemény leállású gradiens ott, ahol az oszlop megtörik. Ez megadja a szürkét a bal oldalon és a fehéret a jobb oldalon, amire szükségünk van.
A bal oldali oszlopban található egyes kategóriák linkjeire különböző háttérszíneket alkalmazunk: n-gyermek () szelektorok sorozatával. Azért döntünk, hogy inkább osztályok helyett, mert a színek sorrendje sokkal fontosabb, mint a szín kategóriához illesztése (ez inkább önkényes).
Mielőtt ezzel a képernyőfelvétellel végeznénk, az árnyékhatást (hangsúlyos elválasztás az oszlopok között) megtesszük, ha egy pszeudo elemet alkalmazunk a navigációhoz, amely az oldal tetejétől lefelé húzódik. Ennek az álelemnek saját fekete-átlátszó színátmenete van, amely árnyékként néz ki.