Styling search button

  • Resolved dominoeffect

    (@dominoeffect)


    17 years ago

    Hey peoples,

    I’m re-styling my sidebar after widgetising it and have a question regarding the search box & button. Any help will be appreciated!!

    The ‘Search’ button- what type of line of css code do I need to specify an image as the search button?

    In the original searchform.php it looks like this:

    <input id="searchsubmit" type="image" src="<?php bloginfo('template_directory'); ?>/images/btn_search.gif" alt="Submit" />

    and so far in the new css version it’s this:

    #searchWrap input{vertical-align:middle;}
#searchWrap #s{font-size:1.1em;border:1px solid #BBB;padding:1px 2px;margin-right:3px;width:220px;}

    I have tried some variants of this in the css to no avail:

    #searchWrap #type{url:(images/btn_search.gif);}

    Can anyone tell where I’m going wrong?

    Thank you,

    M.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter dominoeffect

    (@dominoeffect)

    Can anyone help with this?

    Can’t find any reference to styling the actual button, have tried adding the background image tag to #searchWrap and to #searchWrap #s but it either doesn’t work or turns the page to gibberish!

    Any help would be massively appreciated. ??

    Cathy Mitchell

    (@multitalentedmommy)

    The “button” is actually just a form tag, with css attached to the tags. To change the button, you’ll want to see what the form is wrapped in. Like:hmmmm, i was going to be brilliant, but it is most likely a javascript. I’ve NO IDEA how to edit those! Someone else can have a go at this one!

    Thread Starter dominoeffect

    (@dominoeffect)

    Thanks for the reply MMM. I’m not sure it is javascript, I mean it’s just the standard wp search plugin… but then again I don’t really have a scooby here!

    It’s in the searchbox div, and is a ‘submit’ type, which is all I know. Thanks for your help regardless…

    M.

    jabecker

    (@jabecker)

    In the code you gave the ID is searchsubmit, not searchWrap. You need to either change your CSS to match the form or vice versa.

    Cathy Mitchell

    (@multitalentedmommy)

    Through your ftp client, look in the wp-contents/ themes/ yourtheme/ images/ btn_search.gif, and replace it with whatever picture you like. Just make sure to save your original btn_search.gif in another location, and overwrite this img with your new img. If you give it the same name, then the template tag will know what picture to insert. Keep it the same size, a “.gif” and you won’t break any of the other formatting.

    I’m sorry, i didn’t look close enough at that code that you pasted above. It says right there that the img is btn_search.gif. So you can upload whatever image you like!

    HTH,
    Cathy

    Thread Starter dominoeffect

    (@dominoeffect)

    Hey Cathy,

    Sorry I didn’t make it clear enough, the btn_search.gif is the file I want to use, currently i’m just getting the standard search button and want to replace it with the gif!

    jabecker, cheers, I will try the same using the searchsubmit value instead of searchWrap.

    Thanks for the help guys.

    Thread Starter dominoeffect

    (@dominoeffect)

    Done! All I had to do was enter the search box html as a text widget… doh. Things aren’t as complicated as they seem.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Styling search button’ is closed to new replies.