Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 25, 2014 at 8:00 pm #341031
    Holger Zscheyge

    Hi,

    is there a way to style the standard search box in Enfold? Here’s what I would like to do:

    1) Increase the height of the search box
    2) Make the placeholder text more visible (i.e. darker color, bigger font size)
    3) Let the placeholder text disappear on focus (i.e. when I place the mouse cursor in the search box)

    Also, a minor issue – the search box on our homepage (infotropic.ru) is not vertically centered within the video background section. I did add the search box via a widget module. Didn’t have that issue with a text module.

    Best regards,
    Holger

    October 27, 2014 at 2:41 am #341282
    Ismael

    Hey Holger!

    Thank you for using Enfold.

    Please use this on Quick CSS or custom.css to adjust the search box:

    #top #s {
height: 50px;
}

#top #searchsubmit, .ajax_load {
width: 40px;
height: 50px;
line-height: 40px;
}

input#s[placeholder] {
font-size: 18px;
}

    Use this on functions.php to remove the placeholder on focus:

    function remove_placeholder(){
?>
<script>
jQuery(window).load(function(){	
	jQuery('input,textarea').focus(function(){
		$(this).removeAttr('placeholder');
	});
});
</script>
<?php
}
add_action('wp_footer', 'remove_placeholder', 10);

    Regards,
    Ismael

    October 28, 2014 at 10:40 am #342114
    Holger Zscheyge

    Hi Ismael,

    thanks a lot. The styling issue is resolved. But the placeholder is still visible on focus. I do add the code at the end of the functions.php file, correct? And is there chance to get the search field centered vertically in the colored section (see infotropic.ru)? It is placed there via a widget. Didn’t have that problem with a text field.

    Best regards,
    Holger

    October 30, 2014 at 1:56 am #343150
    Andy

    Hi!

    to center the search field use this in your Quick CSS:

    .widget {
padding: 0;
}

    The php code for functions.php which Ismael provided works fine for me. Please clear browser cache and refresh your website.

    Cheers!
    Andy

    October 30, 2014 at 9:35 am #343295
    Holger Zscheyge

    Hi Andy,

    thanks, centering works. But I can’t get Ismael’s code to work. Just to be sure we are talking about the same thing – what I want to achieve is that the placeholder text vanishes the moment I put the cursor in the input field. So far it only vanishes when I start typing a search query. I put the whole code at the end of my functions.php file, flushed the browser cache, reloaded, but it still doesn’t work. Maybe it is because of the search plugin code (use Swiftype to replace WP’s internal search function)?

    Best regards,
    Holger

    November 1, 2014 at 5:39 am #344475
    Ismael

    Hi!

    Please remove the code then add this on Quick CSS or custom.css:

    #s:focus::-webkit-input-placeholder { color:transparent; }
#s:focus:-moz-placeholder { color:transparent; }

    Regards,
    Ismael

    November 1, 2014 at 11:33 am #344542
    Holger Zscheyge

    Hi Ismael, thanks a lot. Now it works.

    Best regards,
    Holger

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Search box styling’ is closed to new replies.