Bu sayfa çıktısında ihtiyacımız olan tüm içeriğe sahibiz ve başlığı yerinde tutuyoruz. Şimdi Photoshop'ta yaptığımız tasarıma içeriği CSS eklemeye başlayabiliriz.
Yaptığımız bir şey, yedi kategorinin listesini statik yapmaktı. Sadece bir wp_list_pages () çağrısı daha az ve dolayısıyla biraz daha verimli. Eğer kategorileri değiştirirsek, bu o kadar büyük bir şey ki, bu kodu tekrar gözden geçirmek çok da önemli değil.
Burada esasen iki sütunlu bir tasarıma ihtiyacımız var. Bu, sadece birkaç div'i yüzdürmekle (veya daha büyük olasılıkla, mevcut grid çerçevemizi kullanarak) yapmak yeterince kolaydır. Ancak bu, tasarımımızın burada dikte ettiği gibi "eşit yükseklikte" sütunlar oluşturmamıza yardımcı olmuyor. Sonuçta, belirli yüksekliklere sahip olmayan div'ler yalnızca içlerindeki içerik kadar uzundur. Bir div için yükseklik ayarlamak genellikle kötü bir fikirdir.
Eşit yükseklikteki sütunları elde etmek için, onu büyük bir sarıcı div (içerdiği sütunların en uzun olanı kadar uzun) kullandığımız ve gradyan arka planı belirlediğimiz küçük bir fikirle taklit ediyoruz. Bir renkten diğerine soluk bir gradyan değil, sütunun kırıldığı yerde sert duraklı bir gradyan. Bu bize ihtiyacımız olan soldaki gri ve sağdaki beyaz rengi verir.
Bir dizi: nth-child () seçiciyle sol sütundaki her kategori bağlantısına farklı arka plan renkleri uygularız. Sınıflardan ziyade bu şekilde karar veriyoruz çünkü renklerin sırası, rengi kategoriye uydurmaktan daha önemlidir (oldukça keyfi).
Bu ekran video kaydını bitirmeden önce, gezinmeye sayfanın üstünden altına doğru uzanan sözde bir öğe uygulayarak gölge efektini (sütunlar arasında kesin bir ayrım) gerçekleştiriyoruz. Bu sözde öğenin, bir gölge gibi görünmesini sağlayan kendi siyahtan saydam gradyanına sahiptir.