Kami memiliki semua konten yang kami butuhkan pada output halaman ini dan kami memiliki header di tempatnya. Sekarang kita dapat memulai CSSin konten ke dalam desain yang kita miliki di Photoshop.
Satu hal yang kami lakukan adalah membuat daftar tujuh kategori menjadi statis. Ini hanya satu panggilan wp_list_pages () lebih sedikit dan dengan demikian sedikit lebih efisien. Jika kami pernah mengubah kategori, itu adalah masalah besar, bukan masalah besar untuk mengunjungi kembali kode ini.
Kami membutuhkan desain dua kolom di sini pada dasarnya. Itu cukup mudah dilakukan hanya dengan mengapungkan beberapa div (atau lebih mungkin, menggunakan kerangka kerja grid yang ada). Tetapi itu tidak membantu kami membuat kolom "ketinggian yang sama" seperti yang ditentukan desain kami di sini. Lagi pula, div tanpa set heights hanya setinggi konten di dalamnya. Menetapkan ketinggian pada div umumnya merupakan ide yang buruk.
Untuk mendapatkan kolom dengan tinggi yang sama, kami memalsukannya dengan ide kecil yang rapi di mana kami menggunakan satu div pembungkus besar (yang setinggi kolom tertinggi yang dikandungnya) dan mengatur latar belakang gradien. Bukan gradien pudar-satu-warna-ke-warna lain, tetapi gradien dengan penghentian keras tepat di tempat kolom pecah. Ini memberi kita warna abu-abu-di-kiri dan putih-di-kanan yang kita butuhkan.
Kami menerapkan warna latar belakang yang berbeda untuk setiap tautan kategori di kolom kiri dengan serangkaian pemilih nth-child (). Kami memutuskan untuk melakukannya dengan cara ini daripada kelas karena urutan warna lebih penting daripada mencocokkan warna dengan kategori (agak sewenang-wenang).
Sebelum kita selesai dengan screencast ini, kita membuat efek bayangan terjadi (pemisahan tegas antar kolom) dengan menerapkan elemen pseudo ke navigasi yang membentang dari atas ke bawah halaman. Elemen pseudo ini memiliki gradien hitam-ke-transparan sendiri yang membuatnya tampak seperti bayangan.