Faint Text Over Comment Field (like on BB)

[QuietCitizen]

Hello,

I was just wondering if anyone knows how and is willing to explain how to make the faint text over the comment field, like on Binary Bonsai where Michael's comment box reads faintly: 'type here'. Or something like that.

I think it's nifty, encouraging, and I like things that just highlight purpose.

Thanks.

[Matt]

Simply put a background image on the textarea, like so:

textarea#comment {
background: transparent url(images/typehere.gif) no-repeat center;
}

[QuietCitizen]

Hey, thanks for responding--but for some reason, it's not working. I've tried fiddling with the URL structure a few times to no avail.

[Matt]

It worked fine for me, did you make sure you had it pointed to the image properly? Pop this in your stylesheet and you'll see it worked. Just be sure to change it to an image on your server when you're done.

textarea#comment {
background: transparent url(http://foogaming.com/images/comment-textarea.png) no-repeat center;
}

[QuietCitizen]

The code with your image did indeed work! However; for some reason when I try to use my own image, it still won't show. I tried switching to .png like yours--first transparent background, then white background as yours appears to be... the URL to the image appears correct...

I have no idea. Copying and pasting the URL now even proves to go to the image. :confused: Here's how it looks, which should be familiar:

textarea#comment {
background: transparent url(http://quietcitizen.weblogs.us/wp-content/themes/Potent Calm/styles/potentcalm/typehere.png) no-repeat center;
}

[Matt]

Try renaming the Potent Calm folder PotentCalm or Potent-Calm, or if you absolutely don't want to change it, you'll have to add %20 to simulate a space when it comes to URL's, which will be a lot of work in the long run. That's why it's a good idea to rename it. This works, by the way:

textarea#comment {
background: transparent url(http://quietcitizen.weblogs.us/wp-content/themes/Potent%20Calm/styles/potentcalm/typehere.png) no-repeat center;
}

[QuietCitizen]

Thanks, that worked. I hate it when things turn out to be so small that affect things. But especially when I don't try them over long periods of time!

[Matt]

Yea, but when you learn the hard way, you tend to never forget. :)