Undercover Operative 2.00

Theme Update 2.01

Sat, 03 Oct 2009 12:14:55 +1200

Theme Update 2.01:

Added support for selectively including followees
Cleaned up display of A tags in the side side bar
Moved font-family declaration to BODY tag instead of *. (Decided not to include font selection customization.)
Corrected bug: some footer elements were missing their class name.

ninjineer: Neuschwanstein Castle - Seen from the road up to it...

Sat, 15 Aug 2009 10:07:21 +1200

ninjineer:

Neuschwanstein Castle - Seen from the road up to it — (Photo taken 2006-07-30)

Theme Update 2.00

Sat, 15 Aug 2009 09:41:00 +1200

Theme Update 2.00:

As hinted at in the post below, the look and feel of this theme has been completely revamped.

If for some reason anyone prefers the earlier version, it can still be obtained here.

MFUs Travel In Packs

Sat, 15 Aug 2009 09:31:39 +1200

ninjineer:

A Little Background

A while back, I submitted a theme to the the Theme Garden that was rejected with the ever-so-helpful feedback, “Does not fit accepted Tumblr blog aesthetics.”

This came as something of a disappointment. I looked but saw no obvious technical flaws or egregious style violations. I was left with an irritating conclusion: the reviewer just did not like the way it looked.

I became indignant at that point. While I grant that the theme did not possess universal appeal, I also felt it was the equal or better of many themes already in the Garden. In light of this injustice, my enthusiasm for theme-ing withered, and I focused on other interests for a time.

Eventually, I took another look at my rejected theme. I did so with new eyes and discovered there were some aspects I no longer found so aesthetically pleasing. I conceded perhaps the reviewer had had some basis for his judgement after all.

All was not crap, though. Some elements I still found innovative. I decided to return to the drawing board, so to speak. Over the course of a week, I evolved a new prototype theme. The new incarnation incorporated several new ideas with all the things I liked best from the original theme.

Apply Palm to Face

With the new prototype in shape, I set to convert it into the format of an actual Tumblr theme. During this process I had occasion to reference the original theme’s source code. The following line of code jumped out at me:
<h1><a href="/">Undercover Operative</a></h1>
That line is perfectly correct. For a prototype. For theme source code it should have read:
<h1><a href="/">{Title}</a></h1>
The later fills in the blog’s title with whatever value the blogger defines. This behavior is expected of all general purpose Tumblr themes. The former sets all instances of the blog to have the same title, which is a clear violation of the aesthetic rules.

A technical flaw existed all along.

Myriad Emotional Responses

As that realization sunk in, I experienced a number of emotions:

Chagrin — I strive for perfection in my writing, whether it’s prose or code. Mistakes where I know better are unacceptable, even if they occur with distressing frequency. Sure I’m human, but I don’t have to like it.

Annoyance — If instead of tossing out a generic, all-encompassing boilerplate rejection, Tumblr had offered something specific I probably would have found the problem. Something like “Theme is missing a required variable” would have been sufficient.

Regret — While Tumblr makes an easy scapegoate, truth is I made the mistake. I caved into doubt. I robbed myself of my enthusiasm. These are all my missteps, my failings.

Gratitude — If the theme had been accepted, I never would have iterated the design. With a second go-round, the theme is much improved, even if I say so myself. I’ll post it soon, and you can judge for yourself.

Rest In Peace Version 1 … Long Live Version 2

Sat, 15 Aug 2009 09:29:13 +1200

Rest In Peace Version 1 … Long Live Version 2

Skin Your Tumblelog

Sun, 05 Apr 2009 15:32:00 +1200

Skin Your Tumblelog:

Instructions for the Adventurous

Suck the theme down to your computer. It’s waiting for you at the link above. (IE users beware: When saving make sure the file extension is .txt; IE will mistakenly try to force it to .htm)
Jump to your Tumblr Dashboard and click the “Customize” link.
Select the “Theme” tab
Click on the “Use custom HTML” link.
The screen will change to show you the actual source code for your current theme. Delete all of it.
Copy all the text from the downloaded theme file and paste it into the white text area.
Click the “Save changes” button

Feedback

Rob Boylan created this theme. Problems or praise? Let him know at [ rjboylan ] at [ gmail ] dot [ com ].

Rounded Corners

Sun, 05 Apr 2009 15:22:26 +1200

If the corners of the posts and the side bar items are not rounded, it means you’re viewing the theme with a browser that does not support this CSS3 feature (*cough* Internet Explorer *cough*).

Palm trees swaying in the breeze.

Sun, 05 Apr 2009 15:21:10 +1200

Palm trees swaying in the breeze.

"Any sufficiently advanced technology is indistinguishable from magic."

Sun, 05 Apr 2009 15:19:05 +1200

“Any sufficiently advanced technology is indistinguishable from magic.”

