[SOLVED] search box placeholder

[matis]

i want my search box in the header to have a placeholder like shown on this place: http://jsfiddle.net/fabian/8Zacd/
How can I do this. I tried around in modules/blocksearch/blocksearch-top.tpl but i couldn't manage. Does anyone know a good solution to realise this?

[matis]

let me put it this way since i did not get a response on my previous question:
How do I get a placeholder in my searchbar? Like in eg. http://www.jolidragon.com/

[rocky]

Change line 8 of modules/blocksearch-top.tpl (in PrestaShop v1.3.1) from:

<input type="text" id="search_query" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" />

to:

<input type="text" id="search_query" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{else}{l s='Search' mod='blocksearch'}{/if}" onfocus="[removed]if(this.value=='{l s='Search' mod='blocksearch'}')this.value='';" onblur="[removed]if(this.value=='')this.value='{l s='Search' mod='blocksearch'}';" />

Change [removed] to javascript followed by a : and change 'Search' to the placeholder text you want.

[matis]

Thank you Rocky for your reply. I implemented the code, but it doesn't work when the page is loaded. The placeholder only shows up after you've activated the search field. I tried adding the same line you used with onfocus for onload but that didnt work. Any suggestions?

[rocky]

You're right. I've corrected my code above. Try again.

[matis]

It works like a charm now. Thank you for your quick reply!

[rocky]

Great. Please edit your first post and add [sOLVED] to the front of the title.....

[matis]

Done. I've also replaced this in the theme's global.css for styling purposes:

#header_right #search_block_top input#search_query { width: 12em }

for

#header_right #search_block_top input#search_query { width: 12em; font-style:italic; color:#999 }
#header_right #search_block_top input#search_query:focus { font-style:normal; color:#000 }

[fe311]

Hi bro´z, this dont work in PrestaShop™ 1.4.5.1

I try change to this in my blocksearch-top.tpl whith no sucess

 

<input type="text" id="search_query" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{else}{l s='Search' mod='blocksearch'}{/if}" onfocus="[removed]if(this.value=='{l s='Search' mod='blocksearch'}')this.value='';" onblur="[removed]if(this.value=='')this.value='{l s='Search' mod='blocksearch'}';" />

[fe311]

Solved by the post http://www.prestashop.com/forums/topic/77736-add-default-text-in-the-search-bar-at-the-top/

thanx man