Main Points

  • Early Style Sheets Our first foray into playing with styles. These examples don't even use real CSS, they're just playing with color palettes with a single style rule four lines long.
  • Revised Style Sheets Real CSS controlling several different styles. Now we'd like to change them on the fly, and give visitors the chance to customize their look.

This didn't really go the way we had intended. At this time it's sort of a dead end, though ASP.NET personalization may provide us a way to reopen this if we choose to. However, the javascript method bombed out and was totally over our heads. We also fundamentally decided that until we really knew what we were doing, we were much more likely to muck the accessibility up rather than improve it. Assistive devices already provide a whole range of options for dealing with "normal" webpages; yes they're generally screwed up, but they're screwed up in specific ways that accessible technologies are built to compensate for. Building pages that are "screwed up" in a totally different way won't help anyone. It is significant that you'll see this is how we initially began to study stylesheets and CSS, and once we moved out of this phase, we settled down to writing solid best practices CSS and not looking for tricky gimmicks.

Early Style Sheets

We are also working on style sheets. You can see our basic style on this or any webpage. I would like to convert the whole thing formally over to CSS, so we can use one *.css file to manage all the webpages. It doesn't really matter currently, but it's the only way to control a uniform style for the website that we can change. The sooner we do it the fewer pages we'll have to apply this solution to. The reversed colors section below has evolved since I found a !@%#$*@%$# Javascript that should give visitors the ability to choose between several styles on the fly. Oh, except I can't get it to work!

I'd like to include this CSS selector on the navbar, assuming we ever figure that one out as well. I'm hoping to figure out enough CSS to post some examples here. You know... in between updating the Beta site, redoing the content pages I lost when we switched, (especially Map Central), and trying to learn Javascript *grumble grumble* So, I really intend to give you some examples to look at on this, but please be patient.

[chroniclemaster1, 2005/11/15]

OK, I guess that wasn't too bad for time. Thanks for being patient. Here are the basic templates for five different styles, although I'm still figuring out calling an external style sheet so for these pages it's all done inline. I'm also moving backwards on the CSS selector, the script I found is free of "charge", it's nothing like public domain, so I just deleted the idiotic thing. Looks like I'll have to find someone to program one from scratch. *sigh*

  1. Style 1 - Normal (Black on White, Best for Printing)
  2. Style 2 - Sepia Tone (Dark Brown on Tan)
  3. Style 3 - Current (Neon Green on Black)
  4. Style 4 - Fire (Neon Orange on Dark Brown)
  5. Style 5 - Ice (Cyan/Sky Blue on Navy Blue)

[chroniclemaster1, 2005/12/06]

Revised Style Sheets

Here are the latest set of styles adapted in real CSS. The master CSS file chroniclemaster.css simply uses @imports to summon ec.css (which has all the structure and a basic style) and a custom css file, like ice.css (which has all the design). {Of course, these six are faked so that they don't change as the master CSS file is updated, embedded @imports call the individual CSS files. Changes to the individual CSS will update here; that should be a good look at how future changes could backfire.} Now if we could shift between style sheets on the fly; these CSS looks are in external sheets but which ones are hardwired into the XHTML.

  1. Style 1 - Normal (Black on White, Best for Printing)
  2. Style 2 - Sepia Tone (Dark Brown on Tan)
  3. Style 3 - Current (Neon Green on Black)
  4. Style 4 - Fire (Neon Orange on Dark Brown)
  5. Style 5 - Ice (Dark Navy on Light Blue)
  6. Style 6 - Black Ice (Cyan/Sky Blue on Navy Blue)

[chroniclemaster1, 2006/12/05]

After we completed this phase, it became apparent that our initial goal, providing website accessibility would actually be hindered by the javascripting rather than helped by the CSS design we were doing. While we haven't ruled out custom style sheets, it's a topic for user personalization not accessibility. We'll look at this again using ASP.NET personalization capabilities when we start adding login capabilities for users who want to customize their experience on Earth Chronicle. Our CSS development continued - and with a little javascripting resulted in the new menu driven navbar - in the XHTML Changeover section.

[chroniclemaster1, 2009/04/03]