Grow your CSS skills. Land your dream job.

Irrational

  • # December 26, 2011 at 9:05 pm

    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!

    # December 26, 2011 at 9:16 pm

    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 ;)

    # December 26, 2011 at 9:20 pm

    (edit: written while @mottie was also writing…sorry!)

    To make your button look like an image, just style it with CSS. Something like this:


    input#searchsubmit {
    border:0;
    background-image:url('http://irrationalgames.com/wp-content/themes/irrational/img/hand.png');
    width:74px;
    height:22px;
    }

    Use some additional styling, a local image (don’t use one on an external server), some :hover effects, and you should be on your way.

    As for the input field clearing upon clicking, there’s plenty of standard JavaScript/jQuery solutions available for this, search for “clear input on click” (you also want to populate it again if nothing is entered and the user clicks somewhere else).

    # December 26, 2011 at 9:38 pm

    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.

    # December 26, 2011 at 10:38 pm

    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 “/”.

    # December 26, 2011 at 10:39 pm

    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.

    # December 26, 2011 at 11:08 pm

    @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!

    # December 27, 2011 at 12:01 am

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

    # December 27, 2011 at 11:32 am

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".