Vi har allt innehåll vi behöver på denna sidutdata och vi har rubriken på plats. Nu kan vi starta CSSin 'innehållet i den design vi har i Photoshop.
En sak vi gjorde var att göra listan över sju kategorier statisk. Det är bara ett mindre wp_list_pages () -samtal och därmed lite mer effektivt. Om vi någonsin ändrar kategorierna är det en så stor sak att det inte är så farligt att se över den här koden.
Vi behöver i huvudsak en tvåpelarsdesign här. Det är enkelt att göra med att bara flyta ett par divs (eller mer sannolikt med vårt befintliga nätram). Men det hjälper oss inte att göra kolumner med "samma höjd" som vår design dikterar här. När allt kommer omkring är divs utan inställda höjder bara så höga som innehållet i dem. Att ställa in höjd på en div är i allmänhet en dålig idé.
För att få kolumner med samma höjd, fejkar vi det med en snygg liten idé där vi använder en stor omslagsdiv (som är lika lång som den högsta av kolumnerna den innehåller) och ställer in en lutningsbakgrund. Inte en toning-en-färg-till-annan-lutning, men en lutning med hårda stopp precis där kolumnen bryts. Detta ger oss den grå-till-vänster- och vita-till-höger-färgen vi behöver.
Vi tillämpar de olika bakgrundsfärgerna på varje kategorilänk i den vänstra kolumnen med en serie: nth-child () väljare. Vi bestämmer oss för att göra det på detta sätt snarare än klasser eftersom färgernas ordning är viktigare än att matcha färgen till kategorin (det är ganska godtyckligt).
Innan vi är klara med den här skärmutsändningen får vi skuggeffekten att inträffa (en tydlig åtskillnad mellan kolumner) genom att tillämpa ett pseudoelement på navigeringen som sträcker sig från början till botten av sidan. Detta pseudoelement har sin egen svart-till-transparent lutning som gör att det ser ut som en skugga.