Home > monochrome_lq

Welcome to my new Ode site! More...

Thu, 23 Sep 2010

Inroducing Monochrome

After solving a strange rendering bug in IE, I'm finally done with my first Ode theme. It's called Monochrome, and it was inspired by the monochrome monitors that introduced me to an exciting new digital world when I was a child. I don't know how many hours of my childhood were lost in those green scanlines, but they paved the way to a decent career.

         @   @
|                     |
|  continued below... |
|                     |
         | ||
         | ||
Some things to note:
  • For optimum viewing, this theme assumes a minimum screen resolution of 800 x 600.

  • This theme was developed using Ode 1.2.2. If you're still on Ode 1.2.0, then remember to insert the $found_theme_url variable in the page.html and page_no_posts.html template files.

  • This theme has been tested in Internet Explorer 6, Firefox 2, and Google Chrome 5 on Windows XP Professional SP3 only. There is a known issue in Chrome where the sidebar's left border becomes visible when the zoom level is increased or decreased. This is currently fixed with some simple JavaScript, but I would prefer a more elegant CSS solution.

  • This theme adheres to the semantic Web school of thought that there should only be one H1 tag per page. In Monochrome, the H1 tag is reserved for the site title, with each post title using the H2 tag, and post subheadings using H3–H6 tags. I had to modify the Markdown addin so that it only generates H3 to H6 tags. In the modified Markdown addin, underlining text with equal signs (=) is equivalent to leading the text with three hash marks (###); underlining the text with dashes (-) is equivalent to leading the text with four hash marks (####). Text prefixed with # or ## will NOT be converted to headings. The modified Markdown addin is also included in the theme pack.

    Of course you don't have to subscribe to this school of thought, and many people don't. This debate (how best to use heading tags as it relates to SEO and accessibility) has been going on for a long time, and I don't think anyone has a definitive answer. I recommend doing research on the matter to see what works best for you. Here are some articles offering different opinions to start with:

    Multiple H1 Headings are Valid, But...

    HTML 5 to the H1 Debate Rescue?

    Multiple H1 Tags: Rules and Exceptions

    Semantic Uses of <h1>, <h2> ... <h6> HTML Tags

    The Definitive Guide to Semantic Web Markup for Blogs

    Semantics, HTML, XHTML, and Structure

    Creating Semantic Structure

    What is the Semantic Web?

    If you decide that you're OK with multiple H1 tags on a page, then you don't have to use the modified Markdown addin. However, you'll have to modify the CSS so that H1 to H6 headings are formatted correctly inside the 'individual_post' div.

  • No images are used in the theme to keep with the Monochrome spirit (monochrome monitors generally didn't use graphics mode, after all). The ASCII header "image" was generated by ASCII Art Generator. Feel free to replace it with your own creation.

  • The Jumper addin uses a custom ASCII art landing page separator. A lot more ASCII art can be found on the internet. Google is your friend.

To-do list:
  1. Create a liquid Monochrome theme
  2. Fix Chrome issue mentioned above without relying on JavaScript
  3. Implement my theme color changer in the sidebar (see Preferences on Bitmess)