transmothraWhew! So far, Big Urgent Wish passes XHTML 1.0 Strict and CSS level 3*!
I have only done the index page, though, so more work is no doubt needed.
*although, due to the opacity: .6 in the CSS for the thickbox plugin I’m using, it doesn’t validate as CSS level 2
The B.U.G. hunt is on! See if you can find all the problems with my new layout… I’ve already identified the ugly 3rd-tier dropdown menu thing on the navbar at the top, but I haven’t had much time yet to test everything out. fixed Later tonight I’ll tweak it and try to get it to behave itself a little better. Please post your comments here (be sure to include your OS/browser). And thanks!
(Things are bound to be a little on the messy side for a few days while I convert this thing over to the new theme.)
EDIT: Yikes! Single posts & pages are also totally unstyled! fixed
Some projects I am currently involved with/have volunteered for:
I’ve asked not to be paid for any of this, although it’s going to be pretty overwhelming to work all this into a rapidly shrinking allotment of free time. Resume fodder is enough for me for now, and I certainly can’t charge friends for services.
This is the color chart I made for orchestrating and managing the background images/colors when using both a style switcher and a browser sniffer to determine which background, exactly, to display for each area of the page. You might even find it useful for your own layouts. The key is below.
Note that the header isn’t really used, and that the content and sidebars (sometimes), and the drop-downs, post meta-data, and my-own-comments boxes (always) use the same background CSS (once for each subtheme).
In all there are 6 × 3 = 18 different CSS inserts for what ended up being one of 4 types of user agents (1. browsers that cannot handle PNG transparency, 2. browsers that can and receive special message A, 3. browsers that can and receive special message B, and 4) all other user agents).
So, yeah, you can tell that this is becoming a bit of a logistical nightmare for me! Nevertheless, I’m pretty confident that once I’ve got the thing done, it’ll be easy to extend.
I’m trying to make the learning curve for anyone else as shallow as I can. Here’s how it breaks down for anyone wishing to add their own subtheme:
styles.incsniffer.inc
header.php so that cookies don’t retain old style names (there must be an easier way to do this; maybe someone will come along and improve this step so it’s automated; nevertheless, it currently only requires inserting the style names into two lines of existing code, towards the top of the page)Not too terribly bad, I think, all things considered.
Key:
| (A) | header |
| E | navbar |
| B (+C+D) | content |
| (C+D) | sidebar |
| F+G+H+I | contrast |
| J | comment1 |
| K | comment2 (alternating) |
One thing about PHP is that it can get pretty complicated. CSS can get complicated enough on its own, with one class referencing any element on the page, pointing here and there. But when you combine the two… you’ve got something pointing to something which points to something that’s pointing at a thing which references anything you choose. See how crazy this stuff can get?
What I’ve been doing the past couple of days is turning my CSS files into dynamic style sheets, renaming them with .php extensions and serving them up, after preprocessing, as CSS. Doing this allows me to use a thing called a sniffer which looks at the User Agent string browsers send when doing HTTP requests to servers, which allows me to see to what I’m delivering content, $Browser on $Platform (e.g., Safari browser on Mac OS X), so that I can send either PNG images or GIFs. The only real reason for doing this is just because PNGs can be semi-transparent, except that all but the very latest Internet Explorer beta have serious problems reading semi-transparency (called “alpha” transparency).
This is something of a specialty of mine. For those who know me online, my old site was one of the first wave of sites to use semi-transparent backgrounds.
Like I said, this is complicated stuff. So now I’ve got a sniffer going “if $browser equals ‘IE’ on Win, set $imgExt to ‘.gif’, otherwise set $imgExt to ‘.png'”. And then I’m making a PNG and a GIF for every background that I want to see through. Meanwhile, all three subthemes have got several places where they reference $imgFileXX.$imgExt for different backgrounds.
So I’m pointing, and I’m pointing, and I’m pointing, referencing this variable to get to that variable to get to an image file to put in an element. Up until this very moment, I was doing all this without a particularly coherent strategy. That changes. Now. Because I only just now realized that I had been rearranging things trying to come up with reasonable alternative GIF images to send to Infernal Exploiter versions less than 7, and I’ve turned around at noticed that I have left one hell of a wreck in my wake. I now have way too many unused background images (failed experiments), and have tossed the variables standing in for the filenames like so much salad, resulting in a chaotic mess for all the good browsers out there who actually know how to deal with PNG images!
Guess you’d have to be there.
So tomorrow, I’m going to sit and think and make a god damned chart, so I can have a set pattern across all subthemes (e.g., Image5 is for alternate comments, Image10 is for the post background).
As they say, hindsight is 20/20.
Oh, btw, I’ve named the first three subthemes “Leather” (brown and tan spaceship interior), “Saturn” (white, black, and dark teal; very clean and high-contrast), and “transmothra 3.0” (black, smoky indigo, and blue) (this last being a bit of an homage to the final version of my very nicely done old site, thankyouverymuch).
Now that I’ve said all that… it’s probably going to be another week before this thing is actually ready enough to be unveiled. It’ll be worth the wait, I promise.
Sigh.
Having CSS issues with IE (even IE7). Still trying to figure out why. So far, Big Urgent Wish works absolutely perfectly in Firefox and Opera, but in IE7 there’s irrational whitespace to the right (about the width of one of the sidebars), causing a horizontal scrollbar, while IE6 isn’t applying the opacity filter to the center div or footer (a width issue is my first guess on that one).
Once I get these issues ironed out, I’ll upload the thing and see what happens then.
[UPDATE] Just got back from Grog‘s (picking up CDs to review for the Chickenfish Speaks) and groceries. To make a crap day off crappier, on the way there, the “low tire pressure” light came on. Fearing an impending flat, I bolted, stopping at the gas station to pay 50 cents for three minutes of standing in the wind and rain, wishing I had a tire gauge and a flashlight. One tire was missing a stem cap, so that’s probably all it was, since all of the tires seemed reasonably inflated to me.Did anyone see Bush’s press conference today? Scary, creepy, and pathetic. I’ll blog more about that later.
I really only have one thing left to do before I upload and activate the preview of the Big Urgent Wish WordPress theme. It’s a bit of a killer. It’s actually quite easy, but the logistics are making me swoon a bit just now. Mind you, once I have it all down, the installation will be a breeze for anyone familiar with the mind-bogglingly super-easy process of downloading and using a new WordPress theme. (The basic gist is this: download a theme, upload it to your Themes directory, and then activate it. That’s all there is.)
Here’s what I gotta do: because my theme uses semi-transparent PNG graphics for backgrounds in some places, any version of IE under 7 will not display them properly. Therefore, I have a browser sniffing PHP routine to determine what, exactly, the platform/browser are… and, hence, what the User Agent is capable of supporting (assuming UA string spoofing is not taking place).
Thus, by renaming *.css files as *.css.php (the “.css” bit is unnecessary but useful), and by parsing those files as CSS (after, of course, being processed as PHP), I can substitute GIF images instead for the crippled masses.
However, this entails a bit more typing and rearranging than I care to stomache today, so I will put it off until tomorrow (a day off from work).
Incidentally, the name “Big Urgent Wish” came to me one day as I was at my day (read: night) job (answering e-mails for a big-name online fashion retailer), extrapolating on some of the strangely translated phrases we sometimes get from non-English speaking customers abroad. This is not a phrase that was directly written out by anyone, it’s just something I thought up while trying to come up with something to top a goofy phrase I once read. As an aside, I embrace non-English speaking peoples… and, equally, the unusual and poetic, evocative turns of phrase that they can sometimes be capable of producing. Isn’t language even more wonderful from alternate angles?
Big Urgent Wish 3.0 is nearing readiness! The third subtheme has been completed.
Done:
if (function_exists()) or if (class_exists()) loops) for several useful plugins, including Browser Sniff, CustomComments, Gravatars, Landing sites, Link Indication, Now Reading, Now Watching, Popularity Contest, Related Posts, Sociable, ThickBox Plugin, Ultimate Tag Warrior, Viper’s Plugins Used, WP Random Title, WP-EMail, WP-Print, iTunesSpy, muTunes:hover and background: fixed tricksTo do:
Additionally, I’ve decided that it’ll probably launch with just three subthemes, due to time constraints; however, more subthemes will be available later.
Screenshots:
Still working on the new theme. Actually, the theme’s done, it’s the subthemes that are killing me. I’ve got the first one about 90% done, and almost as much on the second. The main thing is separating the stylesheets into usable, selectable chunks.
Boy, is this gonna be purty!
I’m also gearing up for some podcasting for the nearish future. Should be interesting. More details to come….
I think I’m getting carpal tunnel syndrome. Nevertheless, I’ve been doing a lot of typing lately. I just submitted my first batch of CD reviews for the Chickenfish Speaks, a terrific local entertainment zine run by Grog, the former bass player for local rock legends the ¡Oxymorons!.
Also, I’m still hard at work on Big Urgent Wish 3.0, my first real WordPress theme. (My current theme is based largely on the Ice theme.) It’s coming along nicely. I’ve completed the first of three subthemes. But first, a To Do: separate stylesheets into color/layout (possibly separating these further), font size, and font type (serif or sans-serif). Then I need to clean up what I’ve got and then I can finally start to work on the other two subthemes.
Haven’t been feeling 100%, so I’m working on making my own WordPress theme from scratch (though I’ll admit to scraping a little code from other themes). My current theme is called “Big Urgent Wish 2.0”, and it’s based on another theme, but i’ve decided to reuse the name and call it 3.0. This one will be a three column layout.
It’s coming along flamingly so far. It looks beautiful and has tons of really tasty hover effects. Works very well in Firefox, Opera, and IE. It’s a plush, spacey theme, with burnt oranges, ambery peaches, and velvety browns.
I’m also planning on having it support style switching, Widgets, and all of the plugins I currently use. AJAX is under consideration as well.
This will most likely end up being my first public WordPress theme.
Syndication is a really cool way to not ever have to actually come here to know what’s going on at this site. Think of it as “set it and forget it” web surfing. Let me explain.
You can use a news reader or other application (such as web-based apps like My Yahoo!) to read content from this and other sites without having to actually go there. The advantage is that you can see what’s going on in the world around you without ever having the leave the application (or site) that you’re looking at. New articles are delivered to you (instead of the other way around), so you don’t ever have to remember to check in.
For instance, I’ve got my Thunderbird set up with a whole slew of news feeds. Instead of actually checking in with BoingBoing, Huffington Post, Ze Frank, and Pitchfork every day, I let them come to me. I get all of the content I want, delivered to me almost as if it were an e-mail.
You can find all sorts of applications out there that will read news feeds for you and put them all in one place for you to check out.
To add a feed, look for the icon, which may vary from site to site, or a link, usually saying something like “RSS”, “XML Feed”, or some suchlike. Copy the link and add it to your client application (follow their instructions).
You can get feed links for this site toward the bottom of the page, in the sidebar (under “syndicate”). There are links to add this site in a variety of ways.
Special tip: you can append “/feed/” to the end of the URL for any category or page on this site. For example, to keep track of updates on the “podcasts » songs” category, you would use: https://transmothra.com/category/podcasts/songs/feed/
Extra special tip: There’s also a comments feed at jeremyjarratt.com/comments/feed/
See also:
I’ve just finished posting the latest tutorial: HTML Beginner’s Course pt 1. This tutorial covers basic HTML formatting and some common tags. Nothing intensive here, just a crash course in what it is and what it does, with a little bit of the fundamentals. Topics to be covered later include lists, images, links, tables, and CSS.
Get your feet wet now, we’ll be doing some fun diving soon enough! There’s even an RSS feed to the tutorials pages, so you can keep up with the latest tute’s.
This just in: this site is totally the #1 search result on Google for “extinct dog breads”
Victory is so sweet.
New color scheme available. To select, look for the little purple square at the top left of any page on this site.
Using Rob Ballou‘s Styleswitcher, the previous version of which i used on my last site, i’ve uploaded a new PHP-driven stylesheet-switching system. You can see on the left hand side that there are now options for the color scheme, the font size, and the font face (serif or sans-). I also changed the default from a black background to a white one to make it look a little less like a 13-year old Marilyn Manson fan with some design potential did it.
Not very friendly towards IE6-, but IE7 is around the corner, and you should be using a better browser anyway.
Cleaned up a little bit, tweaked out the CSS, and created some image galleries.
Finally! My online portfolio is nearly finished… The only thing left to do now is to acquire the main files from my most recent project and remove all proprietary informations.
I thought i’d NEVER get that shit done. That last one was a bitch to nail down – it turned out that it made much better sense to lose the damn b2evolution blog and just write in static content.
Well, it’s been taking forever, but finally!, my portfolio is online and pretty much more or less all (well, most) of those old dead sites are recreated and re-animated and essentially living again, albeit with synthetic blood this time around. Don’t look them too closely in the eyes, as there is no more soul in them as there is in an idiot, slack-jawed goldfish.
It’s been quite a learning experience… in fact, it really is amazing that i got away with such junk HTML in some of those sites. Actually, on the most prominent website i ever did, i actually used double-quotes within inline CSS. Which effectively turned off succeeding CSS rules, and invalidated the whole mess. It’s quite lucky, i’d guess, that anything worked at all in some cases.
There’s just a couple more sites to put up.