Seems like that’s all I do any more is update. WordPress updated to version 2.3. One of the nice things about WP 2.3 is that when you go to the plugins page, it shows any plugins that need to be updated… and I had quite a few of those! So, I updated plugins. Then, I found that the Headline Images plugin by ColdForged no longer worked. I’ve been using his excellent plugin for quite a while to spruce up the entry headlines. When it worked all you had to do was change the “the_title()” WordPress template tag to “the_title(‘-image’)” and it took the text of the title, translated it into a graphic of those letters using any pre-determined font, size, color, shadow color, shadow offset, etc. It was really cool because you could take any font you had on your system and upload it to a folder you designate in WordPress, and it would render the titles in that font. As I said earlier, however, due to some change in WP 2.3, it no longer works.

So… I had to go with “old reliable”. I created a CSS drop shadow for the text. It’s really pretty simple. You first change the CSS of your headline class to have a z-index of 1 so it is displayed on top and its position to be relative. Then you create a new CSS class for the shadow, making the left and top margins slightly more than the headline margins, color it to be a grey of some kind, have a z-index of 0 so it’s displayed underneath, and make its position absolute. Here’s the CSS code from my stylesheet for these two elements (I also included the anchor hover class as well):

.storytitle, .storytitle a, .storytitle a:visited {
  font: italic bold 28px "Times New Roman", Times, serif;
  left: 0px;
  top: 0px;
  width: 500;
  text-decoration: none;
  color: #14220D;
  position: relative;
  z-index: 1;
}
.storytitle a:hover {
  color: #4A7032;
  background: transparent;
  text-decoration: none;
}
.storytitleshadow {
  font: italic bold 28px "Times New Roman", Times, serif;
  left: 4px;
  top: 2px;
  text-decoration: none;
  color: #889988;
  position: absolute;
  z-index: 0;
}

Then, in the “loop” of the WordPress engine, you’ll need to add one line. In the case of my theme, it’s in the file “post.php” and change the code that looks like this (I’m using curly braces instead of < and > to avoid the PHP being rendered):

{div class="storytitle" id="post-{?php the_ID(); ?}"}
  {a href="{?php the_permalink(); ?}" rel="bookmark"}{ ?php the_title(); ?}{/a}
{/div}

To this:

{div class="storytitle" id="post-{?php the_ID(); ?}"}
  {a href="{?php the_permalink(); ?}" rel="bookmark"}{ ?php the_title(); ?}{/a}
  {span class="storytitleshadow"}{?php the_title(); ?}{/span}
{/div}

That’s really all there is to it. I may even stay with this. The only drawback is that I have to use only a few certain fonts that are on everyone’s PC. Anyway, the shadows are better looking in Firefox and Opera on my Windows PC and it looks good in Konqueror on my OpenSuse laptop. It doesn’t look quite as nice in Internet Explorer (even though I grabbed the entire process from an article about drop shadowed text in IE!).