Speak Stiltedly and Wear a Yellow Shirt

After Windows ate her Mozilla installation, I convinced Jade to download Netscape 7. It’s just like Mozilla, except more bloated, with more popups. AOL’s not about to leave in the no-popup checkbox when they’re one of the worst popup offenders on the net. Don’t despair, though - ad-blocking can be restored easily with two clicks, thanks to the Unofficial Netscape FAQ.

On the style front, I wrote up something resembling instructions for all the recent blog geekiness. I’m also considering a change to my tan boxy pages, since they look too green on Windows. Green is for Buffy.

I couldn’t help myself - I had to convert the technicolor blogger template I found a few entries back to Moveable Type. You can see it by clicking on the Technicolor link, or (soon) by visiting the sample blog.

Be warned, however, that the technicolor blog is somewhat processor-intensive, since the entire page changes color slightly every half-second or so. Also, it tends to leave color behind, so be sure to reload the page if you
switch to or from the Technicolor style.

The Latin text for the sample blog came from Lorem Ipsum’s Lorem Ipsum generator. If you need sample blog text, you can use the MoveableType import file I used to generate the 18 entries of my sample blog: loremipsum.txt. Note that
the entries have old dates and will not show up on the main page of a fresh
blog unless you change the MTEntries tag of that page to include lastn=”7″ or whatever number of entries you desire. I set MT to do the dates in Portuguese for that blog; it was the closest offering to Latin, but is different enough to do the nonsense-Latin theme justice.

I’m making a separate blog for Technicolor because it requires javascript, just like the style switcher, and I had to mesh the two scripts somewhat in my
main blog to get them to work together. I also made my sidebar unusually narrow, because that’s my blog style. In the sample blog, it’s wider and includes
the MT default calendar. Full instructions for using the stylesheet and javascript are included in those files: colorswitcher.css and colorswitcher.js. (As always, right-click and download if you can’t see the raw file in your browser.) You may want to cut out my instructions once you’ve followed them to reduce download time. You must leave Eric Costello’s header, however - those are his terms of use.

I’ve also changed my approach to backwards-browser compatibility again, so the Netscape 4 Khaki stylesheet has been taken down. This time, I put in a persistent stylesheet that looks almost like no style at all (persistent.css, if you’re curious). That way, it lurks underneath all the switchable styles, doing (hopefully) nothing, and for users with backwards browsers, it shows up just like Netscape 1.1. Yes, it’s backwards-compatibility with a vengeance. I was actually trying to fix the download delay problem; I’m not sure yet whether I’ve succeeded.

I almost forgot to mention that I made a second LCARS stylesheet, too. Like the first, it only works with Mozilla, Mozilla-derivatives like Chimera, and possibly Netscape 7.

I’ll get over my current geek phase soon, at least in time for NaNoWriMo, but for now, I’ve tweaked LCARS-1 for better text color and tracked down the source of that eye-bleeding technicolor blog template that was driving Seema and me crazy a while back: eric costello, with another good CSS resource.

In the quest for style I’ve also glanced at the W3 CSS Validator and some sites devoted to blog templates: Blogstyles and its sister site Blogplates. That’s all I could manage and work, too.

LCARS stands for Library Computer Access and Retrieval System, and is the bane, or the Holy Grail, of Trek web design. I’m all for controversial designs based on authentic Trek colors so I’ve made an LCARS style sheet for MoveableType. There’s just one catch: you have to use Mozilla to see it. Netscape 7 would probably also work, but IE is counterindicated.

Usually LCARS sites are nasty table-based graphics-heavy things, but by specifying curved borders in your stylesheets, you can reproduce a Star Trek-style computer console without a single image. Only Mozilla supports curved borders, using the -moz-border-radius tags. I am not responsible for what you see if you click the LCARS-1 link in an unsupported browser.

Besides sprucing up the archives page, I also spent some time blogsurfing for good MT style. I found someone’s old entry on the issue of stylesheets and images - that is, how people who use CSS for web design look down on images. I hadn’t thought about it, but I also have a ingrained prejudice against images, which probably dates back to the days of Netscape 1.1 and plain grey pages with plain black text and plain blue links. It doesn’t help that I still connect with a 56k modem over a bad phone line - images make me run screaming the other way.

I did surf into some nice uses of images in blog design, though, in the rather restricted arena of banners and backgrounds: take a look at a plain banner, a fancy banner, and a banner that’s also a fixed background image.

On a mostly-unrelated Trek note, I saw “Time and Again”, one of the very first episodes of Voyager, recently with Dr. Deb. I annoyed her to no end by exclaiming how cute Janeway and Paris were together. The technobabble was a bit painful, but the episode was relatively good for first season Voyager. I should also confess that I saw Enterprise: Return of the Shower Scene this week while I was waiting for The Twilight Zone to come on. There was absolutely nothing interesting about the episode - but then, similar comments have been made about “Resolutions,” the sleeper that spawned an entire shipper movement.

