Undercover Operative 2.00

Step 1:

I was watching the fourth season of 24 on DVD a couple weeks ago and caught glimpses of CTU’s computer interface. The part that stuck in my head was the top where a government seal and several buttons were displayed. At the time, I thought it would be a neat trick if I could replace the seal with a tumblr’s portrait. After the episode, I sketched the above, appropriately enough, on the back of an envelope.

Step 2:

At this point, many (most?) web professionals would mock up the theme in Photoshop. Not me, though. I’m a coder. My Photoshop-foo is very weak. Instead, I cobble together graphics as the need arises and focus on the HTML. In this case, I used an ancient (in computer years) program called Canvas to put together the curvy corner.

While I was at it, I also created images for the slanted left side and right side of the buttons.

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.

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

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:

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

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.