Irrational

[mwdewitt]

The site for Irrational Games is made with WordPress. My site is made with WordPress. So, here is my question: they have a little pointy hand thing for the search button. How do I take that image off of their website and incorporate it into my own? Or, well, I guess I can just use a similar image. My question is, how do I make my “search” button into an image? Also, if you notice, on Irrational Games’ website, the search bar is simply a box with a one pixel line around it, with the hand nice and snug against the right side. They also have the word “Search” in the field box, which goes away when you try to type something. If someone can explain to me how to do all of that, it would be greatly appreciated. If you would like to visit my own site to test something in Firebug, go here. Thank you!

[Mottie]

Hi mwdewitt!

It’s just some basic css with HTML5 (demo)

This is the HTML

the “placeholder” is an HTML5 attribute that adds the text inside of the input when it is empty.

And the css basically replaces the default button style with the image and positions the button

button {

position: relative;

top: -5px; /* line up hand with input */

left: 0;

width: 47px;

height: 22px;

background: url(http://irrationalgames.com/wp-content/themes/irrational/img/hand.png) left top;

border: 0;

cursor: pointer;

}

button:hover {

background-position: left bottom;

}

One last note, if you use this code, please save a copy of the image to your own server. No one likes hot linking – I hope the demo I made here doesn’t matter ;)

[mwdewitt]

Thank you, to the both of you! I just have one, little question left. Where do I add the HTML5?

This is what it looks like for my “searchform.php” file:

Any guesses?

Edit: Also, I just tried the HTML5, and it does not seem to be working. You can see on my website, here.

[Mottie]

It looks like you’re using the correct doctype, so all you need to do is to modify this input

into this

Also, in HTML5, inputs do not need a closing slash at the end “/”.

[mikes02]

It is also important to note that placeholder is not supported in all browsers, it is still safe to use on projects, just know that not all browsers will render the placeholder value.

[mwdewitt]

@Mottie: Okay, I got the “placeholder” to work and apparently I had to do the whole trail of breadcrumbs back to my “images” folder in my CSS to get the hand to work. But there is one little thing still wrong: the word “Search” appears in black over the hand. How do I get rid of that pesky, little sucker? Thank you for all the help you have given me! I am glad I grabbed the hand image while I could. It seems that the hotlink from your code to Irrational’s website is now blocked. Haha! Oops. Apparently, they did mind.

@mikes02: Yeah, I know. It sucks that not all browsers will be able to see it, because I enjoy the small details in a website. C’est la vie, I guess.

Edit: Oh, and is there a way to change the color of the word “Search” in the “placeholder.” I was picturing more of a dark grey instead of pure black. Thanks, again!

Edit: Okay, I figured it out. I leave “value” blank. At first, I got rid of “value” all together and then it replaced “Search” with “Submit”. Haha! But I would still like to know how to change the color of “placeholder.”

Edit: Gasp! I actually looked something up on the internet and found a decent answer. I now know how to change the color of “placeholder.” Thank you, everyone!

[mikes02]

You could use something like this jQuery Placeholder Support just know you are relying on a JS method.

[Mottie]

@mwdewitt LOL sorry I went to bed after I posted my last answer. I’m glad you’ve figured it all out :)

[Author]

Posts