Here’s where we are so far in our progress on the earlier established to-do list:

• Install copy of WordPress on development box
• Import backup of live site content to provide some content for the development site
• Create a bare-bones set of template files
• Review the default CSS before beginning development of custom CSS for new template
• Setup CSS for basic layout
  • 2-Column wide left, narrow right, approximately 75% - 25% split
  • Site width: 1024px (current width ~800px)
  • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
  • Header will be short, ~ 5% +/- of screen height
  • Footer will be one or two text lines
• Select color scheme
• Select photo / graphic / logo for header and develop site-wide navigation in header

I’ve accomplished all the items on the initial plan! Until I was writing this, I hadn’t realized that all the original goals had been accomplished. That’s nice to realize! Goes to show that putting your plans and goals in writing and monitoring them can sometimes lead you to see progress in areas you didn’t realize you were making. That’s a subject for a whole other post. Too much philosophy for this one!

While I have accomplished the original goals, it does not mean that I haven’t changed and/or expanded on them while in progress. Or there may be some minor implementation issues left to finalize.

Here’s what I see still needs to be complete before launch of this redesign:

• Review plugin use and confirm all are setup
• Make notes of configuration changes that need to be done inside WordPress admin tool after installation of the template
• Setup tabs with rounded borders using graphics
• Check pages for IE support code & GIF graphics for rounded corners
• Add Latest Posts to sidebar
• Widen sidebar
• Finalize color choice in post metadata
• Consider post date ‘calendar’ format graphic or color change
•  Expand About page content
• Posts by Category page needs format still
• Posts by Date page needs format
•  Custom Category Templates for each of standard categories (Tools & Techniques) with header lead-in to content
• Update blogroll and breakdown by category, perhaps using built-in link management system?
• Add RSS Feed icon & links near top & remove from footer
• Confirm RSS auto-discovery code is in header
• About section in sidebar, with photo?
• Ranking links (Alexa & Technorati)
• Blogflux links (uptime, directory, mapstats)
• Feedburner chiclet
• Stats link codes
• SEO code
• Review online version for customizations to back-port to new design
• Affiliate links (Sedo) others? HitsLink?
• Last 50 entries on Archive page
• Mullet Home page?
• Review for standards compliance

As you can see, even though I have accomplished a lot, there is still much to do. But, most of it is little stuff in general, the details you don’t see or think of, until you get farther along in any project. This is one of the reasons project planning is not an exact science. While an architect can design a house, the carpenter that builds it still have to make a lot of decisions on how to implement the design. Here, I’m the designer and the carpenter.

CSS3 Rounded Borders was a success! Well, for Firefox users anyway! Luckily, I checked my stats and find that 65% of my visitors are Firefox users… mostly v2.0, but a few v1.5 users are still out there. Time to upgrade Firefox folks!

The rounded corners technique using CSS3 method is very easy compared to what I went though to create the graphics for each corner yesterday. Well, creating the graphics wasn’t so bad as getting all the pieces in place to position them properly–and then I still wasn’t satisfied. So, I’m glad I remember this technique existed. After reviewing the sample at CSS3.Info using border-radius for Mozilla & Webkit, I came up with the following:

Note the rounded corners on the post background, the sidebar, and even the tabs. I thought I was going to have to reduce the radius for the tabs, but actually they look good with the same 25px radius the other corners are using. I’ve also got a shot of the middle of the page to show you how I’m separating the posts with the background and a little separation:

OK, OK! You want to know how to do it!

First the rounded corners. Pretty much straight from the page at CSS3.Info:

-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background-color: #003712;
border: 1px solid #CCCCCC;

Works very nicely. The border is just barely visible gray to help blend the edge a little.

The tabs are similar, however I used the specific CSS3 properties for just the bottom-left & bottom-right corners.

-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomright: 25px;
background-color: #003712;
border: 0 1px 1px solid #CCCCCC;

Note, the border being applied only to the left, right & bottom.