- Arthur C. Clarke

Lame Joke

Sun, 05 Apr 2009 15:16:07 +1200

Guy: Knock, knock!
Gal: Who's there?
Guy: Orange
Gal: Orange who?
Guy: Orange you gonna let me in?

Weezer - Pork and Beans

Sun, 05 Apr 2009 15:15:25 +1200

Weezer - Pork and Beans

20 Seconds of Silence

Sun, 05 Apr 2009 15:09:11 +1200

20 Seconds of Silence

Step 10:

Sat, 04 Apr 2009 15:43:05 +1200

With the previous step, the theme was nearly complete. Only, there were a number of non-obvious problems, especially if the window was narrow or the followed list was extensive. Trying to correct these issues only seemed to raise other problems. I came to understand much of fault lay with the way I had originally structured the page. Rather than attempt to wedge in the necessary modifications, I started over with a blank HTML document and added back working elements or inserted others as needed.

During the process, I realized much of my earlier woes were a result of the floats and negative margins I’d used for the followed images. After considering the situation, I came up with a much more elegant way for achieving the same thing. I liked it so well, I changed the main portrait to work the same way. As a result, that too became clickable.

Step 9: I added a side bar for holding the user-supplied...

Sat, 04 Apr 2009 15:40:57 +1200

Step 9:

I added a side bar for holding the user-supplied description and for listing followed tumblrs. I also expanded the posts to fill the remaining whitespace.

This snap shows the Search field repositioned. This was a temporary move. I was trying to isolate why there was extra space to the right of the field. I still don’t know why it’s present. I’m pretty sure I didn’t place it there. Eventually, I decided I could just live with it.

Step 8:

Sat, 04 Apr 2009 15:39:00 +1200

Giving each post type a color did not work well in my tests. It produced a riot of color. I decided to try it with just one color. Picking that color was tough. Here’s a sampling of the colors I weighed:

#900

#600

#090

#060

#009

#006

#099

#066

#033

#909

#606

#ff0

#990

#660

#444

#666

The red (#900) I had used in the header and footer seemed the obvious choice. Thing is, I had already done red and black and white. I settled upon the blue-green (#066). This meant changing the colors in all the supporting images (it is for this reason that the highlight color is not a user-selectable option).

Step 7: Naming the post types suggested handling the information...

Sat, 04 Apr 2009 15:37:00 +1200

Step 7:

Naming the post types suggested handling the information specific to each post in a similar manner. I gave each item a theme-appropriate title.

I scrapped the graphical post top and moved the date to just one of the other post fields. The permalink moved to sit next the post type.

With all this new vocabulary, “Secret Agent” seemed weak, so I upgraded the theme name to “Undercover Operative”.

Step 6: My next inspiration was that each post type should have...

Sat, 04 Apr 2009 15:35:38 +1200

Step 6:

My next inspiration was that each post type should have a distinct color. This led me to also labeling the types using “secret agent” vocabulary.

Step 5: The variably wide buttons were a problem. The elasticity...

Sat, 04 Apr 2009 15:33:58 +1200

Step 5:

The variably wide buttons were a problem. The elasticity was not a firm requirement, so I made a 100-pixel wide parallelogram and set it as the background where I needed buttons. At the time this snap was taken, there remained an alignment problem with the button text, but that was later resolved.

I was not happy with the post tops I had previously tried, so I implemented a new version. This one incorporated the post date and a triangle for the permalink. Also, the slants in it were parallel with those in the buttons. That consistency appealed to me.

The other new feature with this iteration was the inclusion of a Search field. It works well in Firefox and Internet Explorer. Safari 2, however, insists on drawing the borders for the text field.

Step 4: I discarded the prototype and began fresh. This time I...

Sat, 04 Apr 2009 15:30:00 +1200

Step 4:

I discarded the prototype and began fresh. This time I used the structures to create a footer that would appear at the bottom of the window or the page, which ever was tallest.

In this iteration, I also introduced the extra spacing at the top and bottom. The space at the top was necessary to give Tumblr’s pop up buttons (like “Follow”) room. The matching space at the bottom gave me a handy place to put the credit information.

At this point, I had named the theme Secret Agent in honor of its 24 heritage.

To display a slanted button, I sandwiched the text between two images and defined borders above and below the text to meet up with the edges of the images. This worked fine in Firefox. However, the borders did not line up with the images in either Internet Explorer or Safari.

Step 3: I coded up the first draft of the theme to prove that I...

Sat, 04 Apr 2009 15:28:00 +1200

Step 3:

I coded up the first draft of the theme to prove that I could indeed place a portrait image as desired. This exercise also showed me that the page’s footer would need a curved portion to balance out the header. After building that, the white space separating the header and footer did not seem quite right, so I introduced the jagged pattern to connect the two.

Also in this mash up of code, I took a first stab at a top for individual posts.