Speak Stiltedly and Wear a Yellow Shirt

As you can see, the pure css tabs have been implemented on all my main navigation pages. Here the tabs are floating buttons, but their position should still be the same as on the other pages. Styleswitching for the blog has been disabled, but there is a new demo blog for that. All twelve stylesheets were downloaded with every new blog hit, so they were a bandwidth drain that had to go. If you really want a different stylesheet, vote for one in the comments section and I may adapt the winner to the new tabbing format.

Each tab section has a slightly different style adapted from previous stylesheets rather than coded up fresh. If you’re interested in the previous style, there’s a demo javascript in the style section somewhere (now part of About), and most old pages are still around, renamed index_notab.html or the like.

The TOS, MIS, VOY, Jade and MJB pages are various adaptations of my original Trek stylesheets, which I designed almost three years ago to work in any browser. TOS now, appropriately, bears my favorite original-series command-yellow theme. MIS has become the home of the Borg Species List and so got the Borg green and black styling. The new VOY color is green, from a stylesheet I made for Jade a while back and always liked, though she preferred blue. MJB has never objected to the orange. (To shorten the tab list, Jade and MJB tabs are available only on the Home page and their respective pages.)

Most of the other styles date from a later period of boxy style and fun tricks with borders which influenced some of my tab design choices, especially that of placing a margin all around the tabbable text rather than bisecting the page with the tabbing line as at diveintomark. Buffy is still the simple, snake-that-ate-Sunnydale green that I slapped together for her during my brief vamp fanfic phase last year. The home page and this one surviving blog style share my favorite sushi-inspired colors. The new About section incorporates the old style pages and uses the basic tabbing style I put together for the original demo.

Since I enjoy bright, bold colors on my main pages, I’ve always been concerned to ensure readability of my story pages. Fan fiction is all too often found against busy background images or in white text on a black background. I prefer a sans-serif font, black text and a slightly off-white background. I made a special story subclass (a div) to make those changes to story pages without having to break out of the tabbed navigation scheme. So far I’ve marked up MJB’s two stories and the Voyager quotes in the story style, but full incorporation of stories into the navigation scheme will have to wait until their conversion to XML so I can run them through XSLT.

I used PHP on my home server (which is to say, my old Powerbook running OS X and therefore Apache) to insert the tab lists and new headers and footers automatically. I wasn’t sure Freeshell was up to the stress of serving PHP, so I just used wget to transfer the HTML versions over here.

The most difficult part of the conversion process was integrating the blog style into the tabbing stylesheet; that effort seems to have broken Opera 7 in the new pages though the demo works fine. I suspect the changes I made to integrate the blog header and description (”Cheating on the Kobayashi Maru…”) have broken it, either by allowing the h1 to grow too big or confusing it with the body margin-top of 20px, though neither seems to correspond to any known Opera 7 CSS issues. It shouldn’t be too hard to fix.

Netscape 4 doesn’t choke nearly as much as I’d expected, except here in the blog where it displays its usual problems with MovableType stylesheets (upon which this one is based). I haven’t decided whether to reinsert my basic stylesheet for Netscape 4. I should check the logs to determine my current percentage of readers stuck in the past.

This entry was posted on Tuesday, May 27th, 2003 at 12:16 pm and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.