Categories
creative uncategorized web design

new wp-theme preview: “transitory”

I’ve been hard at work the past couple of weeks on a new WordPress theme i’m calling “transitory.” It’s not as cool of a name as Big Urgent Wish, but i tried it on and it stuck.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" Layout
"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change. 

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

transitory screenshot
"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

Categories
uncategorized

new wp-theme preview: “transitory”

Originally published at jeremyjarratt.com. You can comment here or there.

I’ve been hard at work the past couple of weeks on a new WordPress theme i’m calling “transitory.” It’s not as cool of a name as Big Urgent Wish, but i tried it on and it stuck.

My goal with this theme was to have a much, much cleaner page, without too much extraneous information clogging up eyeballs. Here is how i’ve decided it will eventually be layed out:

"transitory" Layout

"transitory" layout (click to enlarge)

Note that the colors are arbitrary in the above layout and will change.

And now here is a screenshot of it in action. Note the final layout has not yet been 100% applied. Also note the cool city background, which is blacked out underneath content boxes. Trust me, it looks much cooler than this. The menu to the side is being rewritten with jQuery, and will fold out when needed, and collapse when not needed.

transitory screenshot

"transitory" screenshot (click to enlarge)

At a guess, i’d have to say that it should be completed in about another week or two. So… a month, maybe? I dunno. You’ll see it soon enough.

All comments (good or bad) welcome!

Categories
creative internets uncategorized web design

back to the drawing board!

I’m working on a project for a friend right now involving WordPress, which has got me excited enough to go ahead and overhaul this site once again.

So i will FINALLY be upgrading my WP installation and fixing my ACTUAL theme once and for all! I hope to have this completed by the end of the summer.

I promise to make it a whole lot cleaner, too, in layout if not in language.

That is all.

Categories
creative internets uncategorized web design

Big Urgent Tweak Test

Look out for my B.U.T.T.! I’ve just finished uploading some tweaks to make the Big Urgent Wish theme a little nicer. Please, as always, wear your helmets, and let me know if anything falls on your head. I could always use a good laugh.

I hope to have a sanitized version available soon.

Categories
creative internets uncategorized web design

Validation

Whew! 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

Categories
creative internets uncategorized web design

Big Urgent Garbage Hunt

The B.U.G. hunt is on! See if you can find all the problems with my new layoutI’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

Categories
creative internets uncategorized web design

color layout chart

color layout for BUWThis 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:

  1. Create CSS for layout and color
  2. Add style to styles.inc
  3. Add any needed sniffer-generated CSS to sniffer.inc
    1. This is really for generating either translucent PNG or GIF, depending on browser
    2. Obviously, this also entails creating both a PNG and GIF version for each translucent background
  4. Edit 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)
  5. Upload and enjoy!

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)
Categories
internets web design

Know Where You Laid Each Part

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.

Categories
creative internets uncategorized web design

Big Urgent Wish coming together

Big Urgent Wish 3.0 is nearing readiness! The third subtheme has been completed.

Done:

To do:

  • Set CSS as PHP so can sniff browser/platform and deliver either semi-transparent PNG or GIF format backgrounds as User Agent supports
  • Download, install and support additional plugins
  • Test for bugs
  • Figure out which additional files are needed outside the normal Themes folder
  • Make sure I’m conforming to WordPress standards as much as possible!
  • Upload to server, test more
  • Fresh install on fresh, live WordPress test installation
  • Fix any and all bugs!
  • Write installation notes
  • Create ZIP archive of necessary files
  • Upload and tell folks!

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:
Big Urgent Wish, subtheme threeBig Urgent Wish, subtheme twoBig Urgent Wish 3.0

Categories
internets life uncategorized web design

Big Urgent Wish

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….
Big Urgent Wish, subtheme twoBig Urgent Wish 3.0

Categories
CDs internets life local media

writing reviews and code

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!.

Big Urgent Wish 3.0
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.