New Graffiti CMS Theme for TerriMorton.com
Since Graffiti is so new, there are not a lot of themes out there in the wild, yet. My graphic design skills are non-existent, so I decided to hunt down a Wordpress theme that I liked, then convert it to Graffiti CMS.
My friend Google came to the rescue in finding different sites containing Wordpress themes, and I finally settled in on Listio.com to narrow down my search. What I was looking for was something bold, 2 columns with a right-hand sidebar, non-fussy appearance, and rounded corners. My preferred color scheme was red and black, but soon decided that was too limiting. Other things on the nice-to-have list were: day planner "feel" dates on the posts, nice blockquotes, sidebar items that wrapped well, and nice-looking unordered lists.
These 3 themes in particular appealed to me:
Ultimately I decided on Yellow Hell.
Karthik wrote a great blog post explaining how he adapted a Wordpress theme for use in Graffiti: Converting a Wordpress theme to Grafffiti. While I did look at that, I wound up taking something of a different approach, to keep it simpler for my first attempt at theming.
First I copied down the live data to my local machine so that I'd have real data to work with and could easily compare how my work-in-progress theme was presenting the data vs what the Default theme was doing. This involved:
- Copying down my Graffiti.mdb file from my live site to my local machine.
- Copying down the /blog folder and all of its subfolders and files to my local machine.
From there, I worked from my local machine. From within the Graffiti admin screen I chose the Presentation>Themes> Create New Theme option. I removed the ie6.css and ie7.css files. Using these pages as a reference, I went ahead and updated the layout.view, index.view, and finally post.view files (in that order) to match the theme:
- What can I do with Macros?
- View source on the Test run of Yellow Hell
There was no style for the tag cloud, so I had to make that up myself. When I had it all more or less working locally, I chose the Share option on the theme, which created an XML file. Then I went back to my live site and clicked the Presentation>Themes> Upload Theme link. And voila, there was my YellowHell theme. I clicked on it to select it as the theme for my site, and it just worked.
There are still a few bumps to work out that I am aware of:
- IE6 is not happy with the post view page when comments are still open. Looks like something silly I need to hunt down.
- There is no RSS icon, although there is a Link tag for it in the page header, so it's discoverable.
- The posting comments experience needs to be improved, as I've not yet applied the style.
- I'd like my own comments to appear differently than those of the other people who have commented.
- I want the year to appear on the posts in addition to the month and day.
And actually, now that I've gone to the trouble of making this theme, I am deciding I'm not as crazy about it as I was when I started. It's a bit "much". I may go ahead and work on Finestripes 1.0 next. :-)
