Amazing Grace Theme

New year, new-ish version of WordPress (2.7) and I thought it was time to check out a new theme.

This one is called “Amazing Grace” by Vladimir Prelovac and seems to work pretty nicely out of the box. Instead of a long banner image rotated across the top on various pages, it has a smaller snapshot (which will be easier to deal with, editing wise). Those are not currently my pictures, but they’re similar to some I’ve taken on various trips, so I’ll be able to figure out how to substitute my own for the default ones. I’m not sure why it has links to 3 categories across the top, but they’re good ones to highlight, being the “uncategorized” one, the one for mini-posts or asides only, and the travel one. I may tweak font size a bit for readability so would appreciate any feedback. It looks good on Firefox/Windows but of course will also check it on Explorer and will need to hear from any users of other browsers or operating systems.

Will also add my beloved drop-shadow CSS, of course. That goes without saying.

UPDATE: Followed the instructions for adding social networking buttons to the entries. Not liking the pulsing, almost BLINKtag effect. More research is needed to turn that bit off but it’s not a deal-killer. I really like the color palette and probably won’t mess with it much, as it’s similar to another theme I had called “Talian.”

UPDATE II: Oh, HO!

It turns out that Flickr makes it pretty simple to add photos from your Flickr stream to your website, but they aren’t entirely obvious about how to do it. Flickr calls this method of displaying photos on your site a “badge”, and doesn’t display the link to the configuration page very clearly. I can’t even recall the last time I found the page anywhere on the main Flickr navigation, but instead had to track it down myself using Google.

So, save yourself time and just run over to www.flickr.com/badge.gne.

This sounds very familiar and do-able. I used a simpler version of this when I was using a template called Tiga on my own site and on the old Holy Moly blog and website. Basically, I specified 4 or 5 square thumbnails in the center column, which were random images from specific sets, in a horizontal array. The one for the church website utilized a lot of face shots of different parishioners and closeups of interesting things inside the church. It was designed to make it a friendlier and familiar place to visit. Worked pretty well, too: I got a lot of compliments from visitors and from the Diocese. I had edited the Flickr-generated mishmosh of code to take out the text link and some other unwanted stuff, similar to how Ryan describes, but without his attention to clean coding. I’ll see if I can get this working for sure; there’s something about the background image and there’s also something about the size of the images specified in Vlad’s theme instructions that I may have to tinker with.

UPDATE III: Further hint on how it’s done and a slightly different method using a modified background image is at Theme Hack.

UPDATE IV: Eureka!! Theme Hack’s method works like a charm. Here are the full instructions [with one minor modification-ed.]:

Modify header.php and place the following in the style tags near the top.

#portraitbg {
  background:url(/images/bg-portraitB.jpg);
}

#flickr_badge_image1
{
  position:absolute;
  left:14px;
  top:28px;
}
#flickr_badge_image1 img {
  border: none;
  width:283px;
  height:174px;
}

Create a badge with Flickr for the tagged photos you want in the header and in the final screen with the code to paste into your site look for the javascript call. Place this between the div with the id portrait-bg in header.php

Example
</p> <div id="portrait-bg"> <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=1&display=random&size=m&layout=x&source=user_tag&user=93929977%40N00&tag=header"></script></div> <p>

Once this is done, place the following image in the Amazing Grace theme directory under images and name it bgportraitB.jpg.

NOTE: I arbitrarily renamed the image “bgportraitB.jpg” when I originally saved it because that was what it was actually named, so I adjusted the name of the image in the instructions above. The original instructions reference “bg-portraitB.jpg.” The theme’s original background portrait is called “bg-portrait” and that is how it is still referenced in the CSS. If I need to I can revert to the standard theme by commenting out the Theme Hack code. I think this is why the style statements above go into the header.php file, not the main CSS file. I think the style statement is actually calling out Flickr’s “image 1” and so it’s more precise than the general “uber-wrapper” statements that Frontender was using. Either method should work, with a little tweaking. Ignore that stray “P” tag in the text area box, it’s an artifact that I can’t seem to delete due to the weird way WordPress shows page returns in the editor.

UPDATE V: The Ultimate guide to Amazing Grace theme goodness and trickery is here. Vladimir’s WordPress forum, where an Amazing Grace theme board lives, is here. I’m thinking I need to figure out how to add more bookmarking links, specifically Google’s. I’ve seen mini-icons for a bunch of different sites at Pam’s House Blend. Oh, goodie, I get to edit the functions.php file again.

UPDATE VI: Merry Christmas 2009! I couldn’t remember how I’d set this theme up; basically any picture in my stream can be used as long as it’s in landscape mode, with the proper tag. So theoretically I could use my iPhone to add images to the pool “on the fly.” Just have to remember to add the tag.