les james

design & stuff

Viewport Theme

Update: June 22, 2010:
I am no longer using the Viewport Theme on my site. If you have a question about your Viewport Theme or WordPress in general feel free to shoot me a message through Twitter.

Archived Post…

I finally had a little time to work on this site. Wouldn’t you know I’ve thrown my lj design under the bus. Well kind of. I am now using the Viewport theme as my base template and skinning it with elements from my lj theme. I’m applying this skin as a child template of Viewport and so far things are running pretty smooth. So far I’ve only changed the header and footer templates and of course, I have a new style sheet to override the parent theme. I like the Viewport theme because it’s perfect for a portfolio site. I’m going to create custom pages that will group my various projects together. General blog entries will have a default blog image that I have yet to draw.

Hopefully this will be the last change in direction for the theme of this site. I want to customize the hell out of Viewport and make it my own. Hopefully I will be able to find the time.

Update: May 29, 2009:

I’ve noticed a couple people landing on this page since it’s ranking high with a search for Viewport Theme. So I’ll try to spell out everything I’ve done to customize it. First off all the changes I’ve made hae been through a child theme. This way I can customize the theme one part at a time. If I haven’t created an override in the child theme WordPress then defaults to the actual Viewport theme files. This ensures that if I miss something it won’t break the theme.

I started with the header and footer. Since these don’t really have anything to do with the actual “viewport” they are completely customized to look like my original site design. The header does contain conditional code to activate jQuery links depending on what page you are on. I did have to add is_search() to the conditional statement because it wasn’t in the original header for some reason.

Since the Viewport theme is based on pictures I needed to come up with a default blog picture that could be automatically added when I don’t specify a picture for the post. I changed the php code to check if the post viewport picture is blank and if so place my default blog pic in there instead. I also made the pic appear as a css background-image so that I could round the corners of the container div and apply a box shadow (which currently only shows in Safari). I made these changes to the index, single, archive and search template files.

I made a lot of changes to the single template (which controls the post page). I took out the top and bottom divs that used to house rounded corner images in favor of a single div with css rounded corners. I made lots of css style changes and added my Twitter status to the sidebar with Twitter Widget Pro.

I’ll revisit this post if I make and further Viewport specific customizations.

Update: June 15th 2009