Έχουμε όλο το περιεχόμενο που χρειαζόμαστε σε αυτήν την έξοδο σελίδας και έχουμε την κεφαλίδα στη θέση της. Τώρα μπορούμε να ξεκινήσουμε CSSin το περιεχόμενο στο σχεδιασμό που έχουμε στο Photoshop.
Ένα πράγμα που κάναμε ήταν να κάνουμε τη λίστα των επτά κατηγοριών στατική. Είναι μόνο μία λιγότερη κλήση wp_list_pages () και έτσι λίγο πιο αποτελεσματική. Εάν αλλάξουμε ποτέ τις κατηγορίες, αυτό είναι τόσο μεγάλο πράγμα, δεν είναι μεγάλη υπόθεση να επανεξετάσουμε αυτόν τον κώδικα.
Χρειαζόμαστε ένα σχέδιο δύο στηλών ουσιαστικά εδώ. Αυτό είναι αρκετά εύκολο να κάνουμε με την απλή μετακίνηση μερικών div (ή πιθανότερο, χρησιμοποιώντας το υπάρχον πλαίσιο δικτύου). Αλλά αυτό δεν μας βοηθά να κάνουμε στήλες «ίσου ύψους», όπως υπαγορεύει ο σχεδιασμός μας εδώ. Μετά από όλα, τα div χωρίς καθορισμένα ύψη είναι τόσο ψηλά όσο το περιεχόμενο μέσα τους. Ο καθορισμός ύψους σε ένα div είναι γενικά μια κακή ιδέα.
Για να λάβουμε στήλες ίσου ύψους, το πλαστογραφούμε με μια τακτοποιημένη μικρή ιδέα όπου χρησιμοποιούμε ένα μεγάλο περιτύλιγμα div (το οποίο είναι τόσο ψηλό όσο το ψηλότερο από τις στήλες που περιέχει) και θέτουμε ένα φόντο κλίσης. Όχι μια διαβάθμιση ξεθωριάσει-ένα-χρώμα-σε-άλλο, αλλά μια κλίση με σκληρές στάσεις ακριβώς εκεί που σπάει η στήλη. Αυτό μας δίνει το γκρι-πάνω-αριστερά και το λευκό-στο-δεξί χρώμα που χρειαζόμαστε.
Εφαρμόζουμε τα διαφορετικά χρώματα φόντου σε κάθε σύνδεσμο κατηγορίας στην αριστερή στήλη με μια σειρά επιλογών: nth-child (). Αποφασίζουμε να το κάνουμε με αυτόν τον τρόπο αντί για τάξεις, επειδή η σειρά των χρωμάτων είναι πιο σημαντική από το να ταιριάζει με το χρώμα στην κατηγορία (είναι μάλλον αυθαίρετο).
Πριν τελειώσουμε με αυτό το screencast, κάνουμε το σκιώδες αποτέλεσμα (έναν έμφανο διαχωρισμό μεταξύ στηλών) εφαρμόζοντας ένα ψευδο στοιχείο στην πλοήγηση που εκτείνεται από πάνω προς τα κάτω της σελίδας. Αυτό το ψευδο στοιχείο έχει τη δική του διαβάθμιση από μαύρο έως διαφανές που το κάνει να μοιάζει με σκιά.