Theming This Site

I have worked on many other sites since I started working with Drupal four years ago, and other than my first blog site, I had never done one for myself.  When I started SMGA a year ago, I knew I needed to get a site going for it, but between family and all the other sites I work on, I hadn't had the time to do it.  The biggest issue for me was the theme.  As a developer, and someone who is not gifted at creating designs, I needed to find one that I liked that I could convert to a Drupal theme.  I had looked at literally hundreds of open source designs without seeing one I really liked, until one day, I saw a webcast by James Walker on theming, and as his example he used a theme from Styleshout.  After looking through the themes, I finally came across one I liked called Cool Blue, and I decided to use it.  It looks to be designed primarily for a blog site, but the page also provides examples of all styles used, so it's easy to adjust the front page.

One of the first things I noticed was the main column.  At first glance, it appeared that there were three columns for the blog, but after closer inspection (and a little help from the Drupal support mailing list), I realized that there were only two columns - the main content and the sidebar on the right - and the main content area was broken down into two parts, with the blog post meta data to the left of the body.  This layout is used both on the page listing the blog posts and the blog post itself. 

Right off the bat it was fairly obvious that a view would be needed for listing the blog posts, and the blog post page itself would be a custom node template.  However, upon a suggestion from the mailing list, I checked out Display Suite.  DS is like Drupal in that it has a steep learning curve, but with the help of two excellent screencasts by Mustardseed Media, I was able to grok DS and get my displays created.  However, then came the time to theme them, and that wasn't so easy.  On looking at the HTML, I saw a number of tags that I needed to modify with a class, but I couldn't find where to do it.  I grepped the code, I looked at theme functions and templates, but for the life of me I could not find where to change the things I wanted to change.

I had been doing a decent amount of Views theming with custom templates, and was getting pretty comfortable with it, so I decided to go that route.  For the blog listing page, I created a view with all of the required fields, and then created a custom template by cloning views-view-fields.tpl.php into my theme directory and renaming it to match my specific display (views-view-fields--blog--page-1.tpl.php).  I removed all of the default code from the template, copied in the appropriate HTML from the design, and then just added in my variables.  In order to get things like the date variables the way I needed them I also had to create a views preprocess function to create those variables, and then just access them in the template.

The node display was very similar.  Since the HTML and CSS from the Styleshout template already creates the layout, I created node-blog.tpl.php, dropped in the HTML from the design template, and started adding in the template variables.  Comments were a bit of a challenge, since the template uses unordered lists and by default Drupal doesn't, but by cloning and modifying comment.tpl.php and comment-wrapper.tpl.php, I was able to get the comments looking fairly close to the template (there's still some work to do).

I swapped out the social network icons for the Sexy Bookmarks module, and I still have some work to do on the Search box and other little things, but overall I'm happy with the way it's turned out so far.

Sep2