I’m still tweaking the size & font on the tabs, as it doesn’t feel quite right. I also took a quick look at it in IE7 to see what it would do with the rounded corners… not pretty! Besides not handling the border-radius property, it also didn’t seem to be handling some of the top margins or something. The first post was shifted up & overlapping the tabs. I’ll have to look into that… though I would rather ignore it! It might be a simple validation issue–I have not been able to validate the page yet since it’s on an internal server. The CSS has been validated by TopStyle, and it doesn’t like the Mozilla- & Webkit-specific properties, but that should not be too much of an issue. They should be just ignored. I hope!

Just a quick update on the template progress… I’m working on using CSS to create rounded corner effects on backgrounds that will be used for the sidebar & posts. I got the basic concept from many places, but Adam Kalsey has a good post on the Rounded Corners in CSS technique. Here’s an in-progress snapshot of what I’ve got so far:

Notice the rounded corners on the sidebar background. It looks pretty good here in a low-res snapshot, but I’m tweaking a single pixel border that doesn’t want to cooperate in the right combination with the graphics. It has to be positioned to appear along the top border, between the graphics (there are individual graphics for each of the rounded corners), but not extend out the full width of the enclosing div. I’m trying to avoid using a full-width image to accomplish this.

There is a similar setup at the bottom of the column, however, while I was working on the top, the bottom disappeared! I think it is being covered up by the background of the sidebar, though it shouldn’t be doing that. I’m focusing on one end at a time, and learning more about editing graphics at the pixel level as I go! I plan on using something similar for the separation of the tabs too.

I made good progress on the To Do list last night:

• Install copy of WordPress on development box
• Import backup of live site content to provide some content for the development site
• Create a bare-bones set of template files
• Review the default CSS before beginning development of custom CSS for new template
• Setup CSS for basic layout
  • 2-Column wide left, narrow right, approximately 75% - 25% split
  • Site width: 1024px (current width ~800px)
  • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
  • Header will be short, ~ 5% +/- of screen height
  • Footer will be one or two text lines
• Select color scheme
• Select photo / graphic / logo for header and develop site-wide navigation in header

Pretty good work!

I want to show you a screen capture of the default starting point for the template, which is the supplied Kubrick template:

Look familiar? That’s what you get after an initial install of WordPress if you don’t make any changes.

To show you just how much work is being done by that default template, here is what it looks like if you remove all the CSS that is being applied:

Not very pretty, would you say? Well, after considering the two, I decided to start with the default template, and then tweak the settings from there.

Here’s a sneak-peak at what I’ve come up with so far:

What do you think? You can see the result of a lot of the design decisions I’m making:

• Width 1024px
• Header graphic gives mountain scene
• Leads to a blue, green, brown earthy palette for colors
• Drop down tabs from header for page-level navigation (still more work to be done here)

I’m still working on getting the column widths where I would like, so you see the sidebar out of place still. Fonts have not been adjusted at all yet, for color, family or size.

Pretty good start for a few hours work. I think I will make my target launch of May 1 with no problem!

I’ve made the decision this morning to target a launch date for the new theme for May 1, 2007. With that in mind, I’ve got 10 days to get it done. To that end, I’ve created a To Do list of items to be completed:

To Do

• Install copy of WordPress on development box
• Import backup of live site content to provide some content for the development site
• Create a bare-bones set of template files
• Review the default CSS before beginning development of custom CSS for new template
• Setup CSS for basic layout
  • 2-Column wide left, narrow right, approximately 75% - 25% split
  • Site width: 1024px (current width ~800px)
  • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
  • Header will be short, ~ 5% +/- of screen height
  • Footer will be one or two text lines
• Select color scheme
• Select photo / graphic / logo for header and develop site-wide navigation in header
• Select items to be included in sidebar:
  • About - Should I include picture of me?
  • Search
  • Feeds
  • Email subscription option?
  • Archives - Perhaps better in header site-wide navigation?
  • Categories and/or tag cloud?
  • Blogroll - Move to separate page?
  • Space for affiliate ads
  • Space for site support links (Blogflux currently)
• Setup footer with statistic tracking codes, etc.
• Plan post layout and post-related plug-in use.

I’m sure I’ll come up with other details, but that will be the basic flow.