Customize Search Button on Menu

  • Resolved AZBros

    (@azbros)


    9 years, 10 months ago

    I have a couple questions about the search button that appears on the menu. On the Hueman theme, it’s typically located on the Topbar menu, but mine is now located on the Header menu. (Not sure that matters, but I wanted to put it out there just in case.)

    First, I was curious if there was a way to change the color of the button background. Currently it’s the same color as the Header menu. When you hover over it, it turns to a slightly darker color, but you can see the size of the “button” itself. I’d like to retain the ability to change the color upon hovering over it, but also change its base color to something other than the color of the Header menu.

    My other question is about the text that’s displayed within the Search field once the button is clicked. Right now it reads, “To search type and hit enter”. When I click the Search button, the text disappears within a millisecond. Is there a way to keep that text displayed until something is actually typed within the Search box?

    Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • bdbrown

    (@bdbrown)

    9 years, 10 months ago

    Hi AZBros. How’s it going with the Developer Tools? Had a chance to try them out yet?

    1. Try this CSS;

    /* search icon background color red */
.toggle-search {
    background: #f00;
}

/* icon hover background color yellow */
.toggle-search:hover {
    background: #ff0;
}

    2. The searchbox <input> tag contains two events, one of which is “onfocus”. When the searchbox receives the focus that event fires, clearing the placeholder text. To change that you need to copy searchform.php to your child theme. The default <input> tag looks like this:

    <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='<?php _e('To search type and hit enter','hueman'); ?>';" onfocus="if(this.value=='<?php _e('To search type and hit enter','hueman'); ?>')this.value='';" value="<?php _e('To search type and hit enter','hueman'); ?>" />

    Replace it with this which removes the “onfocus” event and adds the “onkeydown” event:

    <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='<?php _e('To search type and hit enter','hueman'); ?>';" onkeydown="if(this.value=='<?php _e('To search type and hit enter','hueman'); ?>')this.value='';" value="<?php _e('To search type and hit enter','hueman'); ?>" />

    Now the searchbox should receive the focus when opened, the cursor should be at the beginning of the text and the placeholder text should remain visible. As soon as the user presses a key the placeholder text will be removed.

    Thread Starter AZBros

    (@azbros)

    9 years, 10 months ago

    Hi bdbrown,
    First of all, no surprise, but the code worked perfectly! Thanks!

    Regarding the Dev Tools, yes, I’ve been trying them, but not having much luck. I don’t think I quite understand how to use them yet. They’ve helped lead me in the right direction a few times, but most of the time I get stuck and that’s when I come here.

    Overall, I’d say I’ve learned quite a lot and I’m really enjoying this whole process. I’m definitely more interested in coding then I was before. Once my site is finished I plan to continue learning.

    bdbrown

    (@bdbrown)

    9 years, 10 months ago

    Glad to hear you’ve been able to take a look at them. Once you get the hang of how they work they can provide a wealth of information, especially when trying to make CSS and, to a lesser extent, HTML changes. Seeing the effects of your changes in real time is very helpful. Be glad to continue answering questions you have either on the theme or the tools.

    Thread Starter AZBros

    (@azbros)

    9 years, 10 months ago

    Thanks! I’ve said it many times, but I really appreciate all your assistance.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Customize Search Button on Menu’ is closed to new replies.