mao101 Posted February 22, 2014 Share Posted February 22, 2014 Hello everyone! I have to implement this challenge: customize the search box like the www.zappos.com In plain English this is what I need: - Set up the search box bigger in high and length. - Add a more noticeable border: thicker and in a different color. - Last but not least the Search button requires a magnifier glass icon. The above changes will increase the call to action in order to use the search box by the customers. Any expert advice is highly appreciated. 1 Link to comment Share on other sites More sharing options...
Detelin Markov Posted February 23, 2014 Share Posted February 23, 2014 /* block top search */ #search_block_top { position:absolute; top:44px; left:0; } #search_block_top p {padding:0;} #search_block_top #search_query_top { padding: 0 10px; height: 33px; /*That is height of your search box*/ width:250px;/* 310 */ /*Here is width*/ border: 4px solid #666; /*4px is border width you can change it*/ border-right: 0 !important; color:#666; background:url(img/bg_search_input.png) repeat-x 0 0 #fff; float: left; } #search_block_top .button { border:none; border-radius:0; padding-right: 20px; color:#fff; font-size: 0px; text-transform:uppercase; background: url(http://png-4.findicons.com/files/icons/1389/g5_system/16/toolbar_find.png) no-repeat 5px 8px; /*Here you need to download magnifier icon and upload in block search img folder afterthat you need to change url in his line to new icon file something like: url(img/your_icon name.png)*/ float: left; border: 4px solid #666666; /*4px is border width you can change it*/ border-left: none; height: 41px; /*height of button*/ } Hi www.zappos.com - don`t have magnifier in search box. Try this css above (change your modules/blocksearch/ css file with css code above) and you will have: Regards /Detelin Markov 1 Link to comment Share on other sites More sharing options...
mao101 Posted February 25, 2014 Author Share Posted February 25, 2014 Detelin, I did changes on height and width but those changes are not reflected on the shop. The shop uses a paid template, may be that's why. Any idea how to make those changes modifying the default format of the template? Link to comment Share on other sites More sharing options...
Bill Dalton Posted February 25, 2014 Share Posted February 25, 2014 mao101, you may need to go to your theme folder and change it there. Look for a modules folder in your theme. Link to comment Share on other sites More sharing options...
Detelin Markov Posted February 25, 2014 Share Posted February 25, 2014 Bil Dalton is right. You need to override module in your theme folder. Post link to your site to take a look. Link to comment Share on other sites More sharing options...
mao101 Posted February 26, 2014 Author Share Posted February 26, 2014 Not pretty sure how to do it. Do you think it is enough deleting the module and pasting it on the theme folder? The current website looks like this www.anitakremer.com Link to comment Share on other sites More sharing options...
safa Posted February 26, 2014 Share Posted February 26, 2014 Not pretty sure how to do it. Do you think it is enough deleting the module and pasting it on the theme folder? The current website looks like this www.anitakremer.com i looked your website. open this file via sample css editor programs. http://www.anitakremer.com/presta/themes/theme474/css/global.css go to line #636 you can see this #id css code #search_block_top input.search_query just chance with and height, regards.. 1 Link to comment Share on other sites More sharing options...
mao101 Posted February 27, 2014 Author Share Posted February 27, 2014 (edited) Safa, according to your advice I did some changes in the global ccs on height and width. Now I would like to add the magnifier glass icon, and resize the Search button to match the search box size. where on the code I can put the icon url and how would be the code. The below is the current code: #search_block_top {height:43px;position:absolute;right:170px;top:124px;} #search_block_top label {display:none;float:left;padding:8px 5px 0 5px;} #search_block_top input.search_query {margin:0px 3px 0 0;float:left; height:23px; line-height:23px; border:2px solid #e5e5e5; padding:0 10px 0 10px;width:200px; position:relative; vertical-align:middle;} #search_block_top a {height:22px;padding:3px 10px 0 10px;display:block;float:left;background:#444444;color:#fff;font-weight:italic; font-size:12px;text-decoration:none;text-align:center;} #search_block_top a:hover{ background:#f48b47;} .ac_results {width:232px !important;border:none !important; position:absolute; left:0; top:0;} .ac_results ul {} .ac_results ul li {font:normal 12px "Arial" !important;color:#fff;cursor:pointer; padding:10px;} .ac_results ul li img{ margin-right:10px; margin-bottom:7px; float:left;} .ac_results ul li.ac_even {background:#3a3a3a;} .ac_results ul li.ac_odd {background:#3a3a3a;} .ac_results ul li:hover {background:#f48b47;color:#fff;} Edited February 27, 2014 by mao101 (see edit history) Link to comment Share on other sites More sharing options...
mao101 Posted February 28, 2014 Author Share Posted February 28, 2014 I really appreciate your help guys on this matter. Just pending to figure out how to fix the button search in size. Link to comment Share on other sites More sharing options...
generalexperts Posted February 28, 2014 Share Posted February 28, 2014 (edited) I have a few questions as well since we are on the same topic... (my site is http://tinyurl.com/n5pfy52 ) 1. Is it possible to highlight the search term that shows up in bold with a different color? ie. If you go to my site and you type in the first two words of one of the products that you see, you'll see the drop down and then those two words will be shown in bold. Can I change those bold words to also have a different color? 2. How do I add words like "Search..." in the search box and then when the user clicks on it, the word goes away. I'm using the Quick search module in prestashop 1.5.4.1 with a custom theme... Not sure what exactly to add to the tpl file... Edited April 21, 2014 by generalexperts (see edit history) Link to comment Share on other sites More sharing options...
mao101 Posted March 1, 2014 Author Share Posted March 1, 2014 (edited) general experts, answering your point # 2: go to: modules/blocksearch/blocksearch-top.tpl Find this code: <input class="search_query" type="text" id="search_query_top" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" /> And replace for this: <input class="search_query" type="text" id="search_query_top" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{else}{l s='This is my customized text' mod='blocksearch'}{/if}" onfocus="if(this.value=='{l s='This is my customized text' mod='blocksearch'}')this.value='';" onblur="if(this.value=='')this.value='{l s='This is my customized text' mod='blocksearch'}';" /> Replace "This is my customized text" by your own text. Edited March 1, 2014 by mao101 (see edit history) Link to comment Share on other sites More sharing options...
generalexperts Posted March 1, 2014 Share Posted March 1, 2014 Mao101 it worked! Hopefully we can get answers on the rest!! I appreciate your help!!! Link to comment Share on other sites More sharing options...
generalexperts Posted March 23, 2014 Share Posted March 23, 2014 Still looking for help on my post above... Anyone able to help? "1. Is it possible to highlight the search term that shows up in bold with a different color? ie. If you go to my site and you type in the first two words of one of the products that you see, you'll see the drop down and then those two words will be shown in bold. Can I change those bold words to also have a different color?" Link to comment Share on other sites More sharing options...
.png.022b5452a8f28f552bc9430097a16da2.png)
Recommended Posts