A few days ago I wrote about a new Graffiti theme that I created for my blog, named Rounded. Since then a few people have emailed me asking for the Rounded.xml file so that they could use it on their own Graffiti blog, and I’ve been more than happy to send it out. However, after a couple of requests I realized the theme wasn’t quite ready for prime-time sharing because it still had some Dave-specific items in there, notably the stuff to support using Disqus for comments.
So after analyzing the theme a bit, I realized it could also be enhanced to allow for much greater customization without having to manually touch any of the .view files or even the stylesheet. Basically I figured out what needed to be done in order for someone to have complete control over this theme all from within the control panel. And not only that, but I figured out how to include support for Disqus and Gravatar as well.
The key to making this happen was knowing that Graffiti uses the same dynamic configuration library that Community Server uses, so I was able to leverage that in the theme.config file. Here is an overview of the new and improved Rounded theme for Graffiti.
Color Schemes
Once you upload Rounded.xml into your Graffiti blog, you’ll see this:
To get started with configuration, click the Configure link. This will take you to the first tab of the Rounded theme configuration, Colors:
There are 16 color schemes built into the theme for you to choose, and instead of naming them such things as “red-blue” or “purple-black” I went with names of colleges. I picked colleges based on those that had two primary colors in their school colors instead of just one. For example, I didn’t create a Michigan State theme because they only have one primary color (green) whereas a school like Arizona has two (red and blue). And no, white doesn’t count, at least not for this theme.
The list of college color schemes I created are: Arizona, Bowling Green, Florida, Florida State, Georgia, Illinois, Kansas, Marshall, Miami, North Carolina, Northwestern, Notre Dame, Ohio State, Oregon State, Purdue, Villanova.
The nice thing about this is that because it’s built with dynamic configuration, when you select a different color scheme, the changes take effect immediately. For example, when I change from Ohio State to Marshall, I see this:
And not only that, but dynamic configuration makes each of those colored boxes actually color pickers so that you can tweak the colors to your heart’s content:
The other thing I want to point out in the Colors tab is the line image. This is for the little gradient line that you see under the post date. It changes dynamically with the color scheme you choose, but if you deviate a lot from one of the built-in schemes you might need to create and upload a different one that better fits that style. Here’s what I’m referring to:
Gravatar Support
One thing I wanted to make sure was part of this theme was having a picture of the blogger in the site header. By default a blank avatar picture is used as a placeholder, but of course you can upload and select one of your choosing. However, I thought it’d also be cool to allow people to use a gravatar picture instead of an image file on the server (credit to Jayme for the idea). You can see these options on the theme’s Avatar tab:
This is pretty straightforward. If you want to use a gravatar image, check the box, enter an email you have on file with gravatar.com, and determine a size (80 is defaulted automatically). If you don’t want to use a gravatar from gravatar.com, the theme will use the image file in the Default Avatar box.
Note: If you’re not familiar with gravatars, no need to worry. The way it works is that you create an account with gravatar.com and then upload an image that you want associated with your email address. You can even add multiple email addresses, each with their own image if you want. Learn more here.
Disqus Support
You might remember that a ways back I started using Disqus to power all of the comments on this blog. I really like Disqus, but getting it into a Graffiti blog is kind of hokey, especially if the blog already has published posts with comments. ScottW showed how to get it to work, but if you look at what he did you’ll see a conditional check in the post.view file that looks like this:
#if ($post.Id > 143)
render the Disqus code
#else
render the existing Graffiti comment code
#end
It’s not a terrible thing, but not quite as nice as it could be. So I’ve taken that thought and made it configurable in the theme’s Disqus tab:
Having these things configurable means you don’t have to touch the post.view file to get this to work. The post.view file checks if Disqus is enabled and if the ID of the post is greater than the ID of the last post that used Graffiti comments, and renders the comments accordingly [1].
For example, above you can see I’ve enabled Disqus and that the ID of the last post that used the built-in Graffiti comments is 492. This means that any post with ID 492 or less will still render their Graffiti comments like normal, but all posts after that will use Disqus for comments.
You can also see two Disqus script snippets. The first one is the script that actually renders the comments in your posts and is used in the post.view file. The second one is used to display comment counts for posts that have Disqus comments and is used in the index.view file. The index.view file is smart enough to display comment counts for posts with the built-in Graffiti comments and posts with Disqus comments.
[1] Getting the ID of the last post to use the built-in Graffiti comments requires access to your Graffiti database. Just query the graffiti_Posts table and look at the Id column.
The Greatest? Really?
Well, maybe, I dunno. I borrowed the title of this post from the first line in the Tenacious D song “Tribute”, but that aside, I’ve seen most of the Graffiti themes out there and none of them provide this level of dynamic configuration and customization, nor do they provide support for Gravatar and Disqus like this theme does. So in that regard I’d say yes, it is the greatest. But don’t take me too seriously on that because I’m just messing around.
Download, Upload, and Configure
One of the best features of Graffiti is its ability to easily share and upload new themes, so all you need to do is grab the Rounded.xml file, upload it into your Graffiti blog, and configure it the way you want. Enjoy.
Tagged as
graffiti
Similar Posts
- How to Move from Subtext to Graffiti
- TechEd 2005 Recap
- The Art of Interviewing
