web design

I've heard before that one of the easiest ways to contribute to the Drupal community is to write up a big ol' list of the modules you use in Drupal. So I'm going to do some more meta-blogging and list the modules currently used to power this site and why.

Two common modules that are missing from my install are TinyMCE and CCK. TinyMCE just outputs awful HTML and for me it's not worth the wrangling. I wish there was a better way but I currently edit all of my content as raw HTML. On my list of things to do is to integrate CodePress, which is a nice little syntax highlighter for textareas. I'd love to pair up a syntax highlighter with some simple autocompletion... that to me would be perfect for advanced content editing. There's a stub here, so maybe that can built on. Also missing is CCK. This module is a part of most Drupal installations but so far I haven't needed it. Any custom content types I have were defined in their own module.

Without further ado, here is my module list:

Core

• Blog — provides simple blog functionality
• Comment — provides commenting
• Menu — provides menu items, primarily used for admin navigation but also holds custom menus for 'People' and 'Sources' in the footer of each page.
• Statistics — provides the number of reads found in the info for each post, I used Google Analytics for real site statistics
• Taxonomy — provides tagging for each post. I only have one vocabulary for freetagging of every piece of content.

Bookmarklet

This is a series of custom modules that allow me to publish using a 'bookmarklet' (a link from you bookmarks toolbar). I am hoping to one day wrap this into a tumblr-like install profile and integrate with CCK.

• Bookmarklet — bookmarklet functionality
• Bookmarklet Link — defines a custom content type for links
• Bookmarklet Quote — defines a custom content type for quotes

Image

• Image — for handling images within Drupal, mostly default settings
• Image Import — comes bundled with image module for importing batches from FTP, only used this once but it worked well
• Image assist — inserting images into content is still tricky in Drupal and for me this is the easiest solution. Another drop-in solution to the same problem would be IMCE.

Other

• Akismet — wouldn't leave home without this one monitoring spam
• Comment Notify — allows for follow up emails to users who leave comments
• Comment Mail — sends me an email when a comment is posted to the site, probably could handle this with actions but this works fine for now
• Google Analytics — simple Google Analytics integration for the site.
• Open ID — trying to embrace the future with Open ID. Still working on integrating this module since I would like the login form to show up inline with comments. This site is mostly for blogging and not community so that would probably make most sense. Excited to see this module eventually work as an Open ID server.
• Theme Settings API — to take advantage of some of the Zen theme's advanced doings
• Trackback — this is to ping blogs that I have linked to in an attempt to build some SEO
• Tylor Helper — just a custom helper module to do form alters. It currently adds some extra CSS classes to the comment form.

SimpleFeed

I've used this for a while to import my flickr, delicious, and twitter feeds. This module works great but I will eventually move to the much more powerful FeedAPI module.

• SimpleFeed — defines the SimpleFeed engine
• SimpleFeed Item — defines the feed item content type

Views

I use views to create my custom front page and tumblog page by restricting what types of content can appear on what page.

• Views — main Views module
• Views RSS — creates RSS feeds for my custom views
• Views UI — default UI bundled with the module

And that's it! I'd like to see what other modules people are using, so leave me a comment if I missed anything good or if you compiled your own list. Also, if anyone has time to work on a CodePress module, I'd like to collaborate. I think having an extra set of hands would help bring some focus.

I have a text file started on my desktop called "Blog" where I just jot down ideas for posts; this week's idea is simple:

- Blog post how I created my design
	- taxo links inspired by we-make-money-not-art
	- post format inspired by coolhunting.com

But before I get to that, I wanted to celebrate a little. At Northern Voice I decided that I'm going to try and do one blog post a week. I figured it would be a small enough goal to get going and I wanted to see what this blogging thing was about. This is post 5, the end of my first month, and I'm right on track!

Anyway, I thought I'd go over where some of the inspiration for this theme comes from as well as give some direction as to where it is going.

The taxonomy links were heavily inspired from we-make-money-not-art.com. Let's compare:

vs.

I really like how the text goes off the background, similar to a rough highlighting job. For we-make-money-not-art, the position of this information helps solve two problems: makes it really obvious that this is tagging/titling (especially by breaking tags into discrete blocks) and saves space. I decided not to do this over top of images as I wasn't sure how many posts would include them. I also didn't want images as a required piece of content.

Enter my inspiration from coolhunting.com:

Here they've seemingly solved all of my problems! Now I don't have to put information over images and this gives a good place for taxonomy/tags, service links, read more link, and comment info. It doesn't interfere with the content and is positioned so that it is really obvious which info belongs to which piece of content.

You might also notice that both of these sites are fixed width and have a lot of content to throw at you.

Now for the future. The most important piece that is missing right now is my blogroll. I think it's important to give what little link love I can and hopefully I can think up an elegant way to integrate this into the footer. This seems like the best place and it might leave some room for links to my web places (eg. flickr, twitter, facebook...).

My next thought for visual improvement is rounded corners on the top and bottom green blocks. I've also looked into stretching the green banner across the top.

I hope this gives some insight and I would be interested to hear where other people get their design ideas! Design suggestions are definitely welcome.

Oh, and I've added OpenID support which you can currently find here. Need to find a way to make this inline with comments where it's far more relevant.

I've finally created a custom theme for this site and I'll try and give you some insight into how I did it. It took me 1 hour 51 minutes and although I was actually aiming to finish within an hour I'm happy with the time. I know theming probably shouldn't be a race, but why not test yourself! Also, my main goal was to get something original up as quickly as I could so I can make tweaks in the coming months.

I've based my theme on the new Zen template, which is becoming one of the most powerful ways to build a themes in Drupal. This is the first time I've used Zen as a base and it's a great way to go. In the spirit of CSS Zen Garden, Zen is designed to be exclusively programmed using stylesheets. The only tweaks I had to make elsewhere were in node.tpl.php where I changed the default ‘Submitted by...’ text and removed the ‘in..’ text before the taxonomy.

Here's a video of the first 30 minutes of work (my screen capture program lost the rest...):

There are some limitations to my new theme though. It looks great Firefox 2, Firefox 3, Safari 2, Safari 3 and Opera 9, however it currently fails in IE7 and IE8. Didn't get a chance to look in IE6 yet but I imagine it's not good. When I get some time I'll fix this up, with the biggest problem created by absolutely positioning the mission statement into the head.

One other limitation that will need fixing is that I used Myriad Pro in the header. This is a nonstandard font and I should use an image replacement to be sure I get the look I want. The only other font used is Trebuchet MS, which should be fine across most platforms. In both cases I've set Arial as my second font.

Because this is based on Zen, it passes validation for XHTML 1.0 Strict. I only get CSS validation warnings for having one CSS3 property used (word-wrap: break-word;) and having background color the same as color, which is visually fine.

Overall I'm happy with my new theme and it will only take a little bit longer to make it cross browser compliant and good to go.