It’s finally time to reveal why I’ve been breaking the Leif & Thorn layout all weekend!
I’ve been pulling the CSS for colors and images into a separate stylesheet from the rest of the CSS (i.e. the fonts, the arrangement of sections, the padding…so much padding), so I could have multiple color/image themes and give everyone the option to toggle between them.
Starting with a seasonal Northern Lights theme. (And only halfway through December!)
Settling on the palette was the easy part. (And the fun part.) The hard parts were:
- divvying up the properties correctly between the “Inkblot child theme” stylesheet and the color-scheme stylesheets, so nothing got duplicated, or accidentally dropped
- updating a whole bunch of non-transparent images that only worked on a theme with a white background
- combing through error-spawning code for the missing period/semicolon/curly-brace
- learning how to keep stylesheets from getting flagged as “insecure content”
- realizing the After Dark pages were going to try to load the default color-scheme stylesheet, so I needed a style that wouldn’t override it
- realizing that, while keeping the default scheme from overriding the After Dark scheme, I had prevented it on loading from a bunch of other pages at all
- giving the Firefox Code Inspector a workout
- giving the W3C’s exhaustive guide to CSS properties a workout
- giving Notepad++’s side-by-side document view a workout
- truly appreciating the WordPress Header and Footer and Real-Time Find and Replace plugins
- testing how it looks when you move an element 5 pixels to the left…then putting it back…then trying it 5 pixels to the right…
- sitting back and waiting for the server-side cache to update so I could finally see if the live results matched the previews
…and now, finally, it’s in a state where I feel ready to show it off.
There’s a couple of new buttons in the left-hand sidebar that will let you switch between Northern Lights and the original theme, Blue Castle. Check them out.
The buttons are supposed to set a cookie in your browser that remembers your chosen theme when you visit different pages…but I can’t seem to get that part working. If anybody can take a look at the source code and figure out what’s missing, it would be much appreciated!
And in general, if you run into any new problems while browsing the site, comment here and let me know. Gotta tackle them while my debugging mojo is still flowing.