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.

Yellow Hell Wordpress theme

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:

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. :-)

11 Responses to “New Graffiti CMS Theme for TerriMorton.com”

  1. #1 Josh on 12.31.2007 at 12:04 PM says

    Finestripes looks pretty cool, but are you sure you want to give up the Taxi cab yellow?

  2. #2 Rick on 12.31.2007 at 12:47 PM says

    Great work Terri! You should try a grey background, lighter than the grey that is in the footer.

  3. #3 Terri Morton on 12.31.2007 at 2:22 PM says

    I may just have to give up the taxi cab yellow. ;-) But maybe I won't give up on Yellow Hell just yet. I'll try toning it down as Rick has suggested.

  4. #4 Terri Morton on 12.31.2007 at 7:32 PM says

    Well, it's not quite perfect, but I addressed the 5 bullet points in this post, as well as added a header image. I guess I will call it done for now.

  5. #5 James Shaw on 1.02.2008 at 10:07 AM says

    lol, wow. just wow.

    now, don't forget to make a yellow square favicon.

  6. #6 Terri Morton on 1.02.2008 at 10:34 AM says

    Thanks for the suggestion, James. This is now in place. ;-)

  7. #7 Carl on 1.02.2008 at 2:21 PM says

    All you need is some pineapple colors and you can rename the theme to Terri's Carmen Miranda Mystery

  8. #8 Karthik on 1.02.2008 at 10:06 PM says

    Nice theme Terri!

  9. #9 Dan Hounshell on 1.05.2008 at 12:50 AM says

    I really like the rounded text boxes for the comment form. The color scheme is a bit bright than anything I'd use, but it works. It sure does have some pop. Looks great.

  10. #10 Terri Morton on 1.26.2008 at 12:07 AM says

    I've toned down the background color of the posts from the loud orange (#FF9900) to something more muted (#ECA82D). Now my eyes don't hurt quit so much. :-)

  11. #11 graffiti man on 8.24.2008 at 12:13 AM says

    I love the graffiti arts too.

    i have a graffiti blog here

    free-graffiti-creator.blogspot.com

    If you have time please visit it

Leave a Comment

Name
Mail
Website
Enter your comment here