Kris Johnson's Blog…sort of.

CSS

  • Naked for a Day

    ·

    Kris Johnson

    It’s the third annual CSS Naked Day, so I’ve disabled all stylesheets for the blog. This is what the site would look like every day if not for the magic of Cascading Style Sheets: functional, but not very pretty.

    CSS Naked Day is the brainchild of User Interface Engineer Dustin Diaz. It is intended to “to promote Web Standards with layered semantic markup, and a clear separation between content, and presentation to enhance accessibility.”

    This year, more than a thousand websites have signed up for the event, signifying their intent to strip away the pretty CSS and show the world what’s underneath.

    EDIT: Bloginatrix Lorelle van Fossen has an excellent explanation of why we’re observing CSS Naked Day on her meta-blog, Lorelle on WordPress.

  • Sitestuff: Theme work in progress.

    ·

    Kris Johnson

    KJToo.com Screen Shot
    image-757
    I spent a good deal of time this weekend fiddling around with the Sandbox theme from plaintxt.org. Plaintxt.org is the brainchild of Scott Wallick, and he describes it as “[m]inimalism in blogging: an experiment out of control”. In the two and a half years since I installed WordPress, I’ve used at least three of Scott’s plaintxt.org themes: Barthelme, plaintxtBlog and now Sandbox.

    Where Barthelme and plaintxtBlog are both fully developed from a visual standpoint, Sandbox is more like a blank slate upon which a design can be built; think of it as an unfrosted cake ready for anything your imagination (and your skill with a tube of colored frosting) can throw at it.

    If you’re familiar with the old look of the site, it might appear that all I’ve done is shift the left sidebar over to the right, and there’s good reason for that: my goal was to, in essence, recreate the basic look of Brian Gardner’s Blue Zinfandel theme, but with two right-hand sidebars instead of one on either side of the main column. Ultimately, the changes to the design will be significant enough to fully distinguish it from Brian’sI’ll start by designing my own post-separator graphic., but I thought it would be interesting to see if I could mimic at least part of his crisp, clean look using Sandbox as a base.

    I’m pretty pleased with the outcome so far. There are areas that still need work (the far right sidebar has a tendency to drop out of place when viewing a single post with Internet Explorer, for example), but the basic look is coming together nicely. I’ve had one person tell me they’re not a fan of the dual sidebars on the right-hand side, but I don’t think that’s going away anytime soon.

    As always, I encourage anyone with an opinion on the design to share it with me in the comments. I know that the archives and library pages are a mess right now, and I’ll post an update when I’ve fixed them, but if you see anything else that seems out of place, needs improvement, or is just plain ugly, let me know.

  • CSS Naked Day 2007

    ·

    Kris Johnson

    Things may not look pretty if you’re reading this on 05 April, but don’t worry, everything will be back to “normal” tomorrow. CSS Naked Day has rolled around again, and this is the second year I’m participating. Today and today only, I’m not concerned about margins and padding, positioning and color. What you’re seeing is the site as it is generated without Cascading Style Sheets.

    Tomorrow, the pretty will return. For now, you get to see KJToo.com with its clothes off.

  • Sitestuff: Blue Zinfandel

    ·

    Kris Johnson

    I’ve tentatively chosen Blue Zinfandel 2.0 by Brian Gardner as the base theme for the blog. I had about a half-dozen themes selected as possibilities; Blue Zinfandel is the one Laura liked best. One thing Laura doesn’t like is the typesetting in the header and the general lack of color throughout. I can see what she means, but I haven’t figured out what to do with it yet.

    A couple of days ago, I read an article over at The Thinking Blog about David Airey, a creative designer and blogger who updated his site design based on feedback from his readers. I’d like to do something similar here. Unfortunately, I’m not a graphic designer and my HTML/PHP/CSS skills are intermediate, at best. Nonetheless, if you’d like to provide feedback and suggestions, I’ll see what I can do to make things better.

  • Annual CSS Naked Day

    ·

    Kris Johnson

    Today is the first annual CSS Naked Day, and if you’re viewing the site on 05 April, it’s going to look very… plain. The CSS, or Cascading Style Sheet, is what makes the site pretty and keeps everything where it’s supposed to be. Everything from colors to font styles and sizes to how lists are handled is accomplished through CSS, and today I’ve disabled CSS on the site. Well, on the blog. I didn’t mess with the forum or the photo gallery because, quite frankly, doing so would involve some serious effort on my part. I’m nowhere near as familiar with the inner workings of SMF (the forum software) or Coppermine (the photo gallery software) as I am with WordPress (the blog software).

    Maybe someday I’ll replace everything with a true CMS and I’ll be able to turn off CSS for everything with ease. Until someone designs a CMS that does everything I want it to and does it elegantly, though, I’m sticking with separate applications to handle the separate functions.

    Anyway, enjoy (or despise) CSS Naked Day. Tomorrow, everything will be back to what passes for normal around here.

  • Internet Explorer can [censored] my [censored].

    ·

    Kris Johnson

    Seriously.

    I spent two hours last night poring over the WordPress template files and the stylesheet for the theme I’m building, searching for some error that would explain why IE was rendering the page improperly.

    Exhibit A (Firefox):
    Exhibit A - Firefox

    Exhibit B (Internet Exploder):
    Exhibit B - Suck it, IE

    See that grey border on the right? It’s supposed to be a solid line from top to bottom, but IE was pushing it to the right partway down, and rendering it twice at the bottom of the page.

    After much frustration, I realized that there must be something “special” about the content of one or more entries on the page. Through trial and error, I managed to isolate the problem to a single entry: a movie review for Dungeons & Dragons: Wrath of the Dragon God. I tried removing any unusual formatting (image float, footnotes) without success. Finally, after hacking the entry to pieces, I removed a couple of lines where italic text wrapped from one line to the next. Voila, no more rendering problem. It didn’t make any sense, but there it was: italics.

    So I searched for “internet explorer italics bug” in Google and I came up with this entry at PositionIsEverything.net. Seems IE doesn’t respect element sizing very consistently. The author provides several good examples as well as a couple of ways to work around the problem. I tried the “overflow: visible” method, which seemed to work until I put the rest of the contect back in the entry, at which point the entire middle section of the page got bumped down below the sidebars in IE (but not in Firefox).

    This morning, I set the width of the rogue element to 95% and voila… all better. Well, except for a little “extra” padding on the right, but that doesn’t actually affect the rendering of the border.

    I’m not finished working on the new theme, but this particular bug as been fixed. IE can still [censored] my [censored].

  • NaNoWriMo Progress Bar

    ·

    Kris Johnson

    I saw that Codeshaman has added a NaNoWriMo progress bar to his blog and I liked the idea so much that I swiped it. I have no idea what the mechanics of his bar might be, but the code behind mine will do the following:

    • Prior to 1 November, display a countdown to 1 November. Note that I didn’t account for the time difference between Willoughby and my server location (Chicago), so it’ll be an hour off.
    • Beginning on 1 November, display a progress bar and a daily target line. The progress bar visually represents the percentage of completion, while the target line displays the ideal word count based on writing 1,667 words per day. Target word count is also displayed numerically beneath the progress bar.
    • Upon reaching the overall target word count (50,000), remove the daily target line (and corresponding target word count) and display a message indicating completion.

    That’s the theory, anyway. I’ll be the first to admit that this little widget is extremely kludgy. Most of the CSS that makes it work feels like a big, fat, inelegant cheat.

    Oh, and of course it doesn’t look quite right when viewed with Internet Explorer. The real kicker is Opera. The version I’ve got (7.0, which I paid for) shifts the whole blasted sidebar about 500 pixels to the right, way off into Never-Neverland. Maybe I should download the latest version. I hear there’s no advertising on the free version these days.