Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Irrational

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #35842
    mwdewitt
    Member

    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!

    #93408
    Mottie
    Member

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

    #93411
    mwdewitt
    Member

    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.

    #93412
    Mottie
    Member

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

    #93413
    mikes02
    Participant

    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.

    #93414
    mwdewitt
    Member

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

    #93415
    mikes02
    Participant

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

    #93443
    Mottie
    Member

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.