I think it’s safe to say I will never write Archer/T’Pol.

The style switcher seems to be working fine now, though there’s an odd delay loading the first styled page over slow links in certain browsers. Perhaps it has something to do with browser support for preferred stylesheets. In my fruitless investigation of the issue, I learned that the technical meaning of a preferred stylesheet is one with a LINK rel=”stylesheet” statement that also has a title attribute. If you have rel=”stylesheet” but no title, the stylesheet becomes persistent, which means that style in that file should apply to all the alternates as well. I’m not claiming it works - this is all rumor, hearsay and specifications.

I finally got around to adding switchable style to the search templates. (There’s a search box partway down the menu on the main page, if you want to try it out.) The two search templates can be found in a folder called =search_templates= at the same level as the MoveableType cgi scripts. You have to edit them in a text editor, since they’re not accessible through the MT interface in this version (2.5). You can import a template module into the search templates, but if you run more than one blog through the same MT installation, you might want to look at the manual before trying to use modules.

Some browsers (which is to say, Chimera) didn’t run my styleswitcher’s onload function in TrackBack popups, presumably because there was an onload attribute in the BODY tag of the TrackBack popup to seize the focus. I figured that was less important than supporting Chimera users, so I took it out, but it probably wouldn’t bother most people if it were left in.

I’ve stumbled across some nice MT stylesheets now that I’m on the lookout for them. Tapestry use a stylesheet for the archives, while the main page adds table layout. There’s no reason the main page couldn’t be done with CSS, also. The colors, while somewhat web-unsafe, are lovely.

Moveable Blog is clean, clear, and a great resource for MT users. My first TrackBack experiment will be pinging that blog from my first Moveable Style entry. Look for it over there.

Being unable to leave well enough alone, I’ve added another stylesheet (Salmon Roe) and an improved version of styleswitcher.js which also handles the Netscape 4 issue.

The first change in mystyleswitcher.js is setting the cookie at the time a new stylesheet is chosen, rather than when leaving the page as the original script did. This fixes the odd instances where you switched styles, then opened a comment window which then appeared in the previous style. I thought this was important for checking out stylesheets and also cutting down on cookie (re)setting in general, though if the cookie gets corrupted the user will get no style at all. (Thanks to Jade for discovering the bug.) That situation can always be rectified by selecting a new stylesheet manually.

The Netscape 4 handling is just something that seems to work. I changed the javascript function that was used to look up the first stylesheet (that was, the one with a rel=”stylesheet” instead of a rel=”stylesheet”) so
that it would look up a stylesheet with “Default” in its title instead. [I’m not doing it this way anymore - I just hardcoded the name of my default stylesheet to save computing time. To see the code for finding a stylesheet with “Default” in the title, check out the broken switcher. (That wasn’t the broken part.) To see the original code for finding the primary stylesheet, see the original switcher. The function is called getPreferredStyleSheet() in both places.]

In effect,
this gives two default stylesheets, one for browsers that can’t do the javascript switching at all (that is, the rel=”stylesheet” one), and another for browsers that can (with title=”Default …”). I already had a default stylesheet for this blog (Classic Khaki, whose real title is Default Khaki) as well as a version of it I’d dumbed down for Netscape 4 (Netscape 4 Khaki, a.k.a. For Older Browsers), so I
just put those in the appropriate spots.

Next time, I’ll make that Ume Shiso Maki stylesheet, and perhaps spruce up Lavender’s Blue.

Take A List Apart’s article on style sheets, MoveableType’s set of default styles, one geek, and one holiday weekend, and you get…Switchable Type. Click on the various links under the Style header in the menu (probably directly to the right, unless you’ve strayed from the main page or have already changed styles).

How to do it yourself: (You may have to right-click on some of the following links and save them, if your browser won’t display them.) First, you need a set of CSS stylesheets to switch between. I used a couple that I had already made for MT, plus the full set of seven from the MT website. Each of the stylesheets must be listed in the header of the pages (that is, at the top of each page template in MT), in the usual place for LINK tags, and must have a title element:

If you’re using Mozilla, you can already switch between these styles from the View menu. Otherwise, you’ll need a javascript program to do the actual switching, styleswitcher.js. The javascript must be loaded by every page in the blog (or site) so it should be left in a separate file and loaded with a line in the header (near the LINK tags) thus:

Next, you need the links that will run the program when clicked. As an added bonus, the javascript program includes a cookie to keep track of which style has been selected, and remembers it from page to page. All pages must include the javascript itself, and the LINK tags, but the switching links can be put on just the main page. These HTML links call the function setActiveStyleSheet, according to the title listed in the LINK tag:

That’s all it takes. Feel free to grab my copies of the MoveableType style sheets as well as my own stylesheets for MT, or, if you’re working on a switcher for a website rather than a blog, take a look at the style section of my site for more generic style sheets.

The most irritating part of the process is editing each of your MoveableType templates to include the LINK tags and the SCRIPT line. For full style effect, you should do every template, including the ones you click to edit and the hidden search template. There’s a lot of clicking, pasting, and saving involved. I ended up linking all the templates to external files and making my own template modules to simplify matters, but even then it was the most time-consuming part of the process.

Templates are the peskiest part of blogging. MT is ahead of the pack, but it would help if all the templates were linked to files automatically the way the search template is. They could at least provide a power-editing mode for templates (indices, archives, and modules) so you could create them or link them to files in one fell swoop.

Another pesky MT problem I had was with the blog description, right under the blog title. The on-page blog title became an H1 header in the latest MT templates, which was all right and compliant and good, but the description beneath it was wrapped in SPAN tags, rather than DIV tags. I went through some trouble trying to figure out why I couldn’t reduce the H1 margins (at least in Chimera, my home browser), until I switched that SPAN to a DIV. My change doesn’t seem to do any harm to the MT stylesheets - I’m not sure whether those work properly without my change, or, if they do, why they do.

I’ve made a new stylesheet for the occasion: Lavender’s Blue. One other thing I should do is rewrite styleswitcher.js so that it forces Netscape 4.x to use the stylesheet that’s safe for old browsers. I’m not sure old browser-users can use the switcher at all - I’ll test that tomorrow. If they can, I may leave it up to them to click the link for paleo-browsers. Browser detection is not my cup of tea. I’d rather make more stylesheets.

So I’ve decided to handle my desire for infinte colors and designs by making stylesheets, a la the old Mozilla start page. Complete instructions for live stylesheet swapping can be found at
A List Apart. I also
found a cool and geeky blog, Dive into Mark.

In honor of my new version of MoveableType, I though new templates
might be in order. In fact, I thought I might even be wild and crazy
and use web-unsafe colors. I’m a rebel.

Familiar I am, in the web-Jedi way, with the 216 web-safe colors,
meant to guarantee consistency across different monitors, operating
systems, and color depths. I know where to find the websafe colors
listed by value, href="http://www.lynda.com/hexh.html">hue, or whatever. I
am intimately familiar with Visibone’s lovely href="http://html-color-codes.com/">color arrangements; I’ve done
my time in their color
lab.

Rumor has it, there are only href="http://hotwired.lycos.com/webmonkey/00/37/stuff2a/complete_websafe_216/reallysafe_palette.html">22
truly safe colors. Although three of those colors are my
favorite sunshine-yellow spectrum, I cannot advocate such
extraordinary abstinence in web design.

Yet there comes a time in a webmistress’s life when #ffff00 just
doesn’t cut it anymore. Where does she go for illicit colors, for
the #a4b217 her mother warned her against? After asking a
few unsavory characters, I came across a page devoted to using href="http://www.mlwebb.com/color_palette.htm">an unsafe
palette. Behold the href="http://www.childoflight.org/mcc/colorcodeAA.html">yellow!
Mix and match your
poisons. Read a href="http://www.morecrayons.com/weblog/">color blog.

Watch this space for a whiter shade of pale…

The minute, practically the second, I upgrade MoveableType, they come
out with a new version. Now I have to upgrade to 2.5, since I’m so
on top of things at the moment. Somehow, Bill of mt.el fame found my
post, despite it being only a day old, and freeshell being
down most of today. I haven’t even figured out this thready pinging
stuff yet, so that can’t be what led him here.

Anyway, for Bill’s information, I’m running Emacs for MacOS X, and I
built it from the CVS source just a few posts back. I assume that’s
why it didn’t have any packages installed. I’m not sure they’re all
that happy now that they are installed - emacs froze during my
“whoo-hoo” post last night. The post got through, but emacs never
returned to operation. Perhaps the problem was that I was re-editing
the post I’d just edited. Or perhaps the problem was the general
Carbon emacs problem with spawning subprocesses that I was hoping my
bleeding-edge emacs build would cure, but didn’t. Sigh.

That’s more geekiness than anyone wants to hear. I suppose I should
head over to the freeshell bulletin board and see what the downtime
was all about.

[P.S.] It was just a disk upgrade, and some good news: freeshell
is now tax-exempt.

[P.P.S] I almost forgot the Link of the Day: href="http://diveintoaccessibility.org/table_of_contents.html">Dive
into Accessibility, thirty days to HTML Correctness.