The Never-Ending Bloga

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

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

bgportraitb

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.

11 Comments on “Amazing Grace Theme

  1. Glad you could get some use from the tutorial. 🙂 Hopefully I make others that you’ll find useful.

    Also, I love the name of your blog. Makes me think of Lost, which starts here in a couple of weeks (I’m a hopeless fan). Have a good one.

  2. Jody, this is actually Ginny’s blog, so she can answer. Well, I can, too, since I’m using that theme. I had no problems getting the comments turned on. I didn’t do anything — they were just there. Odd.

    Ginny, I do have a question for you — have you run into a problem with the drop-shadow code + Amazing Grace on IE7, where individual posts (the actual post element on a page) suddenly gets horizontal and vertical scroll bars? It’s happening on my blog, but only via IE7 and only on posts using the drop-shadow stuff (and only since I moved to Amazing Grace).

  3. Dave, I see you’ve modified the CSS a bit for both your left- and right- margin image floats; when I look at your blog in IE7 I notice that the image sticks to the margin when I widen the browser window, but the shadow stays within the body of the text. I suspect something about your modification has something to do with it. Does the same thing happen with a left-floated image? I see no problems with my left-floated images, but may play around with a new class of right-floated images. I like the look setting off “theme” posts with small images as you have done.

  4. Yeah, I use images both as — well — images, as well as some “themes” — e.g., all Doctor Who posts, all TV-related posts, all beer-related posts, all WordPress-related posts, etc. I usually stick them on the right margin, just because that seems the right thing to do (though I have a version of the drop-shadow for left margins alignment).

Leave a Reply

Your email address will not be published. Required fields are marked *