Add a magnifying icon into my child-theme's header search bar

  • Resolved sajtoslecso

    (@sajtoslecso)


    7 years, 8 months ago

    Site url : http://www.galgaguta.hu

    I would like to put a little magnifying glass icon into my search box, just to be there in the background and look pretty. Dont need any functions, and i also dont want it to block text.
    How can i do it without changing how the searchbox work currently?
    Thanks in advance for replies!

Viewing 10 replies - 1 through 10 (of 10 total)
  • kobashicomputing

    (@kobashicomputing)

    7 years, 8 months ago

    That would require CSS for an input field.
    Read about how to do it here at StackOverflow:
    http://stackoverflow.com/questions/711493/how-did-you-put-the-magnifying-glass-and-search-in-the-search-box-in-stackover

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    7 years, 8 months ago

    Side note not related to this topic: @kobashicomputing Please do not use short URLs in these forums. Those are expanded when found. It’s something that has been abused before.

    kobashicomputing

    (@kobashicomputing)

    7 years, 8 months ago

    Well clearly in all fairness I didn’t know this and the use of the word “Abused” towards me is totally unwarranted. Obviously I was trying to help out this individual and the short URL link was not misguided in any way. You could have said this with much better words.

    Thread Starter sajtoslecso

    (@sajtoslecso)

    7 years, 8 months ago

    Hi!
    Thanks for trying to help, but i don’t really understand how to do it, i’ve found that info you linked before, but it didnt work as expected for some reason.

    here’s my part with the search box in the header.php:

    <div class="header-wrap-search">
	<form action="<?php bloginfo( 'url' );?>" id="searchform" method="get" role="search">
		<fieldset>
		<input type="text" id="s" name="s" onfocus="if (this.value == 'Keres') this.value = ''" value="Keres">
		<input type="submit" value="" id="searchsubmit">
		</fieldset>
	</form>
</div>

    I have a little magnifying icon 7×7 i believe, now all i need, is to put it in there, in the right corner of the box.

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    7 years, 8 months ago

    @sajtoslecso Please excuse me for a minute while I go off topic.

    Well clearly in all fairness I didn’t know this and the use of the word “Abused” towards me is totally unwarranted. Obviously I was trying to help out this individual and the short URL link was not misguided in any way. You could have said this with much better words.

    Really? I mean… really? OK. Here’s my expanded reply and yes, I’m using better words.

    In all fairness, I am not referring to your behavior as being abusive and I am explaining why your shortlink was expanded.

    1. You took the time to help someone. Thanks! That is always appreciated and I’m very glad you help in these forums.

    2. In reviewing the post (which moderators do) I noticed the shortlink. Rather than just deleting it or not replying at all, I took the time and explained it to you like so.

    Side note not related to this topic: @kobashicomputing Please do not use short URLs in these forums. Those are expanded when found. It’s something that has been abused before.

    Emphasis added the second time around.

    When someone chimes in, asks you not do do something here with a “please” and then explains that that something has been abused before, it may not be a good idea to assume they are attacking you personally.

    Shortlinks in the past have been used to collect affiliate clicks and track users in these forums. That is obviously something that isn’t allowed in these forums.

    *Drinks coffee*

    I hope that’s better now and I urge you to consider your words in the future when replying back to a forum moderator.

    Back to the topic at hand.

    I would like to put a little magnifying glass icon into my search box, just to be there in the background and look pretty.

    @sajtoslecso Sometimes it helps to take a look at an existing sample such as on the Twenty Sixteen theme.

    https://wordpress.org/themes/twentysixteen/

    The link that was provided above is good and by examining a working example that may also provide a hint how to add that magnifying glass.

    Thread Starter sajtoslecso

    (@sajtoslecso)

    7 years, 8 months ago

    Thanks for that, it’s a good idea, but looking at the search php, i dont think this is what i wanted, i’ll try it out anyways. I would need that icon to be inside the box, being sort of “embedded” and not working like a button.

    kobashicomputing

    (@kobashicomputing)

    7 years, 8 months ago

    I hope that’s better now and I urge you to consider your words in the future when replying back to a forum moderator.

    Comments moderated. Consider this your second warning. There may not be a third.
    A. N. Second Forum Moderator

    Sajtoslesco:
    It involves placing a search icon as a background image into the input box. Thats all this is about. It has nothing to do with a button. You need to adapt the code to make it work.

    kobashicomputing

    (@kobashicomputing)

    7 years, 8 months ago

    The code is right there in the answer to that StackOverflow answer I gave you.

    Here, I took the time to quickly come up with a solution for you and adapted to my liking. Go create a search.jpg magnifying glass jpeg of 20×20 pixels and copy and paste the html below and open up the browser.

    <!doctype html>
<html>
<head>
  <style>
    #searchform #s {
        background: transparent url(search.jpg) no-repeat scroll right center;
        margin:0;
        max-width: 16em;
    }
  </style>
</head>
<body>
  <form action="" id="searchform" method="get" role="search">
    <fieldset>
      <input type="text" id="s" name="s">
      <input type="submit" value="Search" id="searchsubmit">
    </fieldset>
  </form>
</body>
</html>
    Thread Starter sajtoslecso

    (@sajtoslecso)

    7 years, 8 months ago

    Thank you for that chunk of code, but it doesnt work on my site, it makes no visible changes at all. I put these in conjunction with my already existing code in the header.php. What am i doing wrong?

    Thread Starter sajtoslecso

    (@sajtoslecso)

    7 years, 8 months ago

    Alright, finally made it, thank you for your help!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Add a magnifying icon into my child-theme's header search bar’ is closed to new replies.