हमारे पास इस पृष्ठ आउटपुट पर आवश्यक सभी सामग्री है और हमारे पास शीर्ष लेख है। अब हम CSSin की सामग्री को फ़ोटोशॉप में हमारे द्वारा डिज़ाइन किए गए डिज़ाइन में शुरू कर सकते हैं।
एक चीज जो हमने की थी, वह सात श्रेणियों की सूची को स्थिर बना रही थी। यह सिर्फ एक कम wp_list_pages () कॉल है और इस प्रकार थोड़ा अधिक कुशल है। यदि हम कभी श्रेणियां बदलते हैं, तो यह इतनी बड़ी बात है कि इस कोड को फिर से देखना कोई बड़ी बात नहीं है।
हमें आवश्यक रूप से यहां दो कॉलम डिजाइन की आवश्यकता है। बस इतना करना आसान है कि हम अपने मौजूदा ग्रिड ढाँचे का उपयोग करते हुए सिर्फ कुछ जोड़े (या अधिक संभावना है) तैरते रहें। लेकिन इससे हमें "समान हाइट्स" कॉलम बनाने में मदद नहीं मिलती है क्योंकि हमारा डिज़ाइन यहाँ निर्धारित है। आखिरकार, सेट के बिना divs केवल उतनी ही लंबी हैं जितनी उनके अंदर की सामग्री। एक div पर एक ऊँचाई सेट करना आमतौर पर एक बुरा विचार है।
समान ऊँचाई वाले स्तंभों को प्राप्त करने के लिए, हम इसे एक छोटे से विचार के साथ नकली करते हैं जहाँ हम एक बड़े आवरण div (जो कि स्तंभों के सबसे ऊँचे होते हैं) का उपयोग करते हैं और एक ढाल पृष्ठभूमि सेट करते हैं। फीका-एक-रंग-से-एक और ढाल नहीं है, लेकिन हार्ड के साथ एक ढाल ठीक वहीं रुकता है जहां स्तंभ टूटता है। यह हमें ग्रे-ऑन-द-लेफ्ट और वाइट-ऑन-द-राइट कलरिंग की आवश्यकता है।
हम बाएं स्तंभ में प्रत्येक श्रेणी के लिंक पर अलग-अलग पृष्ठभूमि के रंगों को लागू करते हैं: nth-child () चयनकर्ता। हम इसे कक्षाओं के बजाय इस तरह से तय करते हैं क्योंकि रंगों का क्रम श्रेणी से रंग मिलान करने की तुलना में अधिक महत्वपूर्ण है (यह बल्कि मनमाना है)।
इससे पहले कि हम इस पेंचकस के साथ करें, हम छाया प्रभाव (स्तंभों के बीच एक जोरदार पृथक्करण) को एक छद्म तत्व को नेविगेशन पर लागू करके बनाते हैं जो पृष्ठ के ऊपर से नीचे तक फैला हुआ है। इस छद्म तत्व की अपनी काली-से-पारदर्शी ढाल है जो इसे एक छाया की तरह दिखती